Stable: 3.0.0

Toggle Menu

Compare ×4000 file build

Eleventy 1.93s

Next.js 70.65s

配置

Contents

配置文件的默认名称
配置参数

配置文件不是必须的。请在项目根目录下添加一个名为 eleventy.config.js 的文件（阅读更多关于默认配置文件名称的信息），以便根据自己项目的需要配置 Eleventy。该文件大概如下所示：

eleventy.config.js

ESM CommonJS

export default async function(eleventyConfig) {
	// Configure Eleventy
};

module.exports = async function(eleventyConfig) {
	// Configure Eleventy
};

There are a few different ways to shape your configuration file. Added in v3.0.0Support for ESM and Asynchronous callbacks was added in Eleventy v3.0.

Add Filters.
Add Shortcodes.
Add Custom Tags.
Add JavaScript Functions
Add custom Collections and use Advanced Collection Filtering and Sorting.
Add some Plugins.

你的配置文件正在变臃肿并且难以理解了吗？你可以创建自己的插件来转移一些代码。

配置文件的默认名称

我们将查找以下配置文件：

.eleventy.js
eleventy.config.js Added in v2.0.0
eleventy.config.mjs Added in v3.0.0
eleventy.config.cjs Added in v2.0.0

第一个被找到的配置文件将被使用，其它均被忽略。

配置参数

Input 目录

用于存放模板文件的根目录。

Input Directory
Object Key	`dir.input`
Default Value	`.` (current directory)
Valid Options	Any valid directory.
Configuration API	`eleventyConfig.setInputDirectory()` Added in v3.0.0
Command Line Override	`--input`

命令行用法

# 当前目录
npx @11ty/eleventy --input=.

# 单个文件
npx @11ty/eleventy --input=README.md

# 用 glob 模式匹配的所有文件
npx @11ty/eleventy --input=*.md

# 当前目录下的某个子目录
npx @11ty/eleventy --input=views

配置

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
    input: "views"
  }
};

module.exports.config = {
  dir: {
    input: "views"
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setInputDirectory("views");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setInputDirectory("views");
};

Includes 目录

Includes 目录用于存放 Eleventy 的布局文件（layout）, include files, extends files, partials, or macros. These files will not be processed as full template files, but can be consumed by other templates.

Includes Directory
Object Key	`dir.includes`
Default	`_includes`
Valid Options	Any valid directory inside of `dir.input` (an empty string `""` is supported)
Configuration API	`eleventyConfig.setIncludesDirectory()` Added in v3.0.0
Command Line Override	None

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
		// ⚠️ This value is relative to your input directory.
    includes: "my_includes"
  }
};

module.exports.config = {
  dir: {
		// ⚠️ This value is relative to your input directory.
    includes: "my_includes"
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
	// This is relative to your input directory!
  eleventyConfig.setIncludesDirectory("my_includes");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
	// This is relative to your input directory!
  eleventyConfig.setIncludesDirectory("my_includes");
};

用于存放布局文件（layout）的目录（可选）

此配置项是可选的，但是，如果你希望将 Eleventy 的布局文件（layouts）存放在 Includes 目录之外，则此配置项非常有用。就像 Includes 目录一样，这些文件不会被当作完整的模板文件处理，但可以由其它模板文件使用。

WARNING:

This setting only applies to Eleventy's language-agnostic layouts (when defined in front matter or data files).

When using {% extends %}, Eleventy will still search the _includes directory. See this note about existing templating features.

Includes Directory
Object Key	`dir.layouts`
Default	The value in `dir.includes`
Valid Options	Any valid directory inside of `dir.input` (an empty string `""` is supported)
Configuration API	`eleventyConfig.setLayoutsDirectory()` Added in v3.0.0
Command Line Override	None

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
    // These are both relative to your input directory!
    includes: "_includes",
    layouts: "_layouts",
  }
};

