Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Stable
2.0.1
Canary
3.0.0-alpha.10
Toggle Menu
Eleventy 1.93s
Next.js 70.65s

Custom Tags

INFO:
It’s unlikely that you want this feature. You probably want shortcodes instead, Eleventy’s custom tags sugar (it’s easier to use).

Various template engines can be extended with custom tags.

Custom Tags are unrelated to Eleventy’s Collections using Tags feature. Unfortunately we’ve inherited this name from various upstream template languages.

But, after all that, you can still add a Custom Tag using the Configuration API.

View this example in: Liquid Nunjucks 11ty.js Handlebars
Filename .eleventy.js
module.exports = function (eleventyConfig) {
// Usage: {% uppercase myVar %} where myVar has a value of "alice"
// Usage: {% uppercase "alice" %}
eleventyConfig.addLiquidTag("uppercase", function (liquidEngine) {
return {
parse: function (tagToken, remainingTokens) {
this.str = tagToken.args; // myVar or "alice"
},
render: async function (scope, hash) {
// Resolve variables
var str = await this.liquid.evalValue(this.str, scope); // "alice"

// Do the uppercasing
return str.toUpperCase(); // "ALICE"
},
};
});
};

See all of the built-in tag implementations for LiquidJS.

Filename .eleventy.js
module.exports = function (eleventyConfig) {
// Usage: {% uppercase myVar %} where myVar has a value of "alice"
// Usage: {% uppercase "alice" %}
eleventyConfig.addNunjucksTag("uppercase", function (nunjucksEngine) {
return new (function () {
this.tags = ["uppercase"];

this.parse = function (parser, nodes, lexer) {
var tok = parser.nextToken();

var args = parser.parseSignature(null, true);
parser.advanceAfterBlockEnd(tok.value);

return new nodes.CallExtensionAsync(this, "run", args);
};

this.run = function (context, myStringArg, callback) {
let ret = new nunjucksEngine.runtime.SafeString(
myStringArg.toUpperCase()
);
callback(null, ret);
};
})();
});
};

Surprise—these are helpers!

Filename .eleventy.js
module.exports = function (eleventyConfig) {
// Usage: {{ uppercase myVar }} where myVar has a value of "alice"
// Usage: {{ uppercase "alice" }}
eleventyConfig.addHandlebarsHelper("uppercase", function (myStringArg) {
return myStringArg.toUpperCase();
});
};

Other pages in Configuration:


Related Docs