CNB版本

社区版: cnb.cool
国外版: cnb.build

介绍
- 从CNB开始
  - 性能
- 学习
  - 打开终端
  - Installing JavaScript
- 入门项目
- 教程
  - 快速提示
使用指南
使用指南
云原生构建
云原生构建
- 基础使用
- 进阶使用
- 插件
- 示例介绍
云原生开发
云原生开发
- 基础用法
- 高级用法
代码托管
代码托管
指南
指南
- 快速开始
- 命令行使用
- 添加配置文件
- 添加 CSS、JS、字体
- SSG框架指南
  - HTML
  - Markdown
    - MDX
  - JavaScript
    - JSX
    - TypeScript
  - Custom
  - WebC
  - Nunjucks
  - Liquid
  - Handlebars
  - Mustache
  - EJS
  - HAML
  - Pug
  - Sass
插件
插件
服务
服务
社区

2025/12/14

JavaScript(v0.7.0)

本页大纲

原始值
函数
Classes
JavaScript Template Functions

Eleventy 简称	文件扩展名	版本添加
`11ty.js`	`.11ty.js`	`*`
`11ty.js`	`.11ty.cjs`	`0.11.0`
`11ty.js`	`.11ty.mjs`	`3.0.0`

相关语言：JSX、TypeScript、MDX
JavaScript 文件中不支持前置内容。请改用 data 导出。

Eleventy 支持许多将被解析为 Eleventy 模板的不同类型的 JavaScript 内容。下面将全面描述它们。

原始值

原始值将无法访问数据或 JavaScript 模板函数。请改用返回值的函数。

字符串

ESM CommonJS

export default "<p>Zach</p>";

module.exports = "<p>Zach</p>";

或者使用模板字面量：

ESM CommonJS

export default `<p>These can
span
multiple
lines!</p>`;

module.exports = `<p>These can
span
multiple
lines!</p>`;

缓冲区

一些模板库返回缓冲区（例如 viperHTML）。

ESM CommonJS

export default Buffer.from("<p>Zách</p>");

module.exports = Buffer.from("<p>Zách</p>");

Promise

ESM CommonJS

export default new Promise((resolve, reject) => {
setTimeout(function () {
resolve("<p>Zach</p>");
}, 1000);
});

module.exports = new Promise((resolve, reject) => {
setTimeout(function () {
resolve("<p>Zach</p>");
}, 1000);
});

函数

可以返回任何原始值（例如字符串、缓冲区、Promise）。使用模板字面量来嵌入数据值，而无需连接字符串！

ESM CommonJS

export default function (data) {
return `<p>${data.name}</p>`;
};

module.exports = function (data) {
return `<p>${data.name}</p>`;
};

解构语法更容易阅读：

ESM CommonJS

export default function ({ name }) {
return `<p>${name}</p>`;
};

module.exports = function ({ name }) {
return `<p>${name}</p>`;
};

也许您更喜欢箭头函数：

ESM CommonJS

export default ({ name }) => `<p>${name}</p>`;

module.exports = ({ name }) => `<p>${name}</p>`;

async 函数也可以使用：

ESM CommonJS

const getAnAsyncThing = require("./lib/asyncThing");

export default async function (data) {
return `<p>${await getAnAsyncThing()}</p>`;
};

const getAnAsyncThing = require("./lib/asyncThing");

module.exports = async function (data) {
return `<p>${await getAnAsyncThing()}</p>`;
};

Classes

Eleventy 查找具有 render 方法的类，并使用 render 返回模板的内容。render 方法可以是 async 的。

render 方法可以返回任何原始值（例如字符串、缓冲区、Promise）。

ESM CommonJS

class Test {
// or `async render({name}) {`
render({ name }) {
return `<p>${name}</p>`;
}
}

export default Test;

class Test {
// or `async render({name}) {`
render({ name }) {
return `<p>${name}</p>`;
}
}

module.exports = Test;

可选的 `data` 方法

前置内容在 JavaScript 模板类型中不受支持。请改用 data 方法！此外，在数据级联中还有更多替代选项。

此数据作为模板的前置内容，并且与前置内容类似，将优先于数据级联中的所有其他数据。data 方法可以是异步的 async data() 或者可以是 getter get data()。

ESM CommonJS

class Test {
// or `async data() {`
// or `get data() {`
data() {
return {
name: "Ted",
layout: "teds-rad-layout",
// … other front matter keys
};
}

    render({ name }) {
    	// will always be "Ted"
    	return `<p>${name}</p>`;
    }

}

