Passing post variables to includes in Jekyll

How to pass liquid variables defined in your post or pages layout into your site includes.

By default Jekyll include documents loaded by your layout files do not have access to variables defined in the YAML header in your posts or pages. This can pose a bit of a problem if you want some parts of your site to have access to your post data (e.g. such as its title).

Luckily there is a way to pass variables into liquid includes however the official documentation is not very clear on exactly how it works.

Here is how it works

You pass in the variable in the include directive

{% include sidebar.html links=page.relatedpages  %}

This code sends the page/post level variable relatedpages to sidebar.html and stores it in the variable links there.

Now in sidebar.html you have access to the links variable through include.links. You can now use the contents of this variable like any other liquid variable, e.g.

{% if include.links %}
...some code..
{% endif %}


You can pass in as many different variables as you like. In the example below there are two variables passed in to the sidebar.html include links and title.

{% include sidebar.html links=page.relatedpages title=page.title %}

You can pass in absolute values as well by surrounding the value with quotes.

{% include sidebar.html links=page.relatedpages title='My awesome page' %}

If you pass in multiple values with the same name then they overwrite each other (i.e. only the last value will be available). In the example below only the value "title2" will be available for variable include.title in the sidebar.html include.

{% include sidebar.html links=page.relatedpages title='title1' title='title2' %}

Combining/Concatenating variables

If you want to combine argument values or concatinate them you will need to first capture the value in a new variable and then pass that into the include. In the example below I create a new variable new_title and then pass it into the include.

{% capture new_title %}Welcome to my page titled {{page.title}} have fun.{% endcapture %}

{% include sidebar.html links=page.relatedpages title=new_title %}

More information on includes can be found in the official documentation and on Tom Johnson's page.

Software Developer
For hire

Developer & Programmer with +15 years professional experience building software.

Seeking WFH, remoting or freelance opportunities.