Processing template output

It can be useful to process the final result of the templating work or prepare it by some pre processing.

Wrap the page your own way

All templating engines have limits and Nunjucks which is used here by 11tyTips has its own. But you can easily go your way beyond those limits to process the output of the templating engine just before everything is engraved as a static HTML page. For instance you may want to overcome the encoding output of the engine and make some modifications see also the frontmatter data tip for an example of post processing the template engine output without a global filter, but using a front matter specific callback function. .

Once again this is acquired thru the use of a filter and an awesome help of the Nunjucks {% set %} block. Every global template i.e. a template which produces a full html page. has a starting block in the following listing it’s the ante process comment line. using a filter whose concern is to initialize some variables needed by the page which is about to be processed by the templating engine it can be, for instance, a data base access (server-side), or some checking relative to the pages that have been previously processed, etc. .

Similarly, there is an ending block whose filter processes the output of the template engine, once all the template work has been done, allowing you to further process the output. in the following listing it’s the post process comment line.

11tyTips/source/matrix/frame.njk

Prism


{% set data_o = D_o.data__o( permalink, collections.all ) %}
{{- '' | template_start( data_o ) -}}{# ante process #}

{%- set _head_block_s %}
{% include "parts/blocks/_head_.njk" %}
{% endset -%}

{%- set _body_block_s %}
{% include "parts/blocks/_body_.njk" %}
{% endset -%}

{%- set _template_s %}
<!doctype html><html lang="{{A_o.LANGUAGE_s}}">
{{- _head_block_s | safe | head_end( data_o ) -}}{# head process #}
{{- _body_block_s | safe | body_end( data_o ) -}}{# body process #}
</html>
{% endset -%}

{%- if output__s %}{% set _template_s = output__s( _template_s ) %}{% endif -%}
{{- _template_s | safe | template_end( data_o ) | minify_html -}}{# post process #}

Processing at build start or end

The filters invoqued as previously described are also used to make any specific processing required just before the first template is to be processed by Eleventy and just after the last template has been processed. It’s kind of a hook, as can be seen is some frameworks, inside Eleventy. This ante or post processing uses only a directory listing to count the number of template files to be processed and invoque the starting function if no one has already been processed or the ending function if the number of files processed is equivalent to the listing count this simple algorithm is based on the fact that all posts are in a single directory, without any subdirectories (otherwise the algorithm would have to walk thru all subdirectories), and that this flat directory contains only Markdown files. .

11tyTips/source/make/lib/template_process.js

Prism


const STRING_o = require( './string.js' )

let files_a       = null
let count_n       = 0
let current_n     = 0

void function ()
{
  const MD_DIR_s = './matter/pages/'    //: all Mardown files
  const DEPTH_n  = 0                    //: ...are located at the root level of MD_DIR_s
  files_a = require( 'klaw-sync' )( MD_DIR_s, { nodir: true, depthLimit: DEPTH_n } )
  if ( files_a ) count_n = files_a.length
} ()

const buildStart__v = data_o =>
{
  console.log( `${count_n} Markdown files to process` )
}

const buildEnd__v = data_o =>
{
  //... what else?
}

const templateStart__s = ( input_s, data_o ) =>
{
  let start_s = input_s
  //... what else?
  return start_s
}

const templateEnd__s = ( input_s, data_o ) =>
{
  let end_s = input_s
  //... what else?
  return end_s
}

const headEnd__s = ( input_s, data_o ) =>
{
  let head_s = input_s
  //... what else?
  return head_s
}

const bodyEnd__s = ( input_s, data_o ) =>
{
  let body_s = input_s
  //... what else?
  return body_s
}

module.exports =
{
  start__s: ( input_s, data_o ) =>
  {
    if ( !files_a ) return input_s
    if ( current_n === 0 ) buildStart__v( data_o )
    let start_s = templateStart__s( input_s, data_o )
    return start_s
  },

  head__s: ( input_s, data_o ) => headEnd__s( input_s, data_o ),

  body__s: ( input_s, data_o ) => bodyEnd__s( input_s, data_o ),

  end__s: ( input_s, data_o ) =>
  {
    ++current_n
    let end_s = templateEnd__s( input_s, data_o )
    if ( current_n === count_n ) buildEnd__v( data_o )
    return end_s
  },
}

Any kind of processing can be done inside the starting and ending functions: in 11tyTips, the starting function output the number of Markdown files to be processed and the ending function create the file (menu.html) listing the pages referenced as links in the menu of the site.

To have full control on the site data, these functions take as argument an Object gathering all or a selection of made according to the EXPORT_a Array declared in the F_o.js global data file all declared global data including the page Object used for pagination, all the collection Objects and even global properties not usually accessible: content and layoutContent… . These data are retrieve by a simple set tag at the begining of the base template:

11tyTips/source/matrix/frame.njk

Prism


{% set data_o = F_o.data__o( permalink, collections.all ) %}

and are used by all the template processing functions the data_o argument .

Comments

Processing template output

Wrap the page your own way

11tyTips/source/matrix/frame.njk

Prism

Processing at build start or end

11tyTips/source/make/lib/template_process.js

Prism

11tyTips/source/matrix/frame.njk

Prism

Comments

Home

→ Github

→ Twitter

→ RSS

All tips