Front matter data

Front matter, the initial section of each Markdown file, offers much more than you think.

Front matter is all you need

Each Markdown file has its own data, declared at the begining of the file in the front matter part 11tyTips uses a JavaScript Object for the front matter. , a few ones being mandatory no so strickly speaking! For instance, you’re not requested to use a Date, but it’s more than useful if you want to sort your posts by date. , others being used to supply some page specific content or variables have a look at Eleventy#user-defined-front-matter-customizations for a list of Eleventy properties usable in front matter. .

Mandatory data

• Date the Date property is mainly used to sort the posts but also to be shown it on the page.
• Layout this is the template used to render the page.
• Permalink this is the name of the output file: HTML, or any other format (e.g. minified JavaScript).
• Tags the collection(s) including the output file.

Specific data

• Menu index Tip pages are sorted using this index, instead of the creation date.
• Title used by 11tyTips to identify the page in the browser tab.
• Subtitle Used by 11tyTips to describe the page content in the Tips list menu.
• Abstract actually not used by 11tyTips, but could be…
• Author useful if there are multiple authors for the posts of the site.

---js
{
  date:      `2019-12-12`,
  layout:    `frame.njk`,
  permalink: `tips/frontmatter_data.html`,
  tags:      [ `tip` ],
  eleventyExcludeFromCollections: false,


  rank_n:     8,
  title_s:    `Front matter`,
  subtitle_s: `Front matter data howto`,
  abstract_s: `Accessing front matter data in Markdown and templates`,
  author_s:   `Octoxalis`,


  output__s: output_s => output_s.replace( /\[% raw %\]/g, '' ).replace( /\[% endraw %\]/g, '' ),
}
---

To access any property declared in the front matter it has to be enclosed in double parenthesis {{ ... }} 11tyTips uses Nunjucks. Using other templating systems, this is a bit different. . For instance, the abstract_s property in the front matter is injected in this page with the following code: {{ abstract_s }} and renders as:
Accessing front matter data in Markdown and templates.

Function properties

If you use JavaScript for the front matter a very good idea because it gives you the full power of the language to process your content. and Nunjucks as templating system, you can declare functions as properties see Eleventy#javascript-front-matter documentation page. . Usually, apart very specific cases, it’s much more easy to declare content processing functions in a module located inside the data directory because it will be accessible from any Markdown content or any template and with the possibility to require any Node package that could be useful. .

However, this page front matter is such a case: the output__s front matter last property is a conventional way to execute a function after processing the entire page see also frontmatter function page. .

Front matter properties and global data functions

11tyTips is full of Eleventy documentation links: we need official references! Some of these references can appear in different pages and therefore they are potential global data. 11tyTips source has an F_o.js file inside its matter/assets/scripts/js/lib directory where a eleventyUrl__s function computes the link to any Eleventy docs page using an acronym of the page and anchor.

eleventyUrl__s: key_s =>
{
  const path_s = U_o[ `ELEVENTY_${key_s}` ]
  const anchor_n = path_s.indexOf( '#')
  if ( anchor_n === -1 )    //: return a link to 11ty.io
  {
    console.log( `ALERT! no anchor found in path: ${path_s}` )
    const ref_n = U_o.ELEVENTY_s.indexOf( ':' )
    return { ref_s: U_o.ELEVENTY_s.substring( 0, ref_n ), link_s: U_o.ELEVENTY_s }
  }
  const anchor_s = path_s.substring( anchor_n )
  const anchorLink_s = U_o.ELEVENTY_s.replace( ']', `${anchor_s}]`) + path_s
  return { ref_s: anchorLink_s.substring( 0, anchorLink_s.indexOf( ':') ), link_s: anchorLink_s }
}

The acronyms usually three characters are enough to get a unique identifier:
JFM_s for #javascript-front-matter,
UDF_s for #user-defined-front-matter-customizations. , used as keys, could be set inside each page front matter and used as a key by the function to expand the actual link reference.

Hence to get the reference and the link of a reference-style link is just as easy as:

{{ F_o.eleventyUrl__s( 'JFM_s' ).ref_s }}
{{ F_o.eleventyUrl__s( 'JFM_s' ).link_s }}

Actually, most of Eleventy link keys are gathered in the U_o.js global data file and not in the front matter!

Even shorter

But we can do more, using Nunjucks {% set %} tag in each Markdown file referencing an Eleventy documentation page, then call the link function as in the following examples:

{{ _11ty__s( 'JFM_s' ).link_s }} Reference-style link located in Links section, after the Aliases section.

{{ _11ty__s( 'JFM_s' ).ref_s }} reference inside content.

[comment]: # (======== Aliases ========)
{% set _11ty__s = F_o.eleventyUrl__s %}


{{ _11ty__s( 'JFM_s' ).link_s }}
{{ _11ty__s( 'UDF_s' ).link_s }}


[comment]: # (======== Post ========)