记录 VitePress 默认主题提取

记录 VitePress 默认主题提取

VitePress 是一个面向静态内容站点的构建工具,支持 Markdown 撰文,其自带了一套面向技术文档的主题,也可以使用自定义主题。该主题并不总是能满足所有需求,而且其集成在 VitePress 之中,直接对其进行的修改无法被同步到 git 仓库(node_modules/ 肯定在 .gitignore 内,除非你想爆了你的远程仓库)

你可以在VitePress使用自定义主题,也可以通过丰富的API扩展默认主题。出现提取默认主题的情况,可能是不想从零写一套主题,或者是希望对主题有更底层的把控,又或者是希望开发过程更符合直觉。

提取它并不困难,只需找到它,把它拷到自定义主题路径,然后同自定义主题导入即可。

提取再导入后成功通过编译

找到默认主题位置

参见 VitePress 自定义主题

//.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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