跳至主要內容

个人魔改

个人魔改

魔改内容

总结

需要修改的内容

  • 侧边栏部分，文件夹化 (主要得修改主题源码)
    • ✅ 点击另一处不自动折叠
    • ✅ 目录名（任何时候都应当以文件名为主，而非h1的名字，哪怕是README.md）
      同时解决无h1时会产生bug的问题
    • 使用懒加载，否则当路径上千时，打开页面贼慢 (可能较难，但不弄的话网差要10s+才能加载出页面)
    • 根前缀指定 (用户可选择某个路径作为根路径，以指定的新的根路径而非绝对的根路径，重新显示侧边栏)
    • 收缩再展开时保留原来的折叠状态
    • 样式调整：展开箭头前置及优化
  • TOC部分
    • ✅ toc级别（默认配置，只到3级，应该全开）
    • toc的缩进与可折叠（只靠css和少量源码修改应该就能实现）
  • 正文
    • 标题及列表的点击展开收缩
    • 重写 ob 的 AnyBlock 插件
    • ✅ 窄屏改宽屏
  • 通用样式类
    • ✅ 层级着色（正文标题 + 目录大纲 + TOC大纲 + 路径导航）

重写

后来发现很多东西不符合自己的心意，而要改起来则太麻烦了，自己写一套获取能更方便

核心

  • 开箱即用 + 可mini化 + 可扩展 的资源管理器
    • 开箱即用：除了官方的开箱即用版本，还可以使用其他组合的开箱即用。可以方便地分享自己的开箱即用组合
    • 可mini化：几乎所有模块都可以进行去除
    • 可扩展：大量的可选模块与插件
  • 可以连同要设计的资源管理器一起设计和开发

主干框架设计、可选子模块

  • Valut生成模块 (索引生成)
    • 生成目录索引，首先会有一个主索引。
      然后可以通过插件，通过不同的规则预先或动态生成不同的目录索引（Valut筛选器），如：
      最高嵌套层数（静）、起始位置（动）、根据标签（静/动）、根据时间等其他元标签（静/动）
  • 前端展示模块
    • 基于渲染后的html进行简易展示
    • 通用资源管理器中的 缩略图、资源查看
  • Valut筛选模块
    • 依赖Valut，作用见上
  • md渲染模块
    • md预渲染成html，暂时不需要实时渲染但后期可能会使用
  • 网页抓取模块
  • 通过"转载链接"自动标记tag模块
    • 自动标记的tag会进入"autotags"而非"tags"一栏
  • AI分类模块
  • 侧边栏与大纲栏的子模块

所需技术栈：

  • Vuepress源码解读
  • Vue源码、响应式源码、SFC、虚拟dom、diff算法
  • 廖雪峰
  • MVC模式、MVVM模式
  • 选修：WASM / React

自动目录

大佬们好，我现在想要自定义自动目录插件中的三项

首先看下这三是不是原来就支持的，或者是不需要改动源代码的前提下就能够实现的，不然可能需要修改下。修改流程这样？：

  1. fork https://github.com/vuepress-theme-hope/vuepress-theme-hope，是这个仓库吧
  2. 找到对应路径修改源码。应该是下面的位置吧，还没开始改
    • /packages/auto-catalog (不是这个，很有误导性，一开始猜错了)
    • /packages/theme/src/share/options/layout/sidebar.ts，接口
    • /packages/theme/src/client/modules/sidebar/，实现
  3. 然后……请求合并，如果感觉这需求比较小众没被合并的话。要么另外传npm，要么弄git依赖，在文档项目中依赖修改后的源码？

不通过npm i，直接使用npm内容

首先我们找到npm地址：https://www.npmjs.com/package/vuepress-theme-hope?activeTab=code

其封装组件后的目录结构：

lib
bundle
client
node
presets
shared
templates
giscus
palette
socialMediaIcons
index.build.html
LICENSE
README.md
package.json

其packages.json：

"dependencies": {
    "@vuepress/cli": "2.0.0-beta.67",
    "@vuepress/client": "2.0.0-beta.67",
    "@vuepress/core": "2.0.0-beta.67",
    "@vuepress/plugin-active-header-links": "2.0.0-beta.67",
    "@vuepress/plugin-container": "2.0.0-beta.67",
    "@vuepress/plugin-external-link-icon": "2.0.0-beta.67",
    "@vuepress/plugin-git": "2.0.0-beta.67",
    "@vuepress/plugin-nprogress": "2.0.0-beta.67",
    "@vuepress/plugin-prismjs": "2.0.0-beta.67",
    "@vuepress/plugin-theme-data": "2.0.0-beta.67",
    "@vuepress/shared": "2.0.0-beta.67",
    "@vuepress/utils": "2.0.0-beta.67",
    "@vueuse/core": "^10.5.0",
    "balloon-css": "^1.2.0",
    "bcrypt-ts": "^4.0.1",
    "cheerio": "1.0.0-rc.12",
    "chokidar": "^3.5.3",
    "gray-matter": "^4.0.3",
    "vue": "^3.3.7",
    "vue-router": "^4.2.5",
    "vuepress-plugin-auto-catalog": "2.0.0-beta.242",
    "vuepress-plugin-blog2": "2.0.0-beta.242",
    "vuepress-plugin-comment2": "2.0.0-beta.242",
    "vuepress-plugin-components": "2.0.0-beta.242",
    "vuepress-plugin-copy-code2": "2.0.0-beta.242",
    "vuepress-plugin-copyright2": "2.0.0-beta.242",
    "vuepress-plugin-feed2": "2.0.0-beta.242",
    "vuepress-plugin-md-enhance": "2.0.0-beta.242",
    "vuepress-plugin-photo-swipe": "2.0.0-beta.242",
    "vuepress-plugin-pwa2": "2.0.0-beta.242",
    "vuepress-plugin-reading-time2": "2.0.0-beta.242",
    "vuepress-plugin-rtl": "2.0.0-beta.242",
    "vuepress-plugin-sass-palette": "2.0.0-beta.242",
    "vuepress-plugin-seo2": "2.0.0-beta.242",
    "vuepress-plugin-sitemap2": "2.0.0-beta.242",
    "vuepress-shared": "2.0.0-beta.242"
},

