【🔥持续更新】 VitePress资源推荐

TIP

先用markdown记录一下，后续整理成独立卡片组件

欢迎大家贡献 🎉🎉🎉！！！

社区：awesome-vitepress

定制站点

@sugarat/theme

笔者自己的博客主题，详细就不展开了。

支持 npm 一键创建模板。

npm create @sugarat/theme@latest

GitHub: ATQQ/sugar-blog

查尔斯的知识库

基于 VitePress 打造的知识库。

常规首页	标签页

直接在 VitePress 项目里拓展的配置，没有分离，但项目已经内置了许多功能和功能页。

GitHub: Charles7c/charles7c.github.io

vitepress-blog-zaun

基于 VitePress 打造的博客项目，UI还是很漂亮的。

GitHub: clark-cui/vitepress-blog-zaun

Vue 博客

Vue 官方博客。

完全自定义了主题，非常简洁。

GitHub: vuejs/blog

Vue3 文档

Vue3 官方文档也是基于 VitePress 构建的。

其独立主题包为 @vue/theme

vitepress-blog-pure

一个非常简洁美观的博客项目。

自定义了首页，文章页等样式，同时提供独立时间线和标签页。

GitHub: airene/vitepress-blog-pure

harlanzw.com-vitepress

很漂亮的博客，简洁美观，有设计感。

但博客用的 vitepress 版本是 0.x 和最新的相比API变化较大。

GitHub: harlan-zw/harlanzw.com-vitepress

VitePress教程文档

VitePress 简中文档站，内部有许多已集成的插件。

GitHub: Yiov/vitepress-doc

VitePress插件

拓展功能

mermaid - 流程图

基于 mermaid 实现的 md 流程图插件。

rss - 订阅链接生成

给 vitepress 提供 RSS 订阅源链接生成支持。

51la - 网站统计分析

提供一键接入 51.LA 网站数据统计分析的功能。

announcement - 公告

提供全局公告窗口。

group-icons - 分组图标

分组代码块提供不同的图标样式。

搜索

flexsearch

基于 flexsearch 实现的离线全文搜索插件。

pagefind

基于 pagefind 实现的离线全文搜索插件。

易用性提升

vitepress-plugin-autobar

根据目录结构自动生成 sidebar 信息。

import { getSideBar } from 'vitepress-plugin-autobar'

module.exports = {
  // ...
  themeConfig: {
    // ...
    sidebar: getSideBar('./docs'),
  },
}

TODO：wait a moment