export default Test;

class Test {
// or `async data() {`
// or `get data() {`
data() {
return {
name: "Ted",
layout: "teds-rad-layout",
// … other front matter keys
};
}

    render({ name }) {
    	// will always be "Ted"
    	return `<p>${name}</p>`;
    }

}

module.exports = Test;

永久链接

permalink 数据键将在此处起作用。永久链接可以是原始值（例如字符串、缓冲区、Promise）或返回任何原始值的函数。

永久链接字符串

ESM CommonJS

class Test {
data() {
return {
// Writes to "/my-permalink/index.html"
permalink: "/my-permalink/",
};
}

    render(data) {
    	/* … */
    }

}

export default Test;

class Test {
data() {
return {
// Writes to "/my-permalink/index.html"
permalink: "/my-permalink/",
};
}

    render(data) {
    	/* … */
    }

}

module.exports = Test;

永久链接函数

永久链接函数可以返回任何原始值（例如字符串、缓冲区、Promise）。

ESM CommonJS

class Test {
data() {
return {
key: "hello",
// Writes to "/my-permalink/hello/index.html"
permalink: (data) => `/my-permalink/${data.key}/`,
};
}

    render(data) {
    	/* … */
    }

}

export default Test;

class Test {
data() {
return {
key: "hello",
// Writes to "/my-permalink/hello/index.html"
permalink: (data) => `/my-permalink/${data.key}/`,
};
}

    render(data) {
    	/* … */
    }

}

module.exports = Test;

使用过滤器的永久链接函数

通用过滤器、短代码和其他 JavaScript 模板函数在这里工作并暴露在 this 上。阅读更多关于 Eleventy 提供的通用过滤器的信息。

ESM CommonJS

class Test {
data() {
return {
title: "This is my blog post title",
// Writes to "/this-is-my-blog-post-title/index.html"
permalink: function (data) {
return `/${this.slug(data.title)}/`;
},
};
}

    render(data) {
    	/* … */
    }

}

export default Test;

class Test {
data() {
return {
title: "This is my blog post title",
// Writes to "/this-is-my-blog-post-title/index.html"
permalink: function (data) {
return `/${this.slug(data.title)}/`;
},
};
}

    render(data) {
    	/* … */
    }

}

module.exports = Test;

Markdown 和 JavaScript

是的，您可以使用 JavaScript 作为 Markdown 的预处理器语言。阅读更多关于 templateEngineOverride的信息。

ESM CommonJS

class Test {
data() {
return {
myName: "Zach",
templateEngineOverride: "11ty.js,md",
};
}

    render(data) {
    	return `# 这是 ${data.myName}`;
    }

}

export default Test;

class Test {
data() {
return {
myName: "Zach",
templateEngineOverride: "11ty.js,md",
};
}

    render(data) {
    	return `# 这是 ${data.myName}`;
    }

}

module.exports = Test;

虽然 templateEngineOverride: 11ty.js,md 可以添加 markdown 支持，但 JavaScript 模板的特殊行为不允许在此处支持其他模板引擎（例如 templateEngineOverride: njk,md）。一个解决方案是使用渲染插件。

JavaScript Template Functions

JavaScript 模板函数允许您用额外功能扩展您的 JavaScript 模板。如果您添加任何通用过滤器或短代码，它们将作为 JavaScript 模板函数暴露出来。

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
eleventyConfig.addJavaScriptFunction("myFunction", function(a, b) { /_ … _/ });
};

module.exports = function(eleventyConfig) {
eleventyConfig.addJavaScriptFunction("myFunction", function(a, b) { /_ … _/ });
};

js-fn-example.11ty.js

ESM CommonJS

export default function (data) {
	return `<h1>${this.myFunction(data.a, data.b)}</h1>`;
};

module.exports = function (data) {
	return `<h1>${this.myFunction(data.a, data.b)}</h1>`;
};

异步 JavaScript 模板函数

这与任何 async JavaScript 函数或返回 Promise 的函数工作方式相同。

这与上面的示例相同，但在 function 前添加了 async。

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
eleventyConfig.addJavaScriptFunction("myAsyncFunction", async function(a, b) { /_ … _/ });
};

module.exports = function(eleventyConfig) {
eleventyConfig.addJavaScriptFunction("myAsyncFunction", async function(a, b) { /_ … _/ });
};

这与上面的示例相同，但在调用函数前添加了 await。

Filename js-async-fn-example.11ty.js

ESM CommonJS

