如何为多个HTML页面复用顶部、底部等通用元素？

当然可以，这种场景完全可以通过模板化方案解决，不用再重复复制粘贴代码，下面给你几种常见的实现方式：

1. 静态网站工具（适合纯静态站点） #

比如用Jekyll、Hugo这类静态站点生成器，它们原生支持模板复用：

• 把顶部导航栏存为_includes/header.html，底部存为_includes/footer.html
• 在每个页面中通过模板语法引入：

  {% include header.html %}
  <!-- 当前页面的独有内容 -->
  {% include footer.html %}
  

  后续只需要修改header.html或footer.html，所有页面的对应部分都会自动更新。

2. 后端语言模板引擎（适合动态站点） #

如果你的网站用PHP、Python（Django/Flask）、Node.js（Express）等后端技术，可以用对应框架的模板引擎：

• PHP：创建header.php和footer.php，在页面中用include('header.php')和include('footer.php')引入
• Django：基于模板继承，先写一个基础模板base.html，把顶部、底部放在里面，其他页面通过{% extends "base.html" %}继承，再填充独有的内容块
• Express（EJS）：用<%- include('header.ejs') %>和<%- include('footer.ejs') %>引入通用部分

3. 前端框架（单页应用或现代化站点） #

如果用Vue、React、Angular这类前端框架，组件化天然解决这个问题：

• 把顶部、底部封装成独立组件（比如Header.vue、Footer.jsx）
• 在每个页面组件中直接引入这两个组件即可，后续修改组件代码，所有页面都会同步更新

示例效果 #

（图中展示的是基础模板+页面内容块的结构，通用部分在模板中统一管理）

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