搭建多页面网站时是否需要每页都复制粘贴navbar等公共组件代码？

不需要手动在每个页面复制粘贴公共模块的代码，目前有多种成熟方案可以实现公共模块的复用，避免重复代码和后续维护的麻烦，按你常用的技术栈可以选择对应方案：

原生静态站点（无框架、无后端） #

• 服务端包含（SSI）：Nginx、Apache等主流web服务器都原生支持该功能，你可以把navbar、footer单独保存为navbar.html、footer.html文件，在页面对应位置插入<!--#include virtual="./components/navbar.html" -->语句即可，服务器会在返回页面前自动把公共模块的内容拼接进页面，用户侧拿到的就是完整的HTML。
• 静态站点生成工具（SSG）：比如11ty、Hugo、Jekyll这类工具都内置了模板继承、组件复用能力，你只需要写一次公共组件，所有页面直接引用，最终工具会打包输出完整的静态HTML文件，不需要服务器额外配置，直接部署到任意静态托管服务即可。
• 前端动态插入：轻量小站可以用JS实现，把公共模块的内容写成HTML字符串，或者单独存为HTML文件用fetch请求加载后插入到页面对应DOM节点，优点是不需要服务端或构建工具支持，缺点是公共内容要等JS执行后才渲染，对SEO不友好。

前端框架场景（Vue/React/Angular等） #

框架本身就原生支持组件化能力，你可以把navbar、footer封装为全局公共组件，在每个页面直接引入调用即可，是目前中大型项目最常用的方案，维护成本极低。

后端渲染/服务端模板场景 #

不管是PHP的Smarty、Python的Jinja2、Node.js的EJS/Pug等各类后端模板引擎，都支持include引入或者模板继承能力，公共模块只需要写一次，所有模板直接引用即可，后端返回页面时就已经拼接好了完整内容，SEO友好且性能稳定。

小提示：如果是个人小型项目，优先推荐用静态站点生成工具的方案，不需要复杂配置，也能完全避免复制代码导致的多页面内容不同步、修改公共模块需要批量更新所有页面的问题。

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