如何通过修改单个文件实现网站页眉/Logo跨页面一致性？

你现在的问题是每次新增板块都要手动修改所有页面的按钮栏，长期下来确实会非常繁琐，下面是几种能让你只改一个文件就同步所有页面页眉的方法，按实现难度从低到高排列：

1. 最简单的iframe方案 #

把页眉部分单独存成一个独立的HTML文件，比如命名为header.html，注意修正原代码的结构问题——logocontainer要放到<body>标签内，内容如下：

<!-- header.html -->
<div class="logocontainer">
  <a href="index.html">
    <img src="images/badasslogo.png" align="center" class="logo">
  </a>
</div>
<div class="buttoncontainer">
  <a href="index.html">
    <img src="images/buttons/homebutton.png" class="button">
  </a>
  <!-- 其他按钮代码保持不变 -->
</div>

然后在你所有页面的<body>开头位置，插入这个iframe：

<body>
  <iframe src="header.html" width="100%" height="120px" frameborder="0" scrolling="no"></iframe>
  <!-- 页面原有内容 -->
</body>

注意：需要根据页眉实际高度调整height值，避免出现滚动条；如果页面在子目录（比如blog/blogmain.html），要把src改成../header.html或者用绝对路径（比如/header.html，前提是网站有根域名）。

2. 更灵活的JavaScript加载方案 #

同样先创建header.html文件（内容和上面一致），然后在每个页面的<body>开头添加一个容器，再用JS加载页眉内容：

<body>
  <div id="header-container"></div>
  <!-- 页面原有内容 -->

  <script>
    // 加载header.html内容到容器里
    fetch('header.html')
      .then(response => response.text())
      .then(html => {
        document.getElementById('header-container').innerHTML = html;
      });
  </script>
</body>

这种方案不会有iframe的样式隔离问题，页眉会继承当前页面的CSS样式，路径问题和iframe方案一致，子目录页面要调整fetch的路径。

3. 长期维护首选：静态站点生成器 #

如果你的网站打算长期扩展，推荐用静态站点生成器（比如Jekyll、Hugo），它们支持模板组件复用。以Jekyll为例：

1. 在项目根目录创建_includes/header.html文件，内容就是你的页眉代码；
2. 在所有页面的布局文件（比如_layouts/default.html）里，用模板标签引用这个组件：

<body>
  {% include header.html %}
  <!-- 页面内容区域 -->
</body>

之后你只需要修改_includes/header.html，所有页面的页眉都会自动更新，生成器还能帮你处理路径问题、批量生成页面，非常适合规模逐渐变大的网站。

4. 服务器端包含（SSI） #

如果你的网站服务器支持SSI（比如Apache、Nginx），可以直接在页面里用服务器指令引用页眉文件：

首先创建header.html，然后在每个页面的对应位置添加：

<body>
  <!--#include virtual="/header.html" -->
  <!-- 页面原有内容 -->
</body>

前提：需要开启服务器的SSI功能，比如Apache要开启mod_include模块，Nginx要在配置里加ssi on;，这种方案不需要前端代码，完全由服务器处理内容插入。

内容的提问来源于stack exchange，提问作者June S. Sai