快捷码（Shortcodes）

各种模板引擎都支持通过快捷码（shortcodes）实现内容重用。快捷码（shortcodes）是模板语言（Template Language）基于 自定义标签（Custom Tags） 提供的一种语法糖。JavaScript、Liquid、Nunjucks、Handlebars 模板语言是支持 快捷码（Shortcodes）的。

以下是几个示例：

{% user firstName, lastName %}

{% user firstName lastName %}

{% user firstName, lastName %}

module.exports = function({ firstName, lastName }) {
  return `<h1>${this.user(firstName, lastName)}</h1>`;
};

<!-- Note the three opening and closing curly brackets (the triple-stash) -->
{{{ user firstName lastName }}}

module.exports = function(eleventyConfig) {
  // Shortcodes added in this way are available in:
  // * Markdown
  // * Liquid
  // * Nunjucks
  // * Handlebars (not async)
  // * JavaScript

  eleventyConfig.addShortcode("user", function(firstName, lastName) { … });

  // Async support for `addShortcode` is new in Eleventy v2.0.0
  eleventyConfig.addShortcode("user", async function(myName) { /* … */ });

  // Async method available
  eleventyConfig.addAsyncShortcode("user", async function(myName) { /* … */ });
};

A shortcode returns content (a JavaScript string or template literal) that is used in the template. You can use these however you’d like—you could even think of them as reusable components.

请阅读各个模板语言关于快捷码（shortcodes）的文档以了解更多信息：

• JavaScript *.11ty.js （支持异步）
• Liquid *.liquid （支持异步）
• Nunjucks *.njk （支持异步）
• Handlebars *.hbs （不支持异步）

配对快捷码（Paired Shortcodes） Jump to heading #

从上面所了解到的快捷码（shortcodes）信息来看，它还是挺不错的。但实际上，快捷码和过滤器（filter）没有什么不同。其实，当快捷码（Shortcodes）配对使用时才能体现出它的强大之处。配对快捷码（Paired Shortcodes）由一个开始标签和一个结束标签组成，并且允许你在其中嵌套其它模板内容！

{% user firstName, lastName %}
  Hello {{ someOtherVariable }}.

  Hello {% anotherShortcode %}.
{% enduser %}

{% user firstName, lastName %}
  Hello {{ someOtherVariable }}.

  Hello {% anotherShortcode %}.
{% enduser %}

{{# user firstName lastName }}
  Hello {{ someOtherVariable }}.

  Hello {{ anotherShortcode }}.
{{/ user }}

module.exports = function(data) {
  let userContent = `Hello ${data.someOtherVariable}

Hello ${this.anotherShortCode()}`;

  // pass the content as the first parameter.
  return `<h1>${this.user(userContent, data.firstName, data.lastName)}</h1>`;
};

当使用 Eleventy 的 API 添加配对快捷码（paired shortcodes）时，第一个参数是配对快捷码的起止标签之间所嵌入的内容。

module.exports = function(eleventyConfig) {
  // Shortcodes added in this way are available in:
  // * Markdown
  // * Liquid
  // * Nunjucks
  // * Handlebars (not async)
  // * JavaScript

  eleventyConfig.addPairedShortcode("user", function(content, firstName, lastName) { … });

  // Async support for `addPairedShortcode` is new in Eleventy v2.0.0
  eleventyConfig.addPairedShortcode("user", async function(content, myName) { /* … */ });

  // Async method available
  eleventyConfig.addPairedAsyncShortcode("user", async function(content, myName) { /* … */ });
};

Read more about using paired shortcodes on the individual Template Language documentation pages:

• JavaScript *.11ty.js （支持异步）
• Liquid *.liquid （支持异步）
• Nunjucks *.njk （支持异步）
• Handlebars *.hbs （不支持异步）

Asynchronous Shortcodes Jump to heading #

This is supported by Liquid, Nunjucks, and JavaScript template types (Handlebars is not async-friendly).

module.exports = function(eleventyConfig) {
  // Async support for `addShortcode` and `addPairedShortcode` is new in Eleventy v2.0.0
  eleventyConfig.addShortcode("single", async function(myName) { /* … */ });
  eleventyConfig.addPairedShortcode("paired", async function(content, myName) { /* … */ });

  // Async methods available in Eleventy v0.10.0+
  eleventyConfig.addAsyncShortcode("single", async function(myName) { /* … */ });
  eleventyConfig.addPairedAsyncShortcode("paired", async function(content, myName) { /* … */ });
};

Scoped Data in Shortcodes Jump to heading #

A few Eleventy-specific data properties are available to shortcode callbacks.

• this.page
• this.eleventy Added in v2.0.0

module.exports = function(eleventyConfig) {
  // Make sure you’re not using an arrow function here: () => {}
  eleventyConfig.addShortcode("myShortcode", function() {
    // this.page
    // this.eleventy
  });
};

Per-Engine Shortcodes Jump to heading #

You can also specify different functionality for shortcodes in each engine, if you’d like. Using the addShortcode or addPairedShortcode function is equivalent to adding the shortcode to every supported template engine.

module.exports = function(eleventyConfig) {
  // Liquid
  eleventyConfig.addLiquidShortcode("user", function(firstName, lastName) {});
  eleventyConfig.addPairedLiquidShortcode("user", function(content, firstName, lastName) {});

  // Nunjucks
  eleventyConfig.addNunjucksShortcode("user", function(firstName, lastName) {});
  eleventyConfig.addPairedNunjucksShortcode("user", function(content, firstName, lastName) {});

  // Handlebars
  eleventyConfig.addHandlebarsShortcode("user", function(firstName, lastName) {});
  eleventyConfig.addPairedHandlebarsShortcode("user", function(content, firstName, lastName) {});

  // JavaScript Template Function (New in 0.7.0)
  eleventyConfig.addJavaScriptFunction("user", function(firstName, lastName) {});
  eleventyConfig.addJavaScriptFunction("user", function(content, firstName, lastName) {}); // Faux-paired shortcode

Async Friendly Per-Engine Shortcodes Jump to heading #

Learn more about these on the individual template engine pages for Nunjucks, Liquid, and 11ty.js JavaScript.

  // Async-friendly
  // Liquid is already async-friendly
  eleventyConfig.addLiquidShortcode("user", async function() {});
	eleventyConfig.addPairedLiquidShortcode("user", async function(content) {});

  // Nunjucks Async
  eleventyConfig.addNunjucksAsyncShortcode("user", async function() {});
  eleventyConfig.addPairedNunjucksAsyncShortcode("user", async function(content) {});

	 // JavaScript Template Function (make sure you `await` these!)
  eleventyConfig.addJavaScriptFunction("user", async function() {});
  eleventyConfig.addJavaScriptFunction("user", async function(content) {}); // Faux-paired shortcode
};

Other pages in Configuration:

• Passthrough File Copy
• Ignore Files
• Filters
  • url
  • slugify
  • log
  • get*CollectionItem
• 快捷码（Shortcodes）
• Custom Tags
• Events
• Watch and Serve
  • Eleventy Dev Server
  • Browsersync
  • Vite

相关文档

• Template Custom Tags
• Template Language—Handlebars
• Template Language—JavaScript
• Template Language—Liquid
• Template Language—Nunjucks
• Template Filters