While digging deeper into Jekyll and Bootstrap, I noticed something about the Liquid tags used to include partials.
I placed a {% include footer.html %}
outside of </body>
, and lo-and-behold, the footer was rendered within the body tag!
I had placed a Bootstrap specific border class on the body, and was expecting to see the border exclude the footer, which is how I discovered this nuance.
I think it's obvious that something outside of the <body>
would/should not be rendered.... but this is a Liquid include tag. Somehow {% include head.html %}
IS rendered on the page, and is appearing where it should...above the body tag with the usual fodder and markup.
So what's going on here? What's the convention?
I looked through the Jekyll docs, which are excellent, but make no allusion to how these include tags are parsed.
I also searched through various questions here, though those are more looking for help with basic rendering, or advanced variable passing.
I also did a google search, but my googlefu came up short...
Jekyll does nothing special to {% include %}
-s anywhere. If you put an {% include %}
directive outside a <body>
tag, the included content will also stay outside the tag. If you inspect the generated files, e.g. by opening one with a text editor, you'll see everything as expected.
It is, however, your browser that moves such content back to inside the <body>
tag, as such content will otherwise be invalid HTML.