11ty addfilter. Nov 24, 2020 · Filters for Data Arrays in 11ty Posted on: Nov 24, 2020 b...

11ty addfilter. Nov 24, 2020 · Filters for Data Arrays in 11ty Posted on: Nov 24, 2020 by Stephanie Eckles 🍿 3 min. Add an eleventy. They are currently supported in JavaScript , Markdown, Nunjucks, Liquid, and WebC. Starter Projects — Eleventy Featured · Grease is a website starter that makes building performant, accessible, aesthetic websites fast & frictionless. Here are a few examples: Filters can be added using the Configuration API and are available to multiple template engines, simultaneously. Eleventy has added a new universal filter API for asynchronous filters and extended the currently available addFilter method to be async-friendly. 0 with pathPrefix instead of having to litter the url filter throughout your content moving forward! Access to page data values # If you aren’t using an arrow function, Liquid Shortcodes (and Nunjucks and 11ty. May 15, 2022 · With 11ty, you can create any filter you want without needing to learn a new language or spend many frustrating hours reading docs. Configuration files are optional. Filters url Filter — Eleventy If you need to deploy your site to a subfolder, it’s recommended to use the simpler HTML <base> plugin Added in v2. 11ty. Oct 15, 2020 · Custom filters for Nunjucks templates in Eleventy Eleventy (or 11ty) with Nunjucks is one of my favourite combinations recently. We’ll use pagination to automatically generate a template for each tag we want to link to. Frontend fashions come and go, but 11ty’s performance leaderboard and ease of use makes it intriguing enough to give it a try. 11ty also has addFilter which provides a unified method for creating filters that will be available no matter which template engine is used. liquid Nunjucks *. This article only looked at a few filters that you may find useful. If you always query the same combinations of tags then use the above technique to create and mount a dedicated collection. js JavaScript Functions) will have access to Eleventy page data values without needing to pass them in as arguments. Various template engines can be extended with custom filters to modify content. We can repeat the same logic for shortcodes and other things like functions and custom collections. config. read Includes filters for creating an excerpt and other content enhancements. It uses 11ty, Lightning CSS, and Esbuild, and includes a lightweight, declarative CSS architecture that sets you up for success. Here’s a sample pagination template using Nunjucks: --- pagination Mar 24, 2021 · Filters for 11ty Content Updated on: Mar 24, 2021 by Stephanie Eckles 🍿 3 min. Here’s an example: JavaScript *. Note that even though Handlebars is used for synchronous filters in addFilter, it is excluded from asynchronous filters because Handlebars is not async-friendly. The addShortcode method is simply 11ty a unified way of creating tags and extensions. IMHO this depends how dynamic your combinations need to be. njk Handlebars *. We’ll use 1 built-in filter, and make 2 custom filters. Aug 22, 2024 · Finally, we get the name (name of filter) and the filter itself and add it to Eleventy using addFilter(). It might look like this: Filters Various template engines can be extended with custom filters to modify content. Jul 11, 2019 · These give you the more conventional SQL style array filtering functions that I think you may want - as found in Jekyll. May 14, 2025 · From what I'm looking at elsewhere on filter (), the return part of a filter is the part where you choose what makes it into the filter. This is currently supported in JavaScript, Nunjucks, Liquid, and Handlebars. Mar 4, 2023 · 😕 1 noelforte mentioned this on Nov 21, 2024 Inject ctx into addFilter noelforte/eleventy-plugin-vento#72 jeremenichelli mentioned this on Mar 12, 2025 Better way to consume global data build on shortcodes #3628 Aug 15, 2022 · This week, we’re going to dive into 11ty filters. 0. Instead of "myCustomDataKey", do I put in "portCategories: illustration" to get all the portfolio items I've given the category of illustration to? Sep 27, 2023 · My requirement is to remove apostrophes instead of replacing them with dashes, which is the default behavior of the 11ty slugify filter. Example: If I have a blog post titled "I've lost my keys", I want the URL to read /ive-lost-my-keys/ instead of the default behavior, which is /i-ve-lost-my-keys/. Both Nunjucks, Liquid and other template languages in 11ty have capabilities for filters, data and tags. May 18, 2024 · In refactoring my website earlier this year, part of my process was to evaluate and revise the many, many Eleventy Filters I use throughout my website’s build, so in this post, I’ll run through a handful of them. 1 If you haven’t heard about these, 11ty is a simple static site generator (think Jekyll, but you can choose from a wide variety of Quick Tip: Zero Maintenance Tag Pages for your Blog — Eleventy Quick Tip: Zero Maintenance Tag Pages for your Blog This quick tip will show you how to automatically generate Tag Pages (lists of content tagged into a collection). . js Liquid *. hbs Universal Filters # Universal filters can be added in a single place and are available to multiple template engines, simultaneously. read Learn several ways to randomly pick or subset data, or limit the returned results from a data array. js file to the root directory of your project (read more about default configuration filenames) to configure Eleventy to your own project’s needs. mcn dtp xzc stk nhh eda ecp qdw odb pbg yhm kii ksj fub qlg