module.exports.config = {
  dir: {
    // These are both relative to your input directory!
    includes: "_includes",
    layouts: "_layouts",
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
	// This is relative to your input directory!
  eleventyConfig.setLayoutsDirectory("_layouts");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
	// This is relative to your input directory!
  eleventyConfig.setLayoutsDirectory("_layouts");
};

Directory for Global Data Files

Controls the directory inside which the global data template files, available to all templates, can be found. Read more about Global Data Files.

Data Files Directory
Object Key	`dir.data`
Default	`_data`
Valid Options	Any valid directory inside of `dir.input`
Configuration API	`eleventyConfig.setDataDirectory()` Added in v3.0.0
Command Line Override	None

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
    // ⚠️ This value is relative to your input directory.
    data: "lore",
  }
};

module.exports.config = {
  dir: {
    // ⚠️ This value is relative to your input directory.
    data: "lore",
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setDataDirectory("lore");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setDataDirectory("lore");
};

Output Directory

Controls the directory inside which the finished templates will be written to.

Output Directory
Object Key	`dir.output`
Default	`_site`
Valid Options	Any string that will work as a directory name. Eleventy creates this if it doesn’t exist.
Configuration API	`eleventyConfig.setOutputDirectory()` Added in v3.0.0
Command Line Override	`--output`

Command Line

npx @11ty/eleventy --output=_site

Configuration

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
		output: "dist",
  }
};

module.exports.config = {
  dir: {
		output: "dist",
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setOutputDirectory("dist");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setOutputDirectory("dist");
};

Markdown 文件的默认预处理引擎

Markdown 文件在被转换为 HTML 之前会经过此处设置的模板引擎进行预处理。

Markdown Template Engine
Object Key	`markdownTemplateEngine`
Default	`liquid`
Valid Options	A valid template engine short name or `false`
Command Line Override	None

eleventy.config.js

ESM CommonJS

export const config = {
  markdownTemplateEngine: "njk",
};

module.exports.config = {
  markdownTemplateEngine: "njk",
};

There are many different shapes of configuration file.

HTML 文件的默认预处理引擎

HTML 文件在被转换为（更好的） HTML 之前会经过此处设置的模板引擎进行预处理。

HTML Template Engine
Object Key	`htmlTemplateEngine`
Default	`liquid`
Valid Options	A valid template engine short name or `false`
Command Line Override	None

eleventy.config.js

ESM CommonJS

export const config = {
  htmlTemplateEngine: "njk",
};

module.exports.config = {
  htmlTemplateEngine: "njk",
};

There are many different shapes of configuration file.

Template Formats

Specify which types of templates should be transformed.

Template Formats
Object Key	`templateFormats`
Default	`html,liquid,ejs,md,hbs,mustache,haml,pug,njk,11ty.js`
Valid Options	Array of template engine short names
Command Line Override	`--formats` (accepts a comma separated string)
Configuration API	`setTemplateFormats` and `addTemplateFormats`

INFO:

Case sensitivity: File extensions should be considered case insensitive, cross-platform. While macOS already behaves this way (by default), other operating systems require additional Eleventy code to enable this behavior.

Command Line

npx @11ty/eleventy --formats=html,liquid,njk

Configuration File Static Export

eleventy.config.js

ESM CommonJS

export const config = {
  templateFormats: ["html", "liquid", "njk"],
};

module.exports.config = {
  templateFormats: ["html", "liquid", "njk"],
};

There are many different shapes of configuration file.

Configuration API

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// Reset to this value
	eleventyConfig.setTemplateFormats("html,liquid,njk");

	// Additive to existing
	eleventyConfig.addTemplateFormats("pug,haml");

	// Or:
	// eleventyConfig.setTemplateFormats([ "html", "liquid", "njk" ]);
	// eleventyConfig.addTemplateFormats([ "pug", "haml" ]);
};

module.exports = function (eleventyConfig) {
	// Reset to this value
	eleventyConfig.setTemplateFormats("html,liquid,njk");

	// Additive to existing
	eleventyConfig.addTemplateFormats("pug,haml");

	// Or:
	// eleventyConfig.setTemplateFormats([ "html", "liquid", "njk" ]);
	// eleventyConfig.addTemplateFormats([ "pug", "haml" ]);
};

Enable Quiet Mode to Reduce Console Noise

