Bootstrap网站全局Navbar复用：如何实现多页面Navbar联动更新？

嘿，这个需求太普遍了！谁也不想每次改Navbar都要挨个页面更新，下面给你分享几种实用的方案，根据你的项目情况选就行：

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

如果你的网站是用Apache、Nginx这类服务器托管的，直接用服务器端包含是最简单的方案之一：

• 把Navbar的代码单独存成一个文件，比如navbar.html，里面就是完整的Bootstrap Navbar代码
• 在每个需要Navbar的页面里，替换原来的Navbar代码，改成服务器包含指令：
  • Apache用：<!--#include virtual="/navbar.html" -->
  • Nginx用：<!--#include file="/navbar.html" -->
• 记得要在服务器配置里开启SSI支持（比如Apache要启用mod_include模块，Nginx要在配置里加ssi on;）

2. 前端模板引擎 #

如果你的项目用了Node.js或者有构建工具，用模板引擎来管理片段会更灵活：

• 比如用EJS：把Navbar放在partials/navbar.ejs里，然后在每个页面的对应位置写<%- include('partials/navbar') %>
• 或者Handlebars：注册一个Navbar的partial，然后在模板里用{{> navbar}}引用
• 这种方式在开发时改一次partial，所有页面都会自动同步，构建后生成完整的HTML文件

3. 纯前端JavaScript加载 #

如果不想折腾服务器或构建工具，纯前端的动态加载也能搞定：

• 先把Navbar代码单独存为navbar.html
• 在每个页面的合适位置加一个容器：<div id="navbar-container"></div>
• 在页面底部（或者DOM加载完成后）加一段JS代码来加载Navbar：

document.addEventListener('DOMContentLoaded', () => {
  fetch('/navbar.html')
    .then(res => res.text())
    .then(html => {
      document.getElementById('navbar-container').innerHTML = html;
      // 如果Navbar里有需要初始化的Bootstrap组件（比如下拉菜单），这里可以手动初始化
      new bootstrap.Dropdown(document.querySelector('.dropdown-toggle'));
    })
    .catch(err => console.log('加载Navbar出错啦:', err));
});

⚠️ 注意：这种方法可能会有页面加载时的短暂闪烁，适合小型静态站点。

4. 前端框架组件化（推荐中大型项目） #

如果你的项目用了Vue、React这类前端框架，组件化是最优雅的解决方案：

• 把Navbar封装成一个独立组件，比如Vue的Navbar.vue，里面写好Bootstrap Navbar的结构和样式
• 在其他页面组件里，直接导入并使用这个组件：<Navbar />
• 以后只要修改这个Navbar组件，所有用到它的页面都会自动更新，完全不用手动同步

5. 静态站点构建工具整合 #

如果你是做静态站点，用Webpack、Gulp这类构建工具也能实现：

• 比如用Gulp的gulp-include插件，在HTML文件里用@@include('./navbar.html')标记要插入的位置
• 运行构建命令时，工具会自动把Navbar代码插入到所有标记的位置，生成最终的静态HTML文件
• 这种方式适合不需要后端的静态站点，构建一次就搞定所有页面的Navbar同步

根据你的项目规模和技术栈选就行，小项目用SSI或JS加载，中大型项目用框架组件化绝对是最省心的！

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