First things first, we have to require and initialize the plugin in our 11ty configuration file (.eleventy.js
in our root). Important to note, this plugin is bundled with 11ty as of version 1.0.0.
This gives us access to two new template tags: renderTemplate
and renderFile
// Require the plugin
const { EleventyRenderPlugin } = require("@11ty/eleventy");
module.exports=function(eleventyConfig)
// Initialize the plugin
eleventyConfig.addPlugin(EleventyRenderPlugin);
}
From there, we can embed templates with whatever templating language 11ty understands (even custom ones if we've created one.
Here's a snippet of me using the liquid | date
filter in a Nunjucks template to parse today's date from a settings document
<!-- Inside index.njk - a Nunjucks template.
This renders with the liquid parser -->
{% renderTemplate "liquid", settings %}
<p>The date is: ({ today | date: "B %d, %y" }}</p>
{% endrenderTemplate %}
Something to note here: If you want to use data inside the template tag, you need to pass it in as an argument. The "settings" variable in code above is me passing data from a JS data file called /_data/settings.js
. It contains the today
property that is a JS datetime