一个简约风的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还在施工中)
1125 0
|
存储 JavaScript 编译器
玩转vitepress1.0,搭建个人网站~
当初1月份的时候为了后续春招求职,就使用vitepress搭建了一个个人网站,然后把自己本地的一些md文件整理了发布在了上面,不过当时vitepress还未发布正式版本,还是0.22.x这样的版本, 所以其实有很多不满意的地方,比如侧边栏折叠之前没有,明暗模式之前没有,单篇文章的大纲好像也没有,侧边栏在不同tab下有问题,这些我不太确定,可能功能是有的,但是官方文档上没更新罢了
927 0
|
算法 安全 数据安全/隐私保护
C/C++学习 -- RSA算法
C/C++学习 -- RSA算法
376 0
|
安全 网络安全 数据安全/隐私保护
|
3月前
|
测试技术 API
小而强,GLM-4.7-Flash开源
GLM-4.7-Flash正式开源,30B总参、3B激活参数,兼顾性能与效率,支持免费调用。在编程、中文写作、翻译等多场景表现优异,已上线智谱平台,替代GLM-4.5-Flash,提供全新轻量化部署选择。
1513 1
|
iOS开发 MacOS Windows
electron-updater实现electron全量版本更新
electron-updater实现electron全量版本更新
2656 9
electron-updater实现electron全量版本更新
|
编解码 虚拟化 Windows
Hyper分辨率调整是确保虚拟机图形表现符合期望的重要步骤,怎么调呢
在Hyper-V中调整虚拟机分辨率是确保图形表现符合预期的重要步骤。首先,通过增强会话模式调整:打开Hyper-V管理器,启用增强会话模式,启动虚拟机后在桌面右键选择“屏幕分辨率”进行设置。其次,在虚拟机内部(Windows系统)右键点击桌面空白处,选择“显示设置”,调整分辨率并应用更改。注意事项包括:确保安装Hyper-V集成服务、以管理员权限操作、注意虚拟机类型兼容性、检查显卡驱动并备份数据。这些步骤能帮助你顺利完成分辨率调整。
|
JavaScript 前端开发 Shell
使用vitepress搭建自己的静态个人博客 || 个人知识库
使用vitepress搭建自己的静态个人博客 || 个人知识库
458 0
|
前端开发 Java Apache
Springboot整合shiro,带你学会shiro,入门级别教程,由浅入深,完整代码案例,各位项目想加这个模块的人也可以看这个,又或者不会mybatis-plus的也可以看这个
本文详细讲解了如何整合Apache Shiro与Spring Boot项目,包括数据库准备、项目配置、实体类、Mapper、Service、Controller的创建和配置,以及Shiro的配置和使用。
3428 2
Springboot整合shiro,带你学会shiro,入门级别教程,由浅入深,完整代码案例,各位项目想加这个模块的人也可以看这个,又或者不会mybatis-plus的也可以看这个
|
缓存 搜索推荐 前端开发
《VitePress 简易速速上手小册》第6章 性能优化与 SEO(2024 最新版)
《VitePress 简易速速上手小册》第6章 性能优化与 SEO(2024 最新版)
813 1

热门文章

最新文章