JavaScript front matter functions

For specific processing needs of a page, you can declare functions in the front matter section.

Post processing the template engine output

A singular use case of a front matter function see frontmatter data page for an introduction to front matter properties. is when you want to process the output of the template engine. For instance, in Nunjucks, if you want to output something that would normaly be processed as a Nunjucks block exactly what I’m doing writing this page! , you have to enclose it in a {% raw %}{% endraw %} tags pair. But it doesn’t work if you want to output only one tag of the pair either the {% raw %} or {% endraw %} tag. The shortcoming is simple: use a front matter function.

In the markdown file, the raw tags are writen by replacing the curly bracket characters ({ and }) by the square bracket characters ([ and ]) and reverted to curly brackets after the template processing with the front matter function.

By convention, I call this front matter function output__s and it takes as argument the template engine output, to process it the way I want.

11tyTips/source/matter/pages/frontmatter_function.md
Prism

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

This output__s function is automaticaly invoqued (if it exists in the front matter part of any Markdown file) at the end of the global frame template passing the template engine result previously captured by a Nunkucks {% set %} {% endset %} block.

11tyTips/source/matrix/frame.njk
Prism

{%- set _template_s %}

{{- _head_block_s | safe | head_end( data_o ) -}}{# head process #}
{{- _body_block_s | safe | body_end( data_o ) -}}{# body process #}

{% endset -%}

{%- if output__s %}{% set _template_s = output__s( _template_s ) %}{% endif -%}

However, you are not at all constrained to process the output of the template engine globally: you can process only a part of it if you see fit as well as you can use multiple processing functions and multiple invocations. It’s just a question of enclosing the output to process in a set block.

Comments

Home

Github

Twitter

RSS

All tips

  1. ...1 Site structure Site structure and directories
  2. ...2 Cloning 11tyTips site Start bloging with a clean site structure
  3. ...3 Source tree A bird's-eye view of the site
  4. ...4 Eleventy settings The main components of an Eleventy site build
  5. ...5 Global settings Global data for frequent use
  6. ...6 Styles guide Styles listing
  7. ...7 Names guide How variable identifiers are forged
  8. ...8 Front matter Accessing front matter data in Markdown and templates
  9. ...9 Shortcodes Processing Markdown content with shortcodes
  10. ..10 Minifying styles and script Generate minified CSS and JavaScript as inline blocks or files
  11. ..11 Using shorthands Use shorthand notation to simplify and clean your markdown
  12. ..12 Front matter post processing function A front matter function can be invoqued to modify the global or partial output of the template engine
  13. ..13 Processing before and after the template engine Add any kind of processing before and after your templating engine has done its work
  14. ..14 Variables scope and templates inheritance Take care of scope rules when using template inheritance
  15. ..15 Creating a menu A smart menu of posts is hard to create
  16. ..16 CSS mixins Filters ala SASS
  17. ..17 Light(ning) images How to slim overweight images