Shortcodes Jump to heading
Various template engines can be extended with shortcodes for easy reusable content. This is sugar around Template Language Custom Tags. Shortcodes are supported in JavaScript, Liquid, Nunjucks, Handlebars templates. Here are a few examples:
{% user firstName, lastName %}
The comma between arguments is required in Nunjucks templates.
{% user firstName, lastName %}
The comma between arguments is optional in Liquid templates.
{% user firstName lastName %}
<!-- Note the three opening and closing curly brackets (the triple-stash) -->
{{{ user firstName lastName }}}
{{{ shortcodeName }}}
) to avoid double-escaped HTML. If it’s double-escaped a paragraph tag may render as <p>
module.exports = function({ firstName, lastName }) {
return `<h1>${this.user(firstName, lastName)}</h1>`;
};
module.exports = function(eleventyConfig) {
// Liquid Shortcode
eleventyConfig.addLiquidShortcode("user", function(firstName, lastName) { … });
// Nunjucks Shortcode
eleventyConfig.addNunjucksShortcode("user", function(firstName, lastName) { … });
// Handlebars Shortcode
eleventyConfig.addHandlebarsShortcode("user", function(firstName, lastName) { … });
// JavaScript Template Function
eleventyConfig.addJavaScriptFunction("user", function(firstName, lastName) { … });
// Universal Shortcodes are added to:
// * Liquid
// * Nunjucks
// * Handlebars
// * JavaScript
eleventyConfig.addShortcode("user", function(firstName, lastName) { … });
};
A shortcode returns content (a JavaScript string or template literal) that is injected into the template. You can use these however you’d like—you could even think of them as reusable components.
Read more about using shortcodes on the individual Template Language documentation pages:
- JavaScript
*.11ty.js
(with async support) - Liquid
*.liquid
(with async support) - Nunjucks
*.njk
(with async support) - Handlebars
*.hbs
Paired Shortcodes Jump to heading
The shortcodes we saw above were nice, I suppose. But really, they are not all that different from a filter. The real ultimate power of Shortcodes comes when they are paired. Paired Shortcodes have a start and end tag—and allow you to nest other template content inside!
{% user firstName, lastName %}
Hello {{ someOtherVariable }}.
Hello {% anotherShortcode %}.
{% enduser %}
The comma between arguments is optional in Liquid templates.
{% user firstName, lastName %}
Hello {{ someOtherVariable }}.
Hello {% anotherShortcode %}.
{% enduser %}
The comma between arguments is required in Nunjucks.
{{# user firstName lastName }}
Hello {{ someOtherVariable }}.
Hello {{ anotherShortcode }}.
{{/ user }}
module.exports = function(data) {
let userContent = `Hello ${data.someOtherVariable}
Hello ${this.anotherShortCode()}`;
return `<h1>${this.user(userContent, data.firstName, data.lastName)}</h1>`;
};
When adding paired shortcodes using the Configuration API, the first argument to your shortcode callback is the nested content.
module.exports = function(eleventyConfig) {
// Liquid Shortcode
eleventyConfig.addPairedLiquidShortcode("user", function(content, firstName, lastName) { … });
// Nunjucks Shortcode
eleventyConfig.addPairedNunjucksShortcode("user", function(content, firstName, lastName) { … });
// Handlebars Shortcode
eleventyConfig.addPairedHandlebarsShortcode("user", function(content, firstName, lastName) { … });
// JavaScript Template Function
eleventyConfig.addJavaScriptFunction("user", function(content, firstName, lastName) { … });
// Universal Shortcodes are added to:
// * Liquid
// * Nunjucks
// * Handlebars
// * JavaScript
eleventyConfig.addPairedShortcode("user", function(content, firstName, lastName) { … });
};
Read more about using paired shortcodes on the individual Template Language documentation pages:
- JavaScript
*.11ty.js
(with async support) - Liquid
*.liquid
(with async support) - Nunjucks
*.njk
(with async support) - Handlebars
*.hbs
Universal Shortcodes Jump to heading
Universal shortcodes are added in a single place and subsequently available to multiple template engines, simultaneously. This is currently supported in JavaScript, Nunjucks, Liquid, and Handlebars template types.
module.exports = function(eleventyConfig) {
// Universal Shortcodes are added to:
// * Liquid
// * Nunjucks
// * Handlebars
// * JavaScript
// Single Universal Shortcode
eleventyConfig.addShortcode("myShortcode", function(firstName, lastName) { … });
// Paired Universal Shortcode
eleventyConfig.addPairedShortcode("user", function(content, firstName, lastName) { … });
};