使用submodule方便修改源码 - 旧版方法

初始化流程

# 初始化
$ cd /h/Git/Private/LincZero-Vuepress
$ git submodule add git@github.com:LincZero/vuepress-theme-hope.git lib/vuepress-theme-hope # 添加子项目
# $ git submodule init   # 初始化子项目
# $ git submodule update # 更新子项目
# $ git submodule status # 检查子项目

# 构建子项目
$ cd lib/vuepress-theme-hope
$ pnpm i
$ pnpm build # 此时，各模块会生成一个 lib 文件夹
$ cp -r packages\theme\lib ..\..\node_modules\vuepress-theme-hope\lib # 复制lib文件
$ cd ../../

# 替换依赖
$ pnpm uninstall vuepress-theme-hope # (之前用npm仓库的vuepress主题的话)
# 此时 "vuepress-theme-hope": "2.0.0-beta.237" 这一行没了，我们需要将其替换成新的本地路径：
"devDependencies": {
    # "vuepress-theme-hope": "2.0.0-beta.242" # 原
	"vuepress-theme-hope": "file:lib/vuepress-theme-hope/packages/theme" # 修改成这样
	# "vuepress-theme-hope": "workspace:*"
}
$ pnpm i

# 运行
$ pnpm docs:dev

# 然后这里会出现一个错误，说找不到 /node_modules/vuepress-theme-hope/lib/node/index.js (lib文件夹没有)
# 我查看了一下我的 ./lib/vuepress-theme-hope/packages/theme 路径，里面是有lib文件夹的
# 然后我将lib文件夹复制到 /node_modules/vuepress-theme-hope/ 重新运行 pnpm docs:dev 就能成功运行了

修改流程（这里最好在VSCode里备两个控制台，避免来回跳转）

# 修改主题子项目代码后

# /lib/vuepress-theme-hope
$ pnpm build
$ cp -r packages\theme\lib\ ..\..\node_modules\vuepress-theme-hope\

# /
$ pnpm docs:dev

流程改良版 - pnpm-workspace管理monorepo

需要加一个 pnpm-workspace.yaml 文件，内容加上：

packages:
  - packages/*
  - lib/vuepress-theme-hope/demo/*
  - lib/vuepress-theme-hope/docs/*
  - lib/vuepress-theme-hope/docs-shared/
  - lib/vuepress-theme-hope/packages/*

然后修改 package.json

"devDependencies": {
	"vuepress-theme-hope": "workspace:*"
}

修改后更新，这里可以创建三个命令行

# cd \lib\vuepress-theme-hope\packages\theme 在修改的模块里运行就行了，不需要在 \lib\vuepress-theme-hope
$ pnpm build # 这一句就够了，不需要在主项目重新执行 pnpm docs:dev，会自动更新的

流程再改良 - 使用组件替换（由主题提供的功能）

（但是我修改的地方好像超出了sidebar范围，不知道还能不能用这个）

详见：https://theme-hope.vuejs.press/zh/guide/advanced/replace.html#%E6%9B%BF%E6%8D%A2%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E5%BC%8F

// .vuepress/config.ts
import { getDirname, path } from "@vuepress/utils";
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

const __dirname = getDirname(import.meta.url);

export default defineUserConfig({
  theme: hopeTheme(
    {
      // 主题选项
      // ...
    },
    { custom: true },
  ),

  alias: {
    // 你可以在这里将别名定向到自己的组件
    // 比如这里我们将主题的主页组件改为用户 .vuepress/components 下的 HomePage.vue
    "@theme-hope/components/HomePage": path.resolve(
      __dirname,
      "./components/HomePage.vue",
    ),
  },
});

可以支持的别名如下：

# 具体查链接
...
# 组件:
@theme-hope/modules/sidebar/components/Sidebar 侧边栏
@theme-hope/modules/sidebar/components/SidebarChild 侧边栏链接子项
@theme-hope/modules/sidebar/components/SidebarGroup 侧边栏分组链接
@theme-hope/modules/sidebar/components/SidebarLinks 侧边栏链接
# 杂项:
@theme-hope/modules/sidebar/composables/index 侧边栏可组合 API
@theme-hope/modules/sidebar/utils/index 侧边栏通用函数

但还是需要子项目，否则虽然能用但有bug （import scss时失效）

最终版

  1. 配置：workspace + 子项目
  2. 修改：别名？
  3. 运行：子项目编译 + 父项目编译
  4. 后续修改：修改替换组件 + 孙子项目编译 + 父项目编译

设置修改项

源码修改项

链接到当前文件 0
没有文件链接到当前文件