外观
Plume 主题源码修改指南
约 527 字大约 2 分钟
方案一:使用 pnpm patch(推荐)
步骤
- 创建补丁
# 修改 node_modules 中的文件后,运行:
pnpm patch vuepress-theme-plume编辑补丁文件
- pnpm 会在临时目录打开主题源码
- 修改你需要的文件
- 保存后,pnpm 会自动生成补丁文件到
patches/目录
应用补丁
- 补丁会自动在
pnpm install时应用 - 也可以手动应用:
pnpm patch-commit <临时目录路径>
- 补丁会自动在
示例
# 1. 开始补丁流程
pnpm patch vuepress-theme-plume
# 2. 编辑临时目录中的文件(pnpm 会显示路径)
# 例如:C:\Users\...\node_modules\vuepress-theme-plume
# 3. 修改完成后,提交补丁
pnpm patch-commit <临时目录路径>方案二:使用本地包(适合大修改)
步骤
- 克隆主题仓库
# 在项目根目录外克隆
cd ..
git clone https://github.com/pengzhanbo/vuepress-theme-plume.git
cd vuepress-theme-plume
pnpm install
pnpm build- 修改 package.json 使用本地路径
{
"devDependencies": {
"vuepress-theme-plume": "file:../vuepress-theme-plume"
}
}- 重新安装依赖
pnpm install优点
- 完全控制源码
- 可以提交到 Git
- 修改立即生效
缺点
- 需要手动同步上游更新
- 仓库体积较大
方案三:Fork + 发布到 npm(适合长期维护)
步骤
- Fork 仓库到你的 GitHub
- 克隆你的 Fork
git clone https://github.com/你的用户名/vuepress-theme-plume.git- 修改并发布
cd vuepress-theme-plume
# 修改代码
pnpm build
# 发布到 npm(需要 npm 账号)
npm publish --scope=你的scope- 在项目中使用
{
"devDependencies": {
"vuepress-theme-plume": "@你的scope/vuepress-theme-plume"
}
}当前项目建议
基于你的项目结构,推荐使用方案一(pnpm patch),因为:
- ✅ 你已经在使用
override目录覆盖组件 - ✅ 只需要修改少量核心文件
- ✅ 补丁文件可以提交到 Git,团队共享
- ✅ 不影响 node_modules 的更新流程
快速开始
# 1. 创建补丁
pnpm patch vuepress-theme-plume
# 2. 修改临时目录中的文件
# 3. 提交补丁(pnpm 会提示路径)
pnpm patch-commit <临时目录路径>补丁文件会自动保存到 patches/vuepress-theme-plume.patch,记得提交到 Git!
