Search code examples
jekyllliquid

How does Jekyll apply `include` outside of `<body>` tag?


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...


Solution

  • 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.