如何避免HTML代码重复？多页面相似设计下的代码复用方案问询

当然有不少靠谱的办法来避免页面间的HTML代码重复！我自己做项目时经常碰到这种页面高度相似的场景，下面分享几个实用的方案，你可以根据项目的技术栈、规模来挑选：

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

如果你的项目是静态页面或者用简单的后端服务（比如Apache、Nginx），SSI是个超简单的选择。你可以把重复的部分（比如页面头部、侧边栏、页脚）抽成单独的HTML文件，然后在主页面里用特定指令引入：

<!-- 引入头部片段 -->
<!--#include virtual="/common/header.html" -->

<!-- 页面独有的内容 -->
<div class="page-content">...</div>

<!-- 引入页脚片段 -->
<!--#include virtual="/common/footer.html" -->

优点：零额外工具依赖，配置简单；缺点：仅支持简单的文件包含，没法处理动态逻辑，而且需要服务器开启SSI支持。

2. 模板引擎 #

如果需要一点动态内容的处理，模板引擎是绝佳选择。常见的有EJS、Handlebars、Pug等，几乎所有后端框架（比如Node.js的Express）都能轻松集成。拿EJS举例：

• 先把重复部分做成partial文件，比如_header.ejs
• 在主页面里通过指令引入：

<%- include('_header.ejs', { pageTitle: '首页' }) %>

<!-- 页面专属内容 -->
<h1>欢迎来到首页</h1>

<%- include('_footer.ejs') %>

这里还能给partial传参数（比如页面标题），灵活性比SSI强太多，适合有少量动态需求的项目。

3. 前端框架的组件化 #

要是你用React、Vue、Angular这类现代前端框架，组件化就是解决这个问题的标准姿势。比如在Vue里：

• 把重复的导航栏封装成Navbar.vue组件：

<template>
  <nav class="navbar">
    <a href="/">首页</a>
    <a href="/about">关于我们</a>
  </nav>
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

<style scoped>
.navbar { ... }
</style>

• 然后在任意页面的组件里直接引用：

<template>
  <div>
    <Navbar />
    <div class="page-content">...</div>
  </div>
</template>

<script>
import Navbar from './Navbar.vue'

export default {
  components: { Navbar }
}
</script>

这种方式不仅能复用HTML，还能把对应的CSS和JS逻辑封装在一起，维护起来特别省心，适合中大型项目。

4. 原生JS动态加载 #

如果不想用任何框架或模板引擎，原生JS也能搞定。写个简单的加载函数：

async function loadReusablePart(targetId, filePath) {
  try {
    const response = await fetch(filePath);
    const htmlContent = await response.text();
    document.getElementById(targetId).innerHTML = htmlContent;
  } catch (error) {
    console.error('加载组件失败:', error);
  }
}

// 在页面加载完成后调用
window.addEventListener('DOMContentLoaded', () => {
  loadReusablePart('header-container', '/common/header.html');
  loadReusablePart('footer-container', '/common/footer.html');
});

优点：完全零依赖，灵活度高；缺点：是客户端动态渲染，可能影响SEO（爬虫不一定能抓取到动态加载的内容），而且没法处理复杂的逻辑交互。

5. 构建工具结合HTML拆分 #

如果你的项目用Webpack、Vite这类构建工具，可以借助插件或loader来处理HTML复用。比如用html-webpack-plugin配合html-loader，把HTML拆分成多个partial，构建时自动合并成完整的页面。这种方案能在构建阶段就把复用部分整合好，输出的是静态HTML，对SEO友好，适合需要打包的前端项目。

总结 #

• 小型静态项目：优先选SSI或原生JS
• 有动态需求的小项目：模板引擎更合适
• 中大型项目：直接用前端框架的组件化方案
• 需要打包的项目：用构建工具的HTML拆分方案

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