Custom Tags

• LiquidJS: Tags

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: Custom Tags

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!

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