vitepress

是什么

vitepress 是一款静态网站构建工具，支持从 markdown 生成静态网站。

为什么

在博客启动前，对比了 vitepress, astro, qwik。都支持文件结构即路由。

astro 的问题是，在 md 中嵌入复杂组件时，集成方式过于复杂。

qwik 的问题则在其无法使用 vue/react 等通用组件，而是自己又用了一套组件。当然也有其优势，能更好地控制 js 数量，实现秒加载。

vitepress 能方便地集成 vue 组件，成了首选项。

如何使用

○ 使用 emoji

语法：:tada:，对应：🎉

参考：emoji 完整缩写列表

○ 添加评论

通过 utterances（GitHub App）注入评论能力，无需显式填写类似 token 的敏感信息

○ 构建出错：window/localStorage 等未定义

vitepress 只能识别 node 相关的全局变量。如用到浏览器相关全局变量，可在组件使用时，用 <ClientOnly></ClientOnly> 包裹，表示客户端中解析执行，则不再提示构建出错

○ 添加图片

直接添加（不用加到 public 目录），后续构建会自动存放到 assets 文件夹

参考

• Vitepress
• 子卿全栈系列💯
• 使用 Utterances 给 VitePress 添加评论功能|无声2017的博客，博客中有 Vue2/3 的一些使用经验
• giscus，类似 utterances