Include partial inside {{ page.content }}

I have a custom layout called something, and it’s used by index.html.

My layout something in located under _layouts and it includes {{ page.content }}:

<div id="container">{{ page.content }}</div>
{% include footer.html %}
<script src="{{ site.baseurl }}/assets/script.js"></script>

And index.html uses this layout, and it correctly shows all the content of index.html.

But index.html also has a long code snippet that I use to document some rubygem of mine. The code is long, and if I modify my rubygem, I need to edit the usage multiple times. Sometimes, that screw up things. So I want to create another partial, usage.html, and include it inside index.html. But whenever I do this:

{% include usage.html %}

And load up the page, I see the {% include usage.html %} thing on my website, it doesn’t include the partial usage.html.

My question is how do I include partials inside HTML file that uses a custom layout?

Using an includes file in a page with a layout is common in Jekyll. And Jekyll doesn’t care about what is custom or not - it just seems a page has a layout or not and the layout could be page or default or foobar.

I think your problem is using this in your layout

page.content

That will render plain text without passing it through Jekyll Liquid. Hence your includes is appear literally.

So use this. Every layout I think I’ve ever seen uses this.

{{ content }}

You would use page.content if you had some transformation step to do on your content like removing characters. Again, you would lose your Liquid syntax so that is not so useful.

A more common style for .content attribute would be across pages. Not the current page

{% for p in site.pages %}
- {{ p.name }} - {{ p.content.size }}
{% endfor %}

Here I get the number of characters on each page. Untested code.

1 Like

Thank you very much, yes, replacing {{ page.content }} with {{ content }} makes it work again!

1 Like

Great to hear.

Please mark the answer as Solution.