看 vue-macros 官网时，看到比较有意思的代码提示功能，才知道是用了 twoslash 功能。
它是用的 @shikijs/vitepress-twoslash 插件，但是本主题是 vuepress 而不是 vitepress，有点遗憾。

不过，看了下 @shikijs/vitepress-twoslash 的代码，貌似跟 vitepress 没有太大关系，随尝试在 vuepress 里导入一下试试。

现象

开发模式下，文章排序没问题，CI（Github Actions/Vercel） 发布后文章排序不对，并且时间线也不对。

调查

查看 vuepress-theme-hope 后，发现默认按 frontmatter.date 和 git 创建时间排序。

posts 下的文章都指定了 date，没有问题；而 notes 下的笔记都没有指定 date，想定按 git 创建日期显示，但是貌似按 git 最后更新时间，或者发布时间显示了。

让你的 VuePress 站点中的 Markdown 文件支持 Sandpack 类似的代码案例。

缘由

手头的项目刚刚收尾，看知乎一个 React 和 Vue 撕逼问题时，里面提到了最新的 React 的一些新特性，也附上了 React 新的官网 react.dev . 出于好奇点了进去，然后看到了官网的可交互示例，觉得不错，然后看了下源代码，发现是使用的 sandpack-react。
看了下 sandpack 官网，感觉功能挺强大的，集成到 vuepress 里做代码演示很不错。

如果想要文章分两栏来展示的话，可以借助 CSS 的 columns 来完成。

为了方便直接使用，做了一个 css 文件。

起因是为了方便管理文章，将文章按目录存放，但是这样存放后，地址栏和导航栏会自动多一层路径。

如果启用了 AutoCatalog 功能的话，会自动显示目录，不开启的话，显示会有问题。
AutoCatalog 显示的目录不太符合文章的风格，想做成显示文章列表的样子，于是就写了 AutoArticles 功能。
同时，验证了一下自定义布局的功能。

自定义布局

为了在文章目录下显示文章列表，默认的布局无法实现，因此需要自定义布局。

自定义布局，需要在 client.ts 中加入自己的布局。

本插件用来显示 gitlab 作为版本管理的 vuepress-theme-hope 项目的贡献者。

初衷

公司领导想提高效率，征集经验集，工具集以方便大家使用，于是就用 vuepress-theme-hope 搭了个简单的知识库。
再配合 waline 加上了评论功能。

由于是内网环境，所以在公司的 gitlab 服务器上建了一个 git 仓库。
为了鼓励大家积极踊跃地分享，写了个 GitlabContributors 组件，在主页上显示贡献者头像。

后来，又在每个页面上写了一个当前页的贡献者组件 PageGitlabContributors。

让你的 VuePress 站点中的 Markdown 文件支持 Vue SFC Playground 类似的代码案例。

同时支持外置和内置两种模式：

• 外置模式，通过嵌入iframe的形式来引入 playground.
• 内置模式，通过@vue/repl直接渲染出来 playground.

比 v1 更强大。

让你的 VuePress 站点中的 Markdown 文件支持 Vue SFC Playground 类似的代码案例。

与 v2 相比，重写了 Markdown 插件的逻辑，减少 container 嵌套。

使用 @file, @imports, @settings 来代替原来的 ::: file, ::: imports, ::: settings, 其他未变。

本站使用功能强大的 vuepress-theme-hope 主题，主题简洁，markdown 插件功能丰富。
同时，vuepress-theme-hope 提供了完善的文档，以及 QQ 交流群，作者 Mr.Hope 更新频率高，问题反馈处理也很及时。

使用 vuepress-theme-hope 时，发现了一些小问题，自己重写了一点 css，根据文档可以替换组件，或者继承主题实现自己的主题。
最开始修改过的导航栏跟博主信息的间距问题，文章置顶图标，已经提过 PR 不需要再自定义了。
下面介绍一下自定义的部分。

让你的 VuePress 站点的 Markdown 文件支持 ECharts 图表。

使用本插件时，需要自己安装 echarts 依赖，本插件会将 echarts 加到 optimizeDeps 中。
另外，本插件使用了 vueuse，用来做宽度自适应。