如何简化HTML模板通用区块（页眉、页脚）维护？面向JS多页应用

嘿，我完全懂你的需求——想要像PHP里require_once那样，只改一个通用文件就能同步更新所有页面的页眉、页脚这类区块，而且还不想依赖客户端JS动态加载，毕竟动态方案可能有页面闪烁、JS失效时显示异常的问题对吧？下面这些都是预编译生成静态HTML的非动态方案，完美适配你的场景：

1. 静态站点生成器（SSG）：一站式解决模板复用 #

像Eleventy（11ty）、Jekyll、Hugo这类工具天生就是干这个的，它们对JS项目也非常友好。以Eleventy为例：

• 把页眉存成_includes/header.njk（支持Nunjucks模板格式或纯HTML）
• 在每个页面的HTML文件里用{% include "header.njk" %}引用这个片段
• 运行npx @11ty/eleventy编译项目，工具会自动把所有引用的片段合并成完整的静态HTML文件

之后只要修改header.njk，重新编译一次，所有页面的页眉就同步更新了。最终输出的都是纯静态HTML，完全不需要客户端JS支持。

2. 单独用HTML预处理器：轻量灵活 #

如果不想用完整的SSG，单独用Nunjucks、Pug这类预处理器也可以。拿Nunjucks举例：

• 先写通用片段，比如components/header.html：

<header class="site-header">
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于我们</a>
  </nav>
</header>

• 然后在主页面模板index.njk里导入：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>首页</title>
</head>
<body>
  {% include 'components/header.html' %}
  <main>
    <!-- 页面专属内容 -->
  </main>
  {% include 'components/footer.html' %}
</body>
</html>

• 用Nunjucks的CLI工具或者Gulp/Grunt这类构建工具，把.njk文件编译成纯HTML。每次修改通用片段后，重新编译即可。

3. 结合现有构建工具（Webpack/Vite）：无缝融入现有 workflow #

如果你的项目已经在用Webpack或者Vite，直接用对应的HTML插件就能实现模板复用：

• Vite：用vite-plugin-html插件，在index.html里用EJS语法导入片段：

<!DOCTYPE html>
<html>
<body>
  <!-- 导入页眉 -->
  <%= require('./components/header.html').default %>
  <main>我的页面内容</main>
  <!-- 导入页脚 -->
  <%= require('./components/footer.html').default %>
</body>
</html>

配置好插件后，运行vite build时就会自动把片段合并成静态HTML文件。

• Webpack：用html-webpack-plugin配合html-loader，同样可以在HTML模板里导入通用片段，构建后输出完整的静态页面。

4. 简单脚本批量替换：适合小型项目 #

如果项目很小，不想引入复杂工具，可以自己写个简单的脚本批量处理：

• 在每个HTML页面里加占位符，比如<!-- [HEADER] -->和<!-- [FOOTER] -->
• 写个Node.js脚本（或者用Shell/PowerShell），读取header.html和footer.html的内容，然后批量替换所有HTML文件里的占位符

比如Node.js脚本示例：

const fs = require('fs');
const path = require('path');

// 读取通用片段
const headerContent = fs.readFileSync(path.join(__dirname, 'components/header.html'), 'utf8');
const footerContent = fs.readFileSync(path.join(__dirname, 'components/footer.html'), 'utf8');

// 遍历所有HTML文件
fs.readdirSync(__dirname).forEach(file => {
  if (file.endsWith('.html')) {
    let content = fs.readFileSync(path.join(__dirname, file), 'utf8');
    // 替换占位符
    content = content.replace('<!-- [HEADER] -->', headerContent);
    content = content.replace('<!-- [FOOTER] -->', footerContent);
    fs.writeFileSync(path.join(__dirname, file), content);
  }
});

每次修改通用片段后，运行这个脚本就能更新所有页面，简单粗暴但有效。

这些方案的核心都是提前把通用片段合并到HTML里，最终输出的都是纯静态HTML页面，完全不需要依赖客户端JS，和PHP的服务器端包含效果一致，但属于静态预编译的非动态方案。

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