The Render plugin is comprised of two shortcodes for use in your Nunjucks, Liquid or JS templates. It’s a plugin that is bundled with the main 11ty NPM package and ready to use as soon as you nom install 11ty.
To get started with the plugin, you need to install it in your .eleventy.js config file by requiring the plugin and then initializing it
const { EleventyRenderPlugin } = require("@11ty/eleventy");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(EleventyRenderPlugin);
}
The two shortcodes it adds to your project are renderTemplate and renderFile.
In this part, we’ll tackle renderTemplate.
renderTemplate allows you to put a string between two matching shortcodes and render that string in a templating language different from that of the current template
Using the renderTemplate tag
<!-- ...head, etc. -->
<body>
<p>The date is: {{ today | date: "%B %d, %y" }}</p>
</body>
Here we have a Nunjucks index page. In this page, we have a date time. It’s not great to read for a human. I want to reformat that in the template with a filter, but uh-oh, Nunjucks doesn’t have a date filter! Now that my project has the renderTemplate paired shortcode, I can get to work.
{% renderTemplate "liquid", settings %}
<p>The date is: {{ today | date: "%B %d, %y" }}</p>
{% endrenderTemplate %}
The renderTemplate tag accepts two arguments: the templating language we wish to use (any template string that eleventyConfig accepts will work such as html,liquid,ejs,md,hbs,mustache,haml,pug,njk,11ty.js) and an optional set of data.
In this case, I want to render the string with Liquid and I want to get a variable off the settings global JavaScript data file that is generating the current date.
Anything between the renderTemplate and the endRenderTemplate will be rendered in Liquid instead of Nunjucks.
This allows me to use the powerful date filter in liquid to format the date time string create by a JS data file (named settings.js).
Or for a simpler use case, sometimes writing Markdown is more ergonomic than writing HTML, so why not embed a little Markdown in your HTML
{% renderTemplate "liquid,md" %}
# I am a title
* I am a list
* I am a list
1. I am an ordered list
1. i'm actually second in an ordered list test
{% endrenderTemplate %}
Template engines all the way down!
This plugin opens the door to a lot of new possibilities. Any templating language can be embedded in any page or template! 11ty: It's templates all the way down!
Just want the code? Check the 11ty Second 11ty repo for this and others!
Top comments (0)