一个简约风的VitePress博客主题

12,156 阅读2分钟

前言

笔者的博客之前是使用 VuePress + reco主题

随着博客文章数量越来越多(md文件已经300+了),博客本地启动和构建越来越来慢了emmm

恰好此时 VitePress 也相对成熟了(1.x alpha),就萌生了迁移到 VitePress 的想法

其相比 VuePress 更加的简洁,可玩性强,上手成本也低,由 Vite 加持体验也是非常不错。

按照官方的给的定位,VitePress 只提供一些基础主题API,所有定制都在自己的主题里完成(个人感觉就像Hexo丰富多彩的主题一样),不提供插件系统

笔者在进行博客迁移的时候,将主题包分离了出来,可供单独使用

新旧对比

新旧博客对比

风格借鉴了 reco掘金surmon等等,组件部分用了 element-plus

下面介绍食用指南(主题实现内容比较多,后面单开一个专栏介绍 😋嘿嘿!)

快速体验

只需3步,即可体验

image.png

① 拉取 Github 模板

npm create @sugarat/theme@latest
cd my-blog

② 安装依赖

pnpm install

③ 启动

pnpm dev

就能得到如下的页面

已支持功能

介绍一下主要的,非所有,详见主题文档

  • 博客首页
    • 文章列表
    • 精选文章
    • 友链
    • 标签分类
  • 图片预览
  • 搜索(标题+简介)
  • giscus 评论系统
  • 推荐文章(同目录)
  • 阅读时间计算
  • 全局的提示弹窗 (由 el-alert 驱动)
  • 全局的公告弹窗,支持设置图片,文字,按钮
  • 全文搜索
  • ...

规划中功能

  • Valine 评论系统
  • 文章合集
  • 更多可定制的主题样式
  • RSS
  • 。。。

最后

读者有建议的 功能&想法 欢迎 私信&评论区 交流