In order to maximize user-friendliness to beginners, Eleventy will show each file it processes and the output file. To disable this noisy console output, use quiet mode!

Quiet Mode
Default	`false`
Valid Options	`true` or `false`
Command Line Override	`--quiet`

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	eleventyConfig.setQuietMode(true);
};

module.exports = function (eleventyConfig) {
	eleventyConfig.setQuietMode(true);
};

The command line will override any setting in configuration:

npx @11ty/eleventy --quiet

Deploy to a subdirectory with a Path Prefix

If your site lives in a different subdirectory (particularly useful with GitHub pages), use pathPrefix to specify this. When paired with the HTML <base> plugin it will transform any absolute URLs in your HTML to include this folder name and does not affect where things go in the output folder.

Path Prefix
Object Key	`pathPrefix`
Default	`/`
Valid Options	A prefix directory added to urls in HTML files
Command Line Override	`--pathprefix`

eleventy.config.js

ESM CommonJS

import { EleventyHtmlBasePlugin } from "@11ty/eleventy";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
};

export const config = {
	pathPrefix: "/eleventy-base-blog/",
}

module.exports = async function (eleventyConfig) {
	const { EleventyHtmlBasePlugin } = await import("@11ty/eleventy");

	eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
};

module.exports.config = {
	pathPrefix: "/eleventy-base-blog/",
}

Deploy to https://11ty.github.io/eleventy-base-blog/ on GitHub pages without modifying your config. This allows you to use the same code-base to deploy to either GitHub pages or Netlify, like the eleventy-base-blog project does.

npx @11ty/eleventy --pathprefix=eleventy-base-blog

Change Base File Name for Data Files

Added in v2.0.0 When using Directory Specific Data Files, looks for data files that match the current folder name. You can override this behavior to a static string with the setDataFileBaseName method.

File Suffix
Configuration API	`setDataFileBaseName`
Default	Current folder name
Valid Options	String
Command Line Override	None

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// Looks for index.json and index.11tydata.json instead of using folder names
	eleventyConfig.setDataFileBaseName("index");
};

module.exports = function (eleventyConfig) {
	// Looks for index.json and index.11tydata.json instead of using folder names
	eleventyConfig.setDataFileBaseName("index");
};

Change File Suffix for Data Files

Added in v2.0.0 When using Template and Directory Specific Data Files, to prevent file name conflicts with non-Eleventy files in the project directory, we scope these files with a unique-to-Eleventy suffix. This suffix is customizable using the setDataFileSuffixes configuration API method.

File Suffix
Configuration API	`setDataFileSuffixes`
Default	`[".11tydata", ""]`
Valid Options	Array
Command Line Override	None

For example, using ".11tydata" will search for *.11tydata.js and *.11tydata.json data files. The empty string ("") here represents a file without a suffix—and this entry only applies to *.json data files.

This feature can also be used to disable Template and Directory Data Files altogether with an empty array ([]).

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// e.g. file.json and file.11tydata.json
	eleventyConfig.setDataFileSuffixes([".11tydata", ""]);

	// e.g. file.11tydata.json
	eleventyConfig.setDataFileSuffixes([".11tydata"]);

	// No data files are used.
	eleventyConfig.setDataFileSuffixes([]);
};

module.exports = function (eleventyConfig) {
	// e.g. file.json and file.11tydata.json
	eleventyConfig.setDataFileSuffixes([".11tydata", ""]);

	// e.g. file.11tydata.json
	eleventyConfig.setDataFileSuffixes([".11tydata"]);

	// No data files are used.
	eleventyConfig.setDataFileSuffixes([]);
};

Backwards Compatibility Note (v2.0.0)

Prior to v2.0.0 this feature was exposed using a jsDataFileSuffix property in the configuration return object. When the setDataFileSuffixes method has not been used, Eleventy maintains backwards compatibility for old projects by using this property as a fallback.

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	return {
		jsDataFileSuffix: ".11tydata",
	};
};

module.exports = function (eleventyConfig) {
	return {
		jsDataFileSuffix: ".11tydata",
	};
};

Transforms

