如何在Bootstrap/HTML中实现多页面可复用导航菜单

架构老林

2026-5-15

嘿，这个问题太戳中痛点了——谁都不想在N个页面里复制粘贴导航代码，改个链接要挨个页面改，简直是浪费生命！下面给你几个实用的方案，从简单到进阶都有，你可以根据自己的项目规模和技术栈选：

方案1：服务器端包含（SSI）

如果你的网站是放在Apache、Nginx这类服务器上的，这个方法最简单直接。

步骤很简单：

单独创建一个导航文件，比如nav.html，把Bootstrap导航的完整代码放进去：

<!-- nav.html -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">My Site</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

在每个页面需要导航的位置，插入SSI指令：
- Apache用：
- Nginx需要先配置支持SSI，然后用：

优点：完全不依赖前端JS，加载速度快，SEO友好；缺点：需要服务器开启SSI支持，本地开发可能需要搭个Apache/Nginx环境，纯静态文件服务器（比如python -m http.server）不支持。

方案2：JavaScript动态加载

如果你的项目是纯静态的，不想折腾服务器配置，这个方法最适合。核心思路是用JS把导航HTML文件加载到页面里。

步骤：

先创建好上面的nav.html文件。
写一个加载导航的JS文件，比如load-nav.js：

// 等DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', () => {
  // 发起请求获取导航HTML
  fetch('/nav.html')
    .then(response => {
      if (!response.ok) throw new Error('Failed to load nav');
      return response.text();
    })
    .then(html => {
      // 把导航插入到页面的容器里
      const navContainer = document.getElementById('nav-container');
      if (navContainer) navContainer.innerHTML = html;
      
      // 重要！如果用了Bootstrap的下拉、折叠等组件，加载后需要重新初始化
      if (window.bootstrap) {
        // 重新初始化所有下拉按钮
        document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
          new bootstrap.Dropdown(toggle);
        });
        // 重新初始化折叠组件（比如移动端导航菜单）
        document.querySelectorAll('.collapse').forEach(collapse => {
          new bootstrap.Collapse(collapse);
        });
      }
    })
    .catch(err => console.error('加载导航失败:', err));
});

在每个页面的<body>里，先放一个容器，再引入这个JS：

<body>
  <!-- 导航容器 -->
  <div id="nav-container"></div>

  <!-- 页面其他内容 -->
  <div class="container mt-4">...</div>

  <!-- 先引入Bootstrap JS，再引入加载导航的JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="/load-nav.js"></script>
</body>

优点：纯静态就能用，本地开个简单的静态服务器（比如python -m http.server）就能测试；缺点：页面加载时可能会有短暂的导航空白（可以加个加载动画优化），早期搜索引擎可能爬不到JS生成的内容，但现在主流搜索引擎都支持了。

方案3：前端构建工具（Vite/Webpack）

如果你的项目打算长期维护，或者已经在用前端工具链，那用组件化的方式更省心。比如用Vite配合模板引擎，或者直接用框架（Vue/React），这里说下纯HTML+Vite的方案：

先初始化Vite项目：npm create vite@latest my-site -- --template vanilla
创建一个导航片段文件，比如src/partials/nav.html，内容和之前的nav.html一样。

在主页面（比如index.html）里，用Vite的import语法加载，或者用EJS这类模板引擎：

比如用EJS的话，先安装依赖：npm install ejs vite-plugin-ejs --save-dev

配置vite.config.js启用EJS插件：

import { defineConfig } from 'vite';
import ejs from 'vite-plugin-ejs';

export default defineConfig({
  plugins: [ejs()]
});

然后在页面里引入导航：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
  <%- include('./src/partials/nav.html') %>
  <!-- 页面内容 -->
</body>
</html>

运行npm run build，Vite会把所有页面的导航都自动注入，生成最终的静态文件。

优点：开发时可以实时更新，组件化管理更清晰，构建后是纯静态文件，没有JS加载延迟；缺点：需要学习一点构建工具的配置，适合中大型项目。

总结一下

小体量纯静态项目：优先选JavaScript动态加载，零配置就能用；
有服务器权限的项目：选服务器端包含，体验最好；
中大型项目或需要扩展功能：直接上前端构建工具，长远来看更省心。

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