Vuepress Theme Hope 主题默认启用文章分类功能，该功能通过 FrontMatter 中的 category 字段来识别不同类别。如果我希望为文章添加分类就需要维护每篇文章的 category 字段。如果我将这篇文章放在 Web 分类下，一个月后忘记自己设置过 Web 分类，需要翻阅过去的内容，要么重新命名一个 「前端」分类。

代码块组件主要用于显示 Vagrantfile 模版，而 Vagrantfile 中的实际内容其实是 Ruby 脚本。使用 highlight.js 对模版内容进行高亮展示能够提供更好的用户体验。另外还需要拷贝模版和下载模版的需求。

安装依赖和配置

安装 highlight.js 和 @highlightjs/vue-plugin

yarn add highlight.js @highlightjs/vue-plugin

网络教程和一些书籍上提供的组件库多以 Element Plus 为主。了解 TailwindCSS 之后发现它更符合我的品味，另外还发现了 Tailwind Plus 替代 —— Shadcn-Vue。

图标库使用 AI 推荐 lucide-vue-next，话又说回来 Shadcn-Vue 自带的也许省事儿点。

TailwindCSS 配置

TailwindCSS 提供一组原子化的 CSS 样式类来构建复杂的 UI 组件，这些原子化的样式涵盖了布局、字体、动画、交互和响应式布局，还有主题配置等等内容。用得好的话，会非常强。

根据官方文档，使用 Vue3 脚手架能够很轻松地搭建起 Vue 项目。唯一遇到的问题就是 yarn 对 node module 处理方式上的问题（如果使用其他包管理工具请忽略）。

yarn4+ 默认使用 PnP 模式来处理 node modules ，但是这样在执行 package.json 的脚本和 IDE 错误提示都存在问题。最简单的解决方法就是——在项目根目录下添加 .yarnrc.yml 文件并添内容如下：

nodeLinker: node-modules

vboxes-ui 是 vboxes 服务的网页 UI 负责展示从 vboxes 服务请求到的环境数据。而 vboxes 通过分析目录下的所有 .box 文件并将其归类到不同的环境当中去，然后提供不同的接口供网页的数据查询与展示、Vagrant CLI 的数据请求和 .box 文件下载。

vboxe-ui 采用的是 Vue3 框架，配合 Schade-Vue 和 TailwindCSS 的组件与样式创建的一个简单前端网页，目前还处在开发中。

完整项目开发周期可能持续一个月以上，设置一些关键节点能够很好的维持项目的推进。比如完成 vboxes 关键接口或完成 vboxe-ui 创建（等待接口测试）等等。设置节点也方便记录与总结。一口气完成中大型的项目的开发目前来看有点吃力，不仅考验耐力也考验体力[汗]。

在此之前博客关于页内容始终是空白的，刚好自己也有查看博客改进记录的想法。「Vuepress Theme Hope」主题中的时间线功能仅展示文章发布历史，但是我希望能够看到博客修改记录（也就是 Git 提交历史），方便我快速浏览整个网站所做的修改。虽然 Gitea 本来就可以查看历史，但是把需要关注的内容收集到一块岂不更好？同时还能填补关于页的空白，何乐不为？

插件开发

在 .vuepress 目录里创建 plugins 目录用于存放所有的插件目录（目前只有一个）。然后创建 git-history 目录，这个目录里所有文件便是该插件的全部内容了。完成后的目录结构如下：

上一篇提到 plugin-git 获取 git 子模块信息时，不能正确获取时间问题。于是根据源码对 plugin-git 插件进行一番修改之后，成功获取文章的修改时间信息。在此对 yarn 补丁功能的使用做些记录。

Yarn 补丁相关的命令

为某个软件包创建补丁，支持二级包名，比如 @vuepress/plugin-git 。它会提取软件包中的文件到临时目录，用户在临时目录修改之后，使用 patch-commit 子命令提交修改。

yarn patch <package>

使用 Gitea Actions 来自动化部署 Vuepress 二月份已经整理出来，但部署的时候一直存在文章修改时间在同一天的问题。

另外 Vuepress 中的 plugin-git 插件是不能够获取 git 子模块中的文件修改时间，只能自己查看源码，打补丁。Vuepress 初始设计也许就没有计划给文档的内容独立出一个（私有）版本仓库，可是我希望将博客的主体框架和内容分开，于是只好自己实现了。第一版修改的内容如下