如何在GitHub Pages中复用HTML头部？求减少开发编码量的合规方案

GitHub Pages原生支持Jekyll静态站点生成器，它能在开发阶段通过模板复用减少重复代码，并在代码推送后自动构建成完整的静态HTML文件，完全不会影响页面运行时性能，正好匹配你的需求。

实现步骤如下： #

1. 创建可复用的头部模板

在项目根目录下新建_includes文件夹（若不存在），创建head.html文件，将头部内容改为带变量的模板，对应你需要的title、favicon、styleCSS参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ include.title }}</title>
    <link rel="icon" type="image/png" href="{{ include.favicon }}">
    {% for css in include.styleCSS %}
    <link rel="stylesheet" href="{{ css }}">
    {% endfor %}
</head>

2. 在页面中调用模板（类函数传参）

在每个HTML页面里，用Jekyll的include标签引入模板并传递对应参数，替代原重复的<head>代码：

{% include head.html title="Home" favicon="assets/favicon.png" styleCSS=["style.css", "shadowStyle.css"] %}

<body>
    <!-- 页面内容 -->
</body>
</html>

3. 本地预览（可选）

若要本地验证效果，可安装Jekyll后运行jekyll serve，即可查看构建后的完整HTML页面，确认头部内容生成是否正确。

4. 推送代码到GitHub

将修改后的代码推送到GitHub仓库，GitHub Pages会自动触发Jekyll构建，生成包含完整<head>的静态HTML文件，无需额外配置。

优势说明 #

• 完全基于GitHub Pages原生支持的技术，无需额外工具或服务；
• 头部内容在构建阶段生成，页面运行时直接加载完整HTML，无性能损耗；
• 开发阶段仅需调用模板传参，彻底避免重复编写相同<head>代码；
• 后续修改头部通用逻辑（如新增meta标签），仅需修改head.html一个文件，所有页面同步更新。

内容的提问来源于stack exchange，提问作者Mango