是否可以创建结构改动后可同步更新所有页面的navbar？

方案1：纯前端原生实现（无需后端/构建工具，适合小型静态站点） #

这是改造成本最低的方案，不需要改动现有站点的技术栈：

• 单独新建navbar.html文件，只写入导航栏对应的HTML代码，不要额外的外层页面标签（比如<!DOCTYPE html>、<html>、<body>等）
• 删掉各页面原有的导航栏代码，在原来放导航的位置插入以下JS代码即可：

// 自动加载公共导航栏代码
fetch('./navbar.html')
  .then(response => response.text())
  .then(navbarHtml => {
    document.querySelector('header').innerHTML = navbarHtml
  })

• 后续仅需要修改navbar.html这一个文件，所有页面的导航就会同步更新
  注意：本地直接打开HTML文件调试时，部分浏览器会触发跨域限制导致导航不显示，部署到线上服务器后就会恢复正常。如果不想用JS实现，也可以用<iframe src="navbar.html" frameborder="0" width="100%"></iframe>嵌入导航，需要自行调整iframe的高度适配样式。

方案2：静态站点生成器方案（适合内容较多、定期更新的测评站） #

• 如果站点使用Hugo、Jekyll、Hexo等常见静态站点生成工具搭建，直接把navbar代码放到主题的partials公共组件目录下
• 在所有页面模板中引入公共导航组件，修改组件文件即可同步所有生成的静态页面
• 如果是自定义构建流程，可以用Gulp、Vite等工具的模板导入功能，打包时自动把导航代码注入所有页面

方案3：服务端渲染/动态站点方案 #

如果站点用PHP、Node.js、Python等后端语言开发，直接用后端模板的引入功能即可：

• 把navbar代码封装为独立的公共模板文件
• 各页面用后端语法引入即可，比如PHP用<?php include 'navbar.php';?>，Node.js Express框架搭配ejs模板用<%- include('navbar') %>语法
• 修改公共模板文件即可同步全站导航

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