如何将网站顶部及sidenav-menu移至独立文件实现多页引用？

步骤1：抽离头部与侧边栏到独立文件 #

新建一个名为header.html的文件，把你网站里的顶部导航栏、sidenav菜单的所有HTML代码复制进去。比如典型的Materialize导航结构示例：

<!-- header.html 内容 -->
<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">你的网站名</a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="首页.html">首页</a></li>
      <li><a href="关于.html">关于我</a></li>
      <!-- 后续加新按钮直接在这里添加 -->
    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-demo">
  <li><a href="首页.html">首页</a></li>
  <li><a href="关于.html">关于我</a></li>
  <!-- 移动端菜单的新按钮同步在这里添加 -->
</ul>

步骤2：在所有页面中引入这个独立文件 #

在你每个页面的<body>标签最开头（或者你希望头部显示的位置）添加一个空容器：

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

然后在页面的</body>标签之前，添加这段JavaScript代码（必须放在Materialize的JS文件引用之后）：

<script>
// 加载头部文件
fetch('header.html')
  .then(response => response.text())
  .then(html => {
    document.getElementById('header-container').innerHTML = html;
    // 加载完成后重新初始化Materialize侧边栏组件
    M.Sidenav.init(document.querySelectorAll('.sidenav'));
  });
</script>

步骤3：后续添加新按钮的操作 #

以后要给菜单加新按钮，只需要打开header.html，在对应的<ul>列表里添加新的<li>项即可，比如：

<!-- 桌面端菜单新增按钮 -->
<li><a href="作品.html">我的作品</a></li>

<!-- 移动端菜单同步新增 -->
<li><a href="作品.html">我的作品</a></li>

修改保存后，所有引用了header.html的页面都会自动更新菜单内容。

额外注意事项 #

• 如果你直接用本地浏览器打开HTML文件（未通过服务器），可能会遇到跨域问题导致无法加载header.html。解决方法是启动简单本地服务器：打开命令行进入网站文件夹，运行python -m http.server（需安装Python），然后通过http://localhost:8000访问页面。
• 确保每个页面都正确引入了Materialize的CSS和JS文件，否则导航、侧边栏的样式和交互功能会失效。

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