如何创建固定且可切换内容的菜单栏？是否需重复编写代码？

嗨，我懂你想要的那种效果——就像Facebook那样，切换不同页面时，个人主页、首页、消息这些菜单栏选项始终固定显示，只有页面内容更新，而且完全不想在每个页面里重复写菜单代码对吧？当然不用重复写啦，下面给你几种适配不同开发场景的实用方案：

1. 前端路由 + 单页应用（SPA）模式 #

这是目前实现这类效果最流畅的方案，主流前端框架（React、Vue、Angular）都原生支持。核心思路是：整个应用只加载一个主HTML页面，菜单栏作为独立的固定组件挂载在页面根节点，内容区域则根据路由变化动态渲染对应的页面组件，全程无需刷新浏览器。

举个Vue的简单示例：

<!-- 根组件 App.vue -->
<template>
  <div class="app-container">
    <!-- 固定菜单栏组件，只会渲染一次 -->
    <Navbar />
    <!-- 路由内容出口，切换路由时这里自动替换为对应页面组件 -->
    <router-view />
  </div>
</template>

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

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

如果是原生JavaScript开发，也可以通过history.pushState监听路由变化，手动替换内容区域的HTML，菜单栏始终保持不动。

2. 服务器端模板复用（多页应用场景） #

如果你的项目是传统后端渲染的多页应用，那可以利用后端模板引擎的模板继承/片段引入功能，把菜单栏抽成公共模板片段，所有页面都复用这个片段即可。

比如用Node.js的EJS模板引擎：
首先创建一个包含菜单栏的基础布局模板layout.ejs：

<!-- layout.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title><%= pageTitle %></title>
</head>
<body>
  <!-- 公共菜单栏 -->
  <nav class="navbar">
    <a href="/home">首页</a>
    <a href="/profile">个人主页</a>
    <a href="/messages">消息</a>
  </nav>
  <!-- 页面内容占位符 -->
  <main class="content"><%- pageContent %></main>
</body>
</html>

然后其他页面模板继承这个布局，只需要填充自己的内容：

<!-- home.ejs -->
<%- include('layout.ejs', { 
  pageTitle: '首页',
  pageContent: '<h1>欢迎来到首页</h1>' 
}) %>

类似的，PHP Laravel的Blade模板、Java Thymeleaf都有类似的模板复用功能，只需要按照对应框架的语法实现即可，完全不用在每个页面重复写菜单代码。

3. 纯静态页面的复用方案 #

如果是纯静态HTML项目，没有后端也不想用前端框架，那可以把菜单栏封装成JavaScript模块，在每个页面引入这个模块来动态生成菜单。

比如创建一个navbar.js文件：

// navbar.js
function renderNavbar() {
  const navbar = document.createElement('nav');
  navbar.className = 'navbar';
  navbar.innerHTML = `
    <a href="home.html">首页</a>
    <a href="profile.html">个人主页</a>
    <a href="messages.html">消息</a>
  `;
  // 将菜单插入页面顶部
  document.body.insertBefore(navbar, document.body.firstChild);
}

// 页面加载完成后渲染菜单
window.addEventListener('load', renderNavbar);

然后在每个静态页面的底部引入这个脚本：

<script src="./navbar.js"></script>

这样所有页面都会自动生成相同的菜单栏，后续修改菜单只需要更新navbar.js这一个文件就行。不过这种方式切换页面时浏览器会刷新，如果想要无刷新切换内容，还是得结合前端路由的思路来实现。

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