Skip to content

Instantly share code, notes, and snippets.

@Lego2012
Last active June 16, 2022 17:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Lego2012/756b86482a7754c83c7b7202d63c23b4 to your computer and use it in GitHub Desktop.
Save Lego2012/756b86482a7754c83c7b7202d63c23b4 to your computer and use it in GitHub Desktop.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment