Jekyll如何在<body>标签外应用include标签？

核心原因：浏览器HTML纠错机制 + Jekyll纯文本替换逻辑 #

Jekyll的{% include %}标签本质就是纯文本替换——它不会检查你把内容插在HTML结构的哪个位置，只是原封不动地把目标文件的内容放到标签所在的地方。

你把{% include footer.html %}写在</body>外面，生成的静态HTML里确实是在</body>之后，但浏览器加载HTML时会严格按规范修正非法结构：

• HTML规范明确要求所有可见内容必须放在<body>标签内部，</body>之后不能有任何有效内容。
• 浏览器遇到这种错误时，会自动把</body>后的内容移动到<body>标签的末尾，这就是你看到页脚被包含在body边框里的直接原因。

而{% include head.html %}能正常显示，是因为你把它放在了<head>内部或者<body>之前的合法位置，浏览器不需要做纠错处理，所以渲染符合预期。

解决办法 #

1. 修正HTML结构（最根本的解决方式）：把{% include footer.html %}移到</body>标签内部的最后位置，遵循HTML规范：

   <body class="border">
     <!-- 页面主体内容 -->
     {% include footer.html %}
   </body>
   

2. 调整样式实现分离需求：如果想让页脚和body边框分开，可以用CSS或Bootstrap工具类调整：
   • 给<body>添加padding-bottom，留出页脚的显示空间
   • 给页脚元素加上Bootstrap间距类（比如mt-5）或者自定义margin-top
   • 把页面主体内容放在Bootstrap的.container容器里，页脚单独放在容器外

补充说明 #

Jekyll作为静态站点生成器，只负责模板的文本拼接，不会校验HTML结构的合法性。最终页面的渲染效果很大程度上依赖浏览器的纠错逻辑，所以写模板时一定要遵循HTML规范，避免出现“代码位置和实际渲染位置不符”的情况。

内容的提问来源于stack exchange，提问作者J.R. Bob Dobbs