Skip to navigation Skip to main content
Blog
Eleventy, 2024 in Review
Versions
Stable
3.0.0
Canary
3.0.1-alpha.5
Menu
Compare ×4000 file build
Eleventy 1.93s
Gatsby 29.05s

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.

Liquid

Jump to section titled: Liquid
eleventy.config.js
export default 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"
      },
    };
  });
};
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.

Nunjucks

Jump to section titled: Nunjucks
eleventy.config.js
export default 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);
      };
    })();
  });
};
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);
      };
    })();
  });
};

Other pages in Configuration:

Jump to section titled: Related Docs