From a2e3de580a13a9d25f9eca4e6a8b0a1b6d47a0a0 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 24 Sep 2024 16:28:30 -0500 Subject: [PATCH] ESM docs for front matter data https://github.com/11ty/eleventy/issues/836 and https://github.com/11ty/eleventy/issues/2819 --- .../snippets/cascade/computed-more.njk | 44 ++++++ .../snippets/cascade/computed-nav.njk | 31 ++++ .../snippets/cascade/computed-ref.njk | 50 +++++++ src/_includes/snippets/cascade/computed.njk | 35 +++++ src/_includes/snippets/cascade/deepmerge.njk | 33 +++++ .../snippets/frontmatter/default.njk | 29 ++++ .../snippets/frontmatter/excerpts.njk | 33 +++++ .../snippets/frontmatter/excerptsloc.njk | 35 +++++ .../snippets/frontmatter/options.njk | 29 ++++ src/_includes/snippets/frontmatter/toml.njk | 39 +++++ src/docs/data-computed.md | 57 +------- src/docs/data-deep-merge.md | 12 +- src/docs/data-frontmatter-customize.md | 133 ++---------------- src/docs/data-frontmatter.md | 88 ++++++++---- 14 files changed, 434 insertions(+), 214 deletions(-) create mode 100644 src/_includes/snippets/cascade/computed-more.njk create mode 100644 src/_includes/snippets/cascade/computed-nav.njk create mode 100644 src/_includes/snippets/cascade/computed-ref.njk create mode 100644 src/_includes/snippets/cascade/computed.njk create mode 100644 src/_includes/snippets/cascade/deepmerge.njk create mode 100644 src/_includes/snippets/frontmatter/default.njk create mode 100644 src/_includes/snippets/frontmatter/excerpts.njk create mode 100644 src/_includes/snippets/frontmatter/excerptsloc.njk create mode 100644 src/_includes/snippets/frontmatter/options.njk create mode 100644 src/_includes/snippets/frontmatter/toml.njk diff --git a/src/_includes/snippets/cascade/computed-more.njk b/src/_includes/snippets/cascade/computed-more.njk new file mode 100644 index 0000000000..84ec78998c --- /dev/null +++ b/src/_includes/snippets/cascade/computed-more.njk @@ -0,0 +1,44 @@ +{%- set tabid = "computed-more" %} + + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default { + eleventyComputed: { + myTemplateString: "This is assumed to be a template string!", + myString: (data) => "This is a string!", + myFunction: (data) => `This is a string using ${data.someValue}.`, + myAsyncFunction: async (data) => await someAsyncThing(), + myPromise: (data) => { + return new Promise((resolve) => { + setTimeout(() => resolve("100ms DELAYED HELLO"), 100); + }); + }, + }, +}; +``` + +
+
+ +```js +module.exports = { + eleventyComputed: { + myTemplateString: "This is assumed to be a template string!", + myString: (data) => "This is a string!", + myFunction: (data) => `This is a string using ${data.someValue}.`, + myAsyncFunction: async (data) => await someAsyncThing(), + myPromise: (data) => { + return new Promise((resolve) => { + setTimeout(() => resolve("100ms DELAYED HELLO"), 100); + }); + }, + }, +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/cascade/computed-nav.njk b/src/_includes/snippets/cascade/computed-nav.njk new file mode 100644 index 0000000000..50a6c56240 --- /dev/null +++ b/src/_includes/snippets/cascade/computed-nav.njk @@ -0,0 +1,31 @@ +{%- set tabid = "computed-nav" %} +
_data/eleventyComputed.js
+ + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default { + eleventyNavigation: { + key: (data) => data.title, + parent: (data) => data.parent, + }, +}; +``` + +
+
+ +```js +module.exports = { + eleventyNavigation: { + key: (data) => data.title, + parent: (data) => data.parent, + }, +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/cascade/computed-ref.njk b/src/_includes/snippets/cascade/computed-ref.njk new file mode 100644 index 0000000000..ceedace0d6 --- /dev/null +++ b/src/_includes/snippets/cascade/computed-ref.njk @@ -0,0 +1,50 @@ +{%- set tabid = "computed-ref" %} + + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default { + eleventyComputed: { + myValue: () => "Hi", + myOtherValue: () => "Bye", + usesAllTheThings: (data) => { + // We detect this as a declared dependency + data.myValue; + // You can use as many as you want. + data.myOtherValue; + // You could use any valid JS syntax to access them. + [data.myValue, data.myOtherValue]; + + return `How are you?`; + }, + }, +}; +``` + +
+
+ +```js +module.exports = { + eleventyComputed: { + myValue: () => "Hi", + myOtherValue: () => "Bye", + usesAllTheThings: (data) => { + // We detect this as a declared dependency + data.myValue; + // You can use as many as you want. + data.myOtherValue; + // You could use any valid JS syntax to access them. + [data.myValue, data.myOtherValue]; + + return `How are you?`; + }, + }, +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/cascade/computed.njk b/src/_includes/snippets/cascade/computed.njk new file mode 100644 index 0000000000..a16b914f82 --- /dev/null +++ b/src/_includes/snippets/cascade/computed.njk @@ -0,0 +1,35 @@ +{%- set tabid = "computed" %} +
posts/posts.11tydata.js
+ + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default { + eleventyComputed: { + eleventyNavigation: { + key: (data) => data.title, + parent: (data) => data.parent, + }, + }, +}; +``` + +
+
+ +```js +module.exports = { + eleventyComputed: { + eleventyNavigation: { + key: (data) => data.title, + parent: (data) => data.parent, + }, + }, +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/cascade/deepmerge.njk b/src/_includes/snippets/cascade/deepmerge.njk new file mode 100644 index 0000000000..a7aba0bee5 --- /dev/null +++ b/src/_includes/snippets/cascade/deepmerge.njk @@ -0,0 +1,33 @@ +{%- set tabid = "deepmerge" %} +
eleventy.config.js
+ + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default function (eleventyConfig) { + // defaults to true in 1.0, use false to opt-out + eleventyConfig.setDataDeepMerge(false); + + // requires opt-in for 0.x + eleventyConfig.setDataDeepMerge(true); +}; +``` + +
+
+ +```js +module.exports = function (eleventyConfig) { + // defaults to true in 1.0, use false to opt-out + eleventyConfig.setDataDeepMerge(false); + + // requires opt-in for 0.x + eleventyConfig.setDataDeepMerge(true); +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/frontmatter/default.njk b/src/_includes/snippets/frontmatter/default.njk new file mode 100644 index 0000000000..17bf5c0d59 --- /dev/null +++ b/src/_includes/snippets/frontmatter/default.njk @@ -0,0 +1,29 @@ +{%- set tabid = "default" %} +
eleventy.config.js
+ + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + language: "js", // default is "yaml" + }); +}; +``` + +
+
+ +```js +module.exports = function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + language: "js", // default is "yaml" + }); +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/frontmatter/excerpts.njk b/src/_includes/snippets/frontmatter/excerpts.njk new file mode 100644 index 0000000000..53d6ebbf2a --- /dev/null +++ b/src/_includes/snippets/frontmatter/excerpts.njk @@ -0,0 +1,33 @@ +{%- set tabid = "excerpts" %} +
eleventy.config.js
+ + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + excerpt: true, + // Optional, default is "---" + excerpt_separator: "", + }); +}; +``` + +
+
+ +```js +module.exports = function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + excerpt: true, + // Optional, default is "---" + excerpt_separator: "", + }); +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/frontmatter/excerptsloc.njk b/src/_includes/snippets/frontmatter/excerptsloc.njk new file mode 100644 index 0000000000..5e7a2700eb --- /dev/null +++ b/src/_includes/snippets/frontmatter/excerptsloc.njk @@ -0,0 +1,35 @@ +{%- set tabid = "excerptsloc" %} +
eleventy.config.js
+ + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + excerpt: true, + // Eleventy custom option + // The variable where the excerpt will be stored. + excerpt_alias: "my_custom_excerpt", + }); +}; +``` + +
+
+ +```js +module.exports = function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + excerpt: true, + // Eleventy custom option + // The variable where the excerpt will be stored. + excerpt_alias: "my_custom_excerpt", + }); +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/frontmatter/options.njk b/src/_includes/snippets/frontmatter/options.njk new file mode 100644 index 0000000000..07659c783a --- /dev/null +++ b/src/_includes/snippets/frontmatter/options.njk @@ -0,0 +1,29 @@ +{%- set tabid = "options" %} +
eleventy.config.js
+ + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +export default function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + /* … */ + }); +}; +``` + +
+
+ +```js +module.exports = function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + /* … */ + }); +}; +``` + +
+ + \ No newline at end of file diff --git a/src/_includes/snippets/frontmatter/toml.njk b/src/_includes/snippets/frontmatter/toml.njk new file mode 100644 index 0000000000..fa22675206 --- /dev/null +++ b/src/_includes/snippets/frontmatter/toml.njk @@ -0,0 +1,39 @@ +{%- set tabid = "toml" %} +
eleventy.config.js
+ + + {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %} +
+ +```js +// Don’t forget to `npm install @iarna/toml` +import toml from "@iarna/toml"; + +export default function (eleventyConfig) { + eleventyConfig.setFrontMatterParsingOptions({ + engines: { + toml: toml.parse.bind(toml), + }, + }); +}; +``` + +
+
+ +```js +// 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), + }, + }); +}; +``` + +
+ + \ No newline at end of file diff --git a/src/docs/data-computed.md b/src/docs/data-computed.md index cd04459898..300352343d 100644 --- a/src/docs/data-computed.md +++ b/src/docs/data-computed.md @@ -32,18 +32,7 @@ If this file is generated by a Content Management System (like [Netlify CMS](htt Instead, I created this Data Directory File using `eleventyComputed`: -{% codetitle "posts/posts.11tydata.js" %} - -```js -module.exports = { - eleventyComputed: { - eleventyNavigation: { - key: (data) => data.title, - parent: (data) => data.parent, - }, - }, -}; -``` +{% include "snippets/cascade/computed.njk" %} {% callout "info" %}If you want to use a JavaScript function for your eleventyComputed properties, you must use either JavaScript front matter or a JavaScript data file (template, directory, or global). YAML and JSON do not support JavaScript functions.{% endcallout %} @@ -64,14 +53,7 @@ The resulting data for each `posts/*.md` file when processed by Eleventy has the If I wanted this data to be computed for all files, I could instead create the following `eleventyComputed.js` global data file. -```js -module.exports = { - eleventyNavigation: { - key: (data) => data.title, - parent: (data) => data.parent, - }, -}; -``` +{% include "snippets/cascade/computed-nav.njk" %} ## Using JavaScript @@ -79,21 +61,7 @@ Use any arbitrary JavaScript for an `eleventyComputed` property. Note that JavaS Here’s a bunch of examples: -```js -module.exports = { - eleventyComputed: { - myTemplateString: "This is assumed to be a template string!", - myString: (data) => "This is a string!", - myFunction: (data) => `This is a string using ${data.someValue}.`, - myAsyncFunction: async (data) => await someAsyncThing(), - myPromise: (data) => { - return new Promise((resolve) => { - setTimeout(() => resolve("100ms DELAYED HELLO"), 100); - }); - }, - }, -}; -``` +{% include "snippets/cascade/computed-more.njk" %} ## Using a Template String @@ -168,23 +136,6 @@ eleventyComputed: We do try our best to automatically detect dependencies between `eleventyComputed` keys, but it isn’t always 100% accurate—especially if you include conditional logic that only uses another Computed Data key inside of a conditional block. To workaround this issue, you can always declare your dependencies inside of your callback so that it resolves correctly. To do so, just access the variables that your callback uses in the callback function. -```js -module.exports = { - eleventyComputed: { - myValue: () => "Hi", - myOtherValue: () => "Bye", - usesAllTheThings: (data) => { - // We detect this as a declared dependency - data.myValue; - // You can use as many as you want. - data.myOtherValue; - // You could use any valid JS syntax to access them. - [data.myValue, data.myOtherValue]; - - return `How are you?`; - }, - }, -}; -``` +{% include "snippets/cascade/computed-ref.njk" %} If you suspect Eleventy has the Computed Data order wrong—you can double check what variables Eleventy detects inside of a Computed Data function in the [debug output](/docs/debugging/). diff --git a/src/docs/data-deep-merge.md b/src/docs/data-deep-merge.md index 2504976983..f0a7affed8 100644 --- a/src/docs/data-deep-merge.md +++ b/src/docs/data-deep-merge.md @@ -13,17 +13,7 @@ Use a full deep merge when combining the Data Cascade. This will use something s Read more at [Issue #147](https://github.com/11ty/eleventy/issues/147). As of Eleventy 1.0 this defaults to enabled (but API still exists for opt-out). -{% codetitle ".eleventy.js" %} - -```js -module.exports = function (eleventyConfig) { - // defaults to true in 1.0, use false to opt-out - eleventyConfig.setDataDeepMerge(false); - - // requires opt-in for 0.x - eleventyConfig.setDataDeepMerge(true); -}; -``` +{% include "snippets/cascade/deepmerge.njk" %} Note that all data stored in the `pagination` variable is exempted from this behavior (we don’t want `pagination.items` to be merged together). diff --git a/src/docs/data-frontmatter-customize.md b/src/docs/data-frontmatter-customize.md index 766f97457f..c033a54f08 100644 --- a/src/docs/data-frontmatter-customize.md +++ b/src/docs/data-frontmatter-customize.md @@ -17,113 +17,13 @@ Check out the [full list of available `gray-matter` options](https://www.npmjs.c - [**Related**: Change the default Front Matter syntax project-wide](/docs/data-frontmatter/#change-the-default-format-project-wide) -{% codetitle ".eleventy.js" %} - -```js -module.exports = function (eleventyConfig) { - eleventyConfig.setFrontMatterParsingOptions({ - /* … */ - }); -}; -``` - -### Example: use JavaScript in your front matter {% addedin "0.9.0" %} - -While the existing `js` front matter type uses an object literal, this example makes use of any arbitrary JavaScript and exports all of the top level variables and functions. - -- Makes use of the [`node-retrieve-globals` package](https://github.com/zachleat/node-retrieve-globals/). -- Check out the [`demo-eleventy-js-front-matter`](https://github.com/11ty/demo-eleventy-js-front-matter) repo for a full demo of this in action. - -Here’s what this might look in a Nunjucks template: - -{% codetitle "page.njk" %} - -{% raw %} - -```js ----javascript -const myString = "Hi"; - -// export a function -function myFunction() {} ---- - -
{{ myString }}
-
{{ myFunction() }}
-``` - -{% endraw %} - -
-More advanced usage options - -{% raw %} - -```js ----javascript -// async-friendly -const myAsyncString = await Promise.resolve("HELLO FROM THE OTHER SIDE"); - -// export via destructuring assignment -const { myKey } = { myKey: "myValue" }; -const [ first, second ] = [ "first", "second" ]; - -// export via dynamic import -const { noop } = await import("@zachleat/noop"); - -// access Node.js globals like console.log -console.log({ noop }); ---- - -``` - -{% endraw %} - -
- -To enable this, use the following configuration: - -{% codetitle ".eleventy.js" %} - -```js -const { RetrieveGlobals } = require("node-retrieve-globals"); - -module.exports = function (eleventyConfig) { - eleventyConfig.setFrontMatterParsingOptions({ - engines: { - javascript: function (frontMatterCode) { - let vm = new RetrieveGlobals(frontMatterCode); - - // Do you want to pass in your own data here? - let data = {}; - return vm.getGlobalContext(data, { - reuseGlobal: true, - dynamicImport: true, - }); - }, - }, - }); -}; -``` +{% include "snippets/frontmatter/options.njk" %} ### Example: using TOML for front matter parsing {% addedin "0.9.0" %} While Eleventy does include support for [JSON, YAML, and JS front matter out of the box](/docs/data-frontmatter/#alternative-front-matter-formats), you may want to add additional formats too. -{% codetitle ".eleventy.js" %} - -```js -// 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), - }, - }); -}; -``` +{% include "snippets/frontmatter/toml.njk" %} For more information, read [this example on the `gray-matter` documentation](https://www.npmjs.com/package/gray-matter#optionsengines). @@ -141,19 +41,13 @@ title = "My page title using TOML" … ``` -### Example: Parse excerpts from content {% addedin "0.9.0" %} +### Example: use JavaScript in your front matter {% addedin "0.9.0" %} -{% codetitle ".eleventy.js" %} +This section has moved to the [Frontmatter Documentation](/docs/data-frontmatter.md#javascript-front-matter). -```js -module.exports = function (eleventyConfig) { - eleventyConfig.setFrontMatterParsingOptions({ - excerpt: true, - // Optional, default is "---" - excerpt_separator: "", - }); -}; -``` +### Example: Parse excerpts from content {% addedin "0.9.0" %} + +{% include "snippets/frontmatter/excerpts.njk" %} Now you can do things like this: @@ -186,17 +80,6 @@ This is a continuation of my content… 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](https://lodash.com/docs/4.17.15#set)) like so: -{% codetitle ".eleventy.js" %} - -```js -module.exports = function (eleventyConfig) { - eleventyConfig.setFrontMatterParsingOptions({ - excerpt: true, - // Eleventy custom option - // The variable where the excerpt will be stored. - excerpt_alias: "my_custom_excerpt", - }); -}; -``` +{% include "snippets/frontmatter/excerptsloc.njk" %} 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`. diff --git a/src/docs/data-frontmatter.md b/src/docs/data-frontmatter.md index 6a76b10565..093d7ecfd7 100644 --- a/src/docs/data-frontmatter.md +++ b/src/docs/data-frontmatter.md @@ -39,30 +39,15 @@ Eleventy allows many options to control how your template works. The most popula {% include "datasources.md" %} -## Alternative Front Matter Formats +## Front Matter Formats -Eleventy uses the [`gray-matter` package](https://github.com/jonschlinkert/gray-matter) for front matter processing. `gray-matter` (and thus, Eleventy) includes support out of the box for `yaml`, `json`, and `js` for JavaScript object literals in front matter (some [aliases](https://github.com/jonschlinkert/gray-matter/blob/ce67a86dba419381db0dd01cc84e2d30a1d1e6a5/lib/engine.js) are also included). +Eleventy uses the [`gray-matter` package](https://github.com/jonschlinkert/gray-matter) for front matter processing. `gray-matter` (and thus, Eleventy) includes support out of the box for `yaml`, `json`, and `js` front matter (with some [aliases](https://github.com/jonschlinkert/gray-matter/blob/ce67a86dba419381db0dd01cc84e2d30a1d1e6a5/lib/engine.js) also included). ### Change the default format project-wide {% addedin "0.9.0" %} By default, `yaml` is used when a front matter syntax is not explicitly specified. You can change this project-wide with: -{% codetitle ".eleventy.js" %} - -```js -module.exports = function (eleventyConfig) { - eleventyConfig.setFrontMatterParsingOptions({ - language: "json", // default is "yaml" - }); -}; -``` - -### Add your own format {% addedin "0.9.0" %} - -You can [customize Front Matter Parsing](/docs/data-frontmatter-customize/) in Eleventy to add your own custom format, and we provide examples for: - -- [JavaScript in front matter](/docs/data-frontmatter-customize/#example-use-javascript-in-your-front-matter). -- [TOML in front matter](/docs/data-frontmatter-customize/#example-using-toml-for-front-matter-parsing). +{% include "snippets/frontmatter/default.njk" %} ### JSON Front Matter @@ -79,16 +64,64 @@ You can [customize Front Matter Parsing](/docs/data-frontmatter-customize/) in E ``` -### JavaScript Object Front Matter +### JavaScript Front Matter -This method makes use of a JavaScript Object in front matter. You can also easily extend Eleventy to add [arbitrary JavaScript in your front matter too](/docs/data-frontmatter-customize/#example-use-javascript-in-your-front-matter)! - -_Warning: while Nunjucks and Liquid syntax are similar, the following example will **not** work in Liquid. Liquid does not allow function execution in output (e.g. `{% raw %}{{ currentDate() }}{% endraw %}`)._ +{% addedin "3.0.0-alpha.18" %}You can use any arbitrary JavaScript here and we’ll export all of the top level variables and functions to your template. This uses the [`node-retrieve-globals` library](https://github.com/zachleat/node-retrieve-globals). {% codetitle "Nunjucks", "Syntax" %} {% raw %} +```html +---js +const title = "My page title"; +function currentDate() { + return (new Date()).toLocaleString(); +} +--- + +

{{ title }}

+

Published on {{ currentDate() }}

+``` +{% endraw %} + +_Warning: while Nunjucks and Liquid syntax are similar, the above example will **not** work in Liquid. Liquid does not allow function execution in output (e.g. `{% raw %}{{ currentDate() }}{% endraw %}`)._ + + +
+More Advanced Examples of JavaScript Front Matter + +{% raw %} + +```js +---js +// async-friendly +const myAsyncString = await Promise.resolve("HELLO FROM THE OTHER SIDE"); + +// export via destructuring assignment +const { myKey } = { myKey: "myValue" }; +const [ first, second ] = [ "first", "second" ]; + +// export via dynamic import +const { noop } = await import("@zachleat/noop"); + +// access Node.js globals like console.log +console.log({ noop }); +--- + +``` + +{% endraw %} + +
+ +#### JavaScript Object Front Matter + +In previous versions of Eleventy, `js` front matter was required to use a JavaScript object notation. This method is still supported moving forward. + +{% codetitle "Nunjucks", "Syntax" %} + +{% raw %} ```html ---js { @@ -103,12 +136,17 @@ _Warning: while Nunjucks and Liquid syntax are similar, the following example wi

{{ title }}

Published on {{ currentDate() }}

``` - {% endraw %} -## Advanced: Customize Front Matter Parsing {% addedin "0.9.0" %} +_Warning: while Nunjucks and Liquid syntax are similar, the above example will **not** work in Liquid. Liquid does not allow function execution in output (e.g. `{% raw %}{{ currentDate() }}{% endraw %}`)._ -Configure [front matter for customized excerpts, TOML parsing, and more](/docs/data-frontmatter-customize/). +### Add your own format {% addedin "0.9.0" %} + +You can [customize Front Matter Parsing](/docs/data-frontmatter-customize/) in Eleventy to add your own custom format, and we provide examples for: + +- [JavaScript in front matter](/docs/data-frontmatter-customize/#example-use-javascript-in-your-front-matter). +- [TOML in front matter](/docs/data-frontmatter-customize/#example-using-toml-for-front-matter-parsing). +- You can also configure [front matter for customized excerpts](/docs/data-frontmatter-customize/). ## From the Community