非首页如何显示页眉页脚？能否用JavaScript优化文件体积？

1. 是否需要用传统复制粘贴方式添加页眉页脚？ #

完全没必要。这种方式的致命问题是维护成本极高——后续要修改页眉页脚的内容或样式时，你得逐个打开所有页面调整，不仅效率低，还极易漏改出错。除非你的站点只有1-2个页面，否则绝对不推荐这种笨办法。

2. 能否通过JavaScript在所有页面显示页眉页脚？ #

当然可以，这是中小型站点常用的轻量化方案之一。核心逻辑是把页眉页脚的HTML结构封装到单独的JS文件中，然后在每个页面加载该JS，动态将内容插入到页面指定位置。

举个简单的实现示例：

// header-footer.js
function loadHeaderFooter() {
  // 定义页眉HTML结构
  const headerHTML = `
    <header class="site-header">
      <h1>我的个人站点</h1>
      <nav>
        <a href="/">首页</a>
        <a href="/blog">博客</a>
        <a href="/about">关于我</a>
      </nav>
    </header>
  `;
  // 定义页脚HTML结构
  const footerHTML = `
    <footer class="site-footer">
      <p>© 2024 我的站点 | 保留所有权利</p>
    </footer>
  `;
  // 将页眉插入页面最顶部，页脚插入页面最底部
  document.body.insertAdjacentHTML('afterbegin', headerHTML);
  document.body.insertAdjacentHTML('beforeend', footerHTML);
}

// 页面DOM加载完成后执行渲染逻辑
document.addEventListener('DOMContentLoaded', loadHeaderFooter);

之后在每个页面的<script>标签中引入这个JS文件即可：

<script src="/assets/js/header-footer.js"></script>

3. JavaScript渲染页眉页脚能否节省千字节级存储空间？ #

肯定能。假设单页页眉页脚的HTML代码占500字节，你的站点有20个页面：

• 传统复制粘贴方式：总占用空间是20×500=10000字节（约9.7KB）
• JS渲染方式：仅需在1个JS文件中写500字节的结构，每个页面只需要一行约30字节的引入代码，总开销是500 + 20×30=1100字节（约1.07KB）

算下来直接省下了近9KB的存储空间，而且后续修改页眉页脚内容时，仅需调整JS文件，不会像传统方式那样所有页面的体积都要变动。

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