Skip to content

Latest commit

 

History

History
108 lines (85 loc) · 2.99 KB

custom-tags.md

File metadata and controls

108 lines (85 loc) · 2.99 KB
eleventyNavigation relatedKey relatedTitle tags
parent key order
Configuration
Custom Tags
5
custom-tags
Template Custom Tags
related-shortcodes
related-nunjucks
related-liquid
related-handlebars

Custom Tags

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.

LiquidJS example

{% codetitle ".eleventy.js" %}

{% raw %}

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: function(scope, hash) {
        // Resolve variables
        var str = liquidEngine.evalValue(this.str, scope); // "alice"

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

{% endraw %}

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

Nunjucks example {% addedin "0.5.0" %}

{% codetitle ".eleventy.js" %}

{% raw %}

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);
      };
    }();
  });
};

{% endraw %}

Handlebars example

Surprise—these are helpers!

{% codetitle ".eleventy.js" %}

{% raw %}

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();
  });
};

{% endraw %}