如何无需重复编写代码即可为不同页面添加通用header

方案1：原生HTML无依赖实现 #

不需要额外框架或服务端支持，仅用原生前端能力即可实现：

• 首先创建独立的header.html文件，直接存放头部代码，不需要包裹额外的html/body根标签：

<!-- header.html 独立文件 -->
<header>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于页</a>
    <a href="/product">产品页</a>
  </nav>
</header>

• 在所有需要引入头部的页面中，先放一个占位标签：<div id="header-placeholder"></div>
• 引入公共JS代码（可以写在通用common.js中所有页面统一引用）：

fetch('/header.html')
  .then(res => res.text())
  .then(headerContent => {
    document.getElementById('header-placeholder').innerHTML = headerContent
  })

优点：完全无依赖，修改header.html文件即可同步所有页面的头部内容
缺点：本地直接打开HTML文件会触发跨域限制，需要部署到服务器或者使用本地开发服务器预览

方案2：服务端包含（SSI） #

如果你的部署服务器支持SSI功能，可以直接用服务端注入的方式实现：

• 把需要引入头部的页面后缀改为.shtml
• 在需要插入头部的位置添加一行代码即可：
  <!--#include virtual="/header.html" -->
  服务器会在返回页面前自动把header.html的内容替换到对应位置，用户端看不到引入逻辑。
  优点：服务端渲染，对搜索引擎友好，没有前端渲染的延迟
  缺点：需要服务器开启SSI支持

方案3：框架/构建工具实现 #

如果你的项目使用了前端框架或者工程化构建工具，可以用更工程化的方案实现：

• Vue/React等前端框架：直接把header封装为全局公共组件，所有页面直接引用组件即可，修改组件代码后所有页面自动同步
• 静态站点生成器（Hugo、Jekyll、Eleventy等）：所有工具都内置了片段引入、布局模板能力，直接把header做成通用片段在模板中引用即可
• 工程化构建工具（Vite、Webpack、Gulp等）：可以用对应的HTML片段插入插件，比如gulp-file-include、vite-plugin-html等，在构建阶段自动把header代码注入到所有页面的对应位置

方案4：原生Web Components实现 #

可以把header封装为原生自定义组件，所有页面直接用自定义标签引入：

// 写在公共JS文件中所有页面统一引入
class SiteHeader extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = `
      <header>
        <!-- 你的header代码 -->
      </header>
    `
  }
}
customElements.define('site-header', SiteHeader)

之后所有页面只需要写<site-header></site-header>就可以插入头部，修改组件内的代码即可同步所有页面的头部内容。

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