Documented moved to Transforms.

Linters

Similar to Transforms, Linters are provided to analyze a template’s output without modifying it.

Linters
Configuration API	`addLinter`
Object Key	N/A
Valid Options	Callback function
Command Line Override	None

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// Sync or async
	eleventyConfig.addLinter("linter-name", async function (content) {
		console.log(this.inputPath);
		console.log(this.outputPath);

		// Eleventy 2.0+ has full access to Eleventy’s `page` variable
		console.log(this.page.inputPath);
		console.log(this.page.outputPath);
	});
};

module.exports = function (eleventyConfig) {
	// Sync or async
	eleventyConfig.addLinter("linter-name", async function (content) {
		console.log(this.inputPath);
		console.log(this.outputPath);

		// Eleventy 2.0+ has full access to Eleventy’s `page` variable
		console.log(this.page.inputPath);
		console.log(this.page.outputPath);
	});
};

Linters Example: Use Inclusive Language

Inspired by the CSS Tricks post Words to Avoid in Educational Writing, this linter will log a warning to the console when it finds a trigger word in a markdown file.

This example has been packaged as a plugin in eleventy-plugin-inclusive-language.

Filename eleventy.config.js

export default function (eleventyConfig) {
	eleventyConfig.addLinter(
		"inclusive-language",
		function (content, inputPath, outputPath) {
			let words =
				"simply,obviously,basically,of course,clearly,just,everyone knows,however,easy".split(
					","
				);

			// Eleventy 1.0+: use this.inputPath and this.outputPath instead
			if (inputPath.endsWith(".md")) {
				for (let word of words) {
					let regexp = new RegExp("\\b(" + word + ")\\b", "gi");
					if (content.match(regexp)) {
						console.warn(
							`Inclusive Language Linter (${inputPath}) Found: ${word}`
						);
					}
				}
			}
		}
	);
};

Data Filter Selectors

A Set of lodash selectors that allow you to include data from the data cascade in the output from --to=json, --to=ndjson.

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	eleventyConfig.dataFilterSelectors.add("page");
	eleventyConfig.dataFilterSelectors.delete("page");
};

module.exports = function (eleventyConfig) {
	eleventyConfig.dataFilterSelectors.add("page");
	eleventyConfig.dataFilterSelectors.delete("page");
};

This will now include a data property in your JSON output that includes the page variable for each matching template.

TypeScript Type Definitions

This may enable some extra autocomplete features in your IDE (where supported).

eleventy.config.js

ESM CommonJS

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default function (eleventyConfig) {
	// …
};

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
module.exports = function (eleventyConfig) {
	// …
};

Related: GitHub #2091 and GitHub #3097

Removed Features

Change exception case suffix for HTML files

Feature Removal

The htmlOutputSuffix feature was removed in Eleventy 3.0. You can read about the feature on the v2 documentation. Related: GitHub #3327.

Documentation Moved to Dedicated Pages

Copy Files to Output using Passthrough File Copy

Files found (that don’t have a valid template engine) from opt-in file extensions in templateFormats will passthrough to the output directory. Read more about Passthrough Copy.

Transforms

Documented at Transforms.

配置

配置文件的默认名称

配置参数

Input 目录

命令行用法

配置

Includes 目录

用于存放布局文件（layout）的目录（可选）

Directory for Global Data Files

Output Directory

Command Line

Configuration

Markdown 文件的默认预处理引擎

HTML 文件的默认预处理引擎

Template Formats

Command Line

Configuration File Static Export

Configuration API

Enable Quiet Mode to Reduce Console Noise

Deploy to a subdirectory with a Path Prefix

Change Base File Name for Data Files

Change File Suffix for Data Files

Transforms

Linters

Data Filter Selectors

TypeScript Type Definitions

Removed Features

Change exception case suffix for HTML files

Documentation Moved to Dedicated Pages

Copy Files to Output using Passthrough File Copy

Data Deep Merge

Customize Front Matter Parsing Options

Watch JavaScript Dependencies

Add Your Own Watch Targets

Override Browsersync Server Options

Transforms

Configuration: