Customize Front Matter Parsing Jump to heading
Eleventy uses the gray-matter
npm package for parsing front matter. gray-matter
allows additional options that aren’t available by default in Eleventy.
Check out the full list of available gray-matter
options. By default, Eleventy uses gray-matter
’s default options.
module.exports = function(eleventyConfig) {
eleventyConfig.setFrontMatterParsingOptions({
/* … */
});
};
Example: Parse excerpts from content Jump to heading
module.exports = function(eleventyConfig) {
eleventyConfig.setFrontMatterParsingOptions({
excerpt: true,
// Optional, default is "---"
excerpt_separator: "<!-- excerpt -->"
});
};
Now you can do things like this:
---
title: My page title
---
This is the start of my content and this will be shown as the excerpt.
<!-- excerpt -->
This is a continuation of my content…
Your template’s content will include the excerpt but remove the separator:
This is the start of my content and this will be shown as the excerpt.
This is a continuation of my content…
page.excerpt
now holds This is the start of my content and this will be shown as the excerpt.
Changing where your excerpt is stored Jump to heading
If you don’t want to use page.excerpt
to store your excerpt value, then use your own excerpt_alias
option (any valid path to Lodash Set will work) like so:
module.exports = function(eleventyConfig) {
eleventyConfig.setFrontMatterParsingOptions({
excerpt: true,
// Eleventy custom option
// The variable where the excerpt will be stored.
excerpt_alias: 'my_custom_excerpt'
});
};
Using excerpt_alias: 'my_custom_excerpt'
means that the excerpt will be available in your templates as the my_custom_excerpt
variable instead of page.excerpt
.
Example: using TOML for front matter parsing Jump to heading
While Eleventy does include support for JSON, YAML, and JS front matter out of the box, you may want to add additional formats too.
// Don’t forget to `npm install @iarna/toml`
const toml = require("@iarna/toml");
module.exports = function(eleventyConfig) {
eleventyConfig.setFrontMatterParsingOptions({
engines: {
toml: toml.parse.bind(toml)
}
});
};
For more information, read this example on the gray-matter
documentation.
Now you can use TOML in your front matter like this:
---toml
title = "My page title using TOML"
---
<!doctype html>
<html>
…