一个简约风的VitePress博客主题

简介: 前言笔者的博客之前是使用 VuePress + reco主题随着博客文章数量越来越多(md文件已经300+了),博客本地启动和构建越来越来慢了emmm恰好此时 VitePress 也相对成熟了(1.x alpha),就萌生了迁移到 VitePress 的想法其相比 VuePress 更加的简洁,可玩性强,上手成本也低,由 Vite 加持体验也是非常不错。按照官方的给的定位,VitePress 只提供一些基础主题API,所有定制都在自己的主题里完成(个人感觉就像Hexo丰富多彩的主题一样),不提供插件系统

前言

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

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

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

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

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

image.png

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

新旧对比

image.png


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

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

快速体验

只需3步,即可体验

image.png

① 拉取 Github 模板

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

② 安装依赖

pnpm install

③ 启动

pnpm dev

就能得到如下的页面

image.png

已支持功能

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

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

规划中功能

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

最后

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

相关文章
|
自然语言处理 JavaScript 前端开发
使用Pagefind为VitePress文档添加离线全文搜索能力
前言 VitePress 相信大家都或多或少听说过或者用过了 默认 UI相比 VuePress2.x 好看,启动速度也快(由Vite驱动,当然VuePress也可以切换构建引擎至Vite) 做内容定制也相对简单,笔者的很多静态文档站点(使用VuePress1.x),文章内容多的时候启动非常的慢,于是就从之前的 VuePress 迁移到了 VitePress,并做了一个博客主题 @sugarat/theme => 之前也有过介绍一个简约风的VitePress博客主题 但是 VitePress 官方目前还没有内置开箱即用的搜索能力(相关PR还在施工中)
|
JavaScript
VUE3(十)生命周期及钩子函数
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
6401 0
VUE3(十)生命周期及钩子函数
|
算法 前端开发 开发工具
vitepress从0到1,让每个前后端小伙伴都拥有一个属于自己的博客
这篇文章详细介绍了如何从零开始使用VitePress搭建个人博客,包括项目初始化、配置美化及部署全流程。
|
JavaScript
搭建Vue3组件库:第四章 使用Vitepress搭建文档网站
文档建设一般会是一个静态网站的形式 ,这次采用 Vitepress 完成文档建设工作。 Vitepress 是一款基于Vite 的静态站点生成工具。开发的初衷就是为了建设 Vue 的文档。Vitepress 的方便之处在于,可以使用流行的 Markdown 语法进行编写,也可以直接运行 Vue 的代码。也就是说,它能很方便地完成展示组件 Demo 的任务。
1998 0
搭建Vue3组件库:第四章 使用Vitepress搭建文档网站
|
7月前
|
前端开发 搜索推荐
使用DeepSeek快速创建的个人网站
这是一份使用DeepSeek快速创建个人网站的10分钟指南。内容分为四个步骤:搭建基础架构(HTML框架)、设计核心内容区块(关于我、作品展示等)、快速配置样式(CSS美化页面)以及添加联系表单并部署到GitHub Pages。通过简单的代码和DeepSeek的智能辅助功能,用户可以轻松实现个性化调整,如更换主题色、增加模块或优化响应式设计。虽然整体流程简单高效,但可能因功能有限或美观度不足而需进一步扩展与改进。
607 11
|
iOS开发 MacOS Windows
electron-updater实现electron全量版本更新
electron-updater实现electron全量版本更新
1935 9
electron-updater实现electron全量版本更新
|
缓存 搜索推荐 前端开发
《VitePress 简易速速上手小册》第6章 性能优化与 SEO(2024 最新版)
《VitePress 简易速速上手小册》第6章 性能优化与 SEO(2024 最新版)
583 1
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
文本,vitepress两栏怎样设置,应用场景是每个导航都是单独的markdown文件
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来