Including template parts from index.html (that is, files outside the _layouts folder)

637 views Asked by At

How can I include template parts (head.html, footer.html, ...) into the index.html file (or from any other files outside the _layout folder) without using the layout engine. In short, I'd like to replicate the basic use of PHP include.

Using the tag {% include head.html %} (docs) I get on the front-end the tag printed as text.

1

There are 1 answers

2
matrixanomaly On

You need to include the YAML Frontmatter for each file (outside the _includes and _layouts folder) you want processed by the Liquid templating engine.

This means that, in order for liquid tags like {% include head.html %} and {{ post.content }} to be processed, one must add 3 dashes to the top of the file, newline, and 3 more dashes.

Example in index.html where you have {% include %} or {{ liquid_tags }}

---
---
<html>
  {% include head.html %}
</html>

Will allow Jekyll to properly parse the liquid tags and insert head.html (which must be located in the _includes directory for the include to work) Or else you will have to use the include_relative tag See this link to the docs, which you've linked in your question

An empty YAML frontmatter is allowed for Jekyll, it simply indicates that you want the file to be processed by Liquid and Markdown processed.

Without any frontmatter (i.e there are no 3 dashes, newline, 3 dashes) in the file, the file is simply copied verbatim (just like any other static files, e.g JavaScript, CSS) to the final output at the _site folder. This holds true when you want to use Jekyll's built in SASS converter as well. Refer to the documentation here, and also note the warning about how Jekyll processes all Asset files as highlighted there.

All that being said, if you have a particular layout that you will repeatedly use it is better to use the layout engine to reduce duplicate code, but I understand that it is better to avoid additional files in files in _layout if they are used once only (like for a special index.html file)