VitePress 是一个面向静态内容站点的构建工具,支持 Markdown 撰文,其自带了一套面向技术文档的主题,也可以使用自定义主题。该主题并不总是能满足所有需求,而且其集成在 VitePress 之中,直接对其进行的修改无法被同步到 git 仓库(node_modules/ 肯定在 .gitignore 内,除非你想爆了你的远程仓库)
你可以在VitePress使用自定义主题,也可以通过丰富的API扩展默认主题。出现提取默认主题的情况,可能是不想从零写一套主题,或者是希望对主题有更底层的把控,又或者是希望开发过程更符合直觉。
提取它并不困难,只需找到它,把它拷到自定义主题路径,然后同自定义主题导入即可。

找到默认主题位置
从 //.vitepress/theme/index.ts 可以看出,默认主题在 //node_modules/vitepress/ 之中,不过这个目录不像是主题文件。
经过一些不那么优雅的查找,特别是参阅了官方文档的这个部分指向的“源代码”后,发现 //node_modules/vitepress/dist/client/theme-default/ 应该是主题文件夹。
提取到可控路径
复制 theme-default/,通过修改 index.ts 的引用 import DefaultTheme from 'vitepress/theme' 至 import DefaultTheme from './theme-default',将其按自定义主题导入之后,打开调试报错:

大意是缺少 theme-default/ 上级目录的 shared.js 文件。
于是将其拷贝至正确相对路径后,震撼我妈,it works!想象中的依赖地狱并没有出现。
下一步:修改主题
得到源代码,主要是修改。比如,可以让主题适配自定义的 Markdown 之 frontmatter,实现更丰富的页面表现,或者是添加自定义的 template 组件,适配更加个性化的需求,等等……
最后,别问本站为何采用 WordPress






