vitepress-theme-mochi

vitepress-theme-mochi 为自己设计的一个 vitepress 主题, 废话不多说, 这里是博客地址与项目地址。

主题展示

样式布局参考了 vuepress-theme-reco, 截图如下：

顶部区域和 vitepress 保持一致, 随机的一张图片作为初入博客背景, 配合一个打字机特效, 打字机打完字后会隐藏。

往下拉是博客列表和个人信息, 列表按照时间排序, 下面是分页组件和跳转组件, 值得一提的是, 背后还有梅花特效与悬挂喵组件。

点击博客文章进入文章页面, 其中英文字体换成了 Source Code Pro 。

图片点击后可放大预览。

当文章含有菜单和大纲时, 还可以隐藏菜单与大纲, 下面是隐藏的效果图。

其它的还有时间线与分类列表和标签列表, 如下所示：

整体大致如此, 但是主题还兼容了黑暗模式和移动端。

使用主题

克隆代码将 docs 文件夹下以 _ 开头的文章文件夹删除, 然后参考 vitepress 将配置换成自己的即可。

然后就可以在 vitepress-theme-mochi 基础上开发自己想要的功能, 如评论等。

总结

由于此主题初衷只是开发给自己使用, 不具有普适性, 内部封装与暴露的东西也有限。想用的小伙伴可借鉴开发属于自己的主题。

未来如果有时间和精力可考虑重构并丰富功能。