export default async function (data) {
return `<h1>${await this.myAsyncFunction(data.a, data.b)}</h1>`;
};

module.exports = async function (data) {
return `<h1>${await this.myAsyncFunction(data.a, data.b)}</h1>`;
};

关于箭头函数的警告

WARNING

请注意，根据定义（阅读 MDN）箭头函数无法访问 this，因此在箭头函数模板内使用 JavaScript 函数将抛出错误。

Filename js-arrow-fn-example.11ty.js

ESM CommonJS

export default (data) => {
// Using `this` in an arrow function will throw an error!
return `<h1>${this.myFunction(data.a, data.b)}</h1>`;
};

module.exports = (data) => {
// Using `this` in an arrow function will throw an error!
return `<h1>${this.myFunction(data.a, data.b)}</h1>`;
};

与过滤器和短代码的关系

任何通用过滤器或短代码也将作为 JavaScript 模板函数可用。

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
// Universal filters (Adds to Liquid, Nunjucks, 11ty.js)
eleventyConfig.addFilter("myFilter", function(myVariable) { /_ … _/ });

// Universal Shortcodes (Adds to Liquid, Nunjucks, 11ty.js)
eleventyConfig.addShortcode("user", function(firstName, lastName) { /_ … _/ });

// Universal Paired Shortcodes (Adds to Liquid, Nunjucks, 11ty.js)
eleventyConfig.addPairedShortcode("pairedUser", function(content, firstName, lastName) { /_ … _/ });
};

module.exports = function(eleventyConfig) {
// Universal filters (Adds to Liquid, Nunjucks, 11ty.js)
eleventyConfig.addFilter("myFilter", function(myVariable) { /_ … _/ });

// Universal Shortcodes (Adds to Liquid, Nunjucks, 11ty.js)
eleventyConfig.addShortcode("user", function(firstName, lastName) { /_ … _/ });

// Universal Paired Shortcodes (Adds to Liquid, Nunjucks, 11ty.js)
eleventyConfig.addPairedShortcode("pairedUser", function(content, firstName, lastName) { /_ … _/ });
};

Filename universal-examples.11ty.js

ESM CommonJS

export default function (data) {
return `

<h1>${this.myFilter(data.myVar)}</h1>
<p>${this.user(data.firstName, data.lastName)}</p>
<p>${this.pairedUser(
		`Here is some more content`,
		data.firstName,
		data.lastName
	)}</p>
`;
};

module.exports = function (data) {
return `

<h1>${this.myFilter(data.myVar)}</h1>
<p>${this.user(data.firstName, data.lastName)}</p>
<p>${this.pairedUser(
		`Here is some more content`,
		data.firstName,
		data.lastName
	)}</p>
`;
};

访问 `page` 数据值

如果您不使用箭头函数，JavaScript 函数（以及 Nunjucks、Liquid 短代码）将可以访问 Eleventy page 数据值，而无需将它们作为参数传入。

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
eleventyConfig.addJavaScriptFunction("myFunction", function () {
// Available in 0.11.0 and above
console.log(this.page);

    	// 例如：
    	console.log(this.page.url);
    	console.log(this.page.inputPath);
    	console.log(this.page.fileSlug);
    });

};

module.exports = function (eleventyConfig) {
eleventyConfig.addJavaScriptFunction("myFunction", function () {
// Available in 0.11.0 and above
console.log(this.page);

    	// 例如：
    	console.log(this.page.url);
    	console.log(this.page.inputPath);
    	console.log(this.page.fileSlug);
    });

};

来自社区

+ 添加你的！

JavaScript(v0.7.0)

原始值

字符串

缓冲区

Promise

函数

Classes

可选的 `data` 方法

永久链接

永久链接字符串

永久链接函数

使用过滤器的永久链接函数

Markdown 和 JavaScript

JavaScript Template Functions

异步 JavaScript 模板函数

关于箭头函数的警告

与过滤器和短代码的关系

访问 `page` 数据值

来自社区

其他页面在 Template Languages

相关文档

JavaScript(v0.7.0)

原始值

字符串

缓冲区

Promise

函数

Classes

可选的 data 方法

永久链接

永久链接字符串

永久链接函数

使用过滤器的永久链接函数

Markdown 和 JavaScript

JavaScript Template Functions

异步 JavaScript 模板函数

关于箭头函数的警告

与过滤器和短代码的关系

访问 page 数据值

来自社区

其他页面在 Template Languages

相关文档

可选的 `data` 方法

访问 `page` 数据值