新手技术问询：如何跨多页面复用导航栏代码避免重复编写

我是一名前端新手，当前我的网站每个页面都重复使用一段导航栏代码，该导航栏包含burger菜单和侧边栏弹窗（其交互逻辑位于apps.js中）。我希望将这段导航栏代码抽离成单独文件，开发新页面时直接导入使用，无需重复编写，请问有什么可行的实现方法？

以下几种方法按上手难度排序，适配不同场景：

1. jQuery 加载法（适合已有jQuery的项目） #

因为你已经引入了jQuery，这是最快捷的实现方式：

• 将导航栏代码单独保存为navbar.html文件
• 在需要导入导航栏的页面，用jQuery的load()方法加载该文件

2. 原生JavaScript 加载法 #

不依赖任何第三方库，纯原生JS实现，兼容性更广泛：

• 同样把导航栏抽成navbar.html
• 用fetch()请求文件内容，插入到页面指定位置

3. HTML Imports（原生HTML方案，注意兼容性） #

这是HTML5原生的模块导入方式，但目前仅Chrome、Edge等少数浏览器支持，生产环境需要额外引入polyfill，适合简单测试场景。

4. 静态站点生成工具（进阶方案） #

如果页面数量较多，推荐使用Jekyll、Eleventy这类静态站点生成器，它们支持模板复用，只需写一次导航栏模板，所有页面即可自动引入，适合长期维护的项目。

第一步：抽离导航栏代码 #

创建navbar.html，放入你的导航栏和侧边栏代码（注意修正原代码中把导航栏放在<head>里的错误，导航栏应放在<body>中）：

<!-- navbar.html -->
<div class="navigationHeader">
  <nav>
    <div class="logo">
      <a href="index.html"><img src="images/BannerWhiteInvert.png" alt="2505 Marketing" style="height:60px; width:auto;"></a>
    </div>
    <ul class="nav-links">
      <br>
      <li><a href="index.html">首页</a></li>
      <br>
      <li><a href="packages.html">定价</a></li>
      <br>
      <li><a href="contactform.html">联系我们</a></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>
</div>

<div class="sidebar">
  <div class="sideIcons"><a href="https://youtube.com"> <img src="images/youtubeLogo.png" alt="Youtube"></a></div>
  <div class="sideIcons"><a href="https://instagram.com"> <img src="images/instagramLogo.png" alt="Instagram"></a></div>
  <div class="sideIcons"><a href="https://facebook.com"> <img src="images/facebookLogo.png" alt="Facebook" style="width: 70%;"></a></div>
</div>

第二步：在其他页面导入导航栏 #

jQuery 加载示例

在目标页面的<body>中需要显示导航栏的位置添加：

<div id="navbar-container"></div>

<script>
// 确保这段代码在jQuery加载之后执行
$(function() {
  $("#navbar-container").load("navbar.html");
});
</script>

原生JS 加载示例

如果不想依赖jQuery，用以下代码：

<div id="navbar-container"></div>

<script>
fetch('navbar.html')
  .then(res => res.text())
  .then(html => {
    document.getElementById('navbar-container').innerHTML = html;
    // 如果burger菜单的交互需要重新初始化，这里调用apps.js中的对应函数，比如：
    // initBurgerMenu();
  });
</script>

• 每个页面都要确保引入了apps.js，否则导航栏的交互逻辑会失效
• 不要把<head>中的meta标签、样式链接等内容放入navbar.html，这些需要保留在每个页面的<head>里
• 测试时请用本地服务器（比如Live Server插件）打开页面，直接双击打开HTML文件可能会触发浏览器的跨域限制，导致加载失败

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