Vuepress vuepress-theme-blog自定义组件及导航栏改造方法咨询

为什么不建议直接改node_modules里的主题源码 #

直接修改/node_modules/@vuepress-theme-blog/components/Header.vue的做法存在三个无法忽略的问题：

• 所有修改都不具备持久性。只要执行一次依赖重装（npm install/yarn install），node_modules目录会被重新拉取，手动修改的文件会被官方原版完全覆盖
• 版本升级成本极高。后续想要升级主题获取官方新特性、修复安全漏洞时，本地修改的源码会和上游版本产生直接冲突，几乎无法平滑升级
• 团队协作完全失效。node_modules目录默认不会被Git版本跟踪，其他协作者拉取项目代码安装依赖后，根本看不到你做的导航栏自定义效果

官方规范的组件替换操作流程 #

VuePress本身内置了主题组件覆盖能力，全程不需要修改node_modules目录，操作逻辑非常简单：

1. 在项目根目录下创建.vuepress/components/目录
2. 按照主题内置组件的命名，在这个目录下创建完全同名的文件。比如要替换原主题的导航栏Header组件，就新建.vuepress/components/Header.vue，写入你自己的导航栏代码即可
3. 项目构建时，VuePress会自动优先加载本地目录下的同名组件，直接替换node_modules里的原主题组件，不需要额外写任何路由、匹配配置

自定义组件的实用技巧 #

• 可以先把node_modules里原有的Header.vue源码完整复制到你新建的自定义文件里，在原有结构的基础上调整样式、修改交互逻辑、增删功能模块，不需要从零开始编写完整组件
• 之前在config.js里配置的themeConfig.nav导航数组，在自定义组件里依然可以通过$site.themeConfig.nav直接读取，之前写好的导航链接配置可以完全复用，不需要重复维护导航数据

面向长期维护的深度定制方案 #

如果后续对主题的定制需求越来越多，可以用主题继承的方式做集中管理：

• 在.vuepress/theme路径下新建主题入口文件，声明继承原vuepress-theme-blog主题的所有能力，把所有需要自定义的组件、配置都放到这个目录下统一管理，和原主题的能力解耦
• 如果定制的功能在多个项目中通用，还可以把本地继承的主题发布为私有npm包，实现跨项目复用

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