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

TIP

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

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

博客主题

@sugarat/theme

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

支持 npm 一键创建模板。

npm create @sugarat/theme@latest

查尔斯的知识库

基于 VitePress 打造的知识库。

常规首页	标签页

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

通过 clone 仓库二次修改即可。

git clone https://github.com/Charles7c/charles7c.github.io.git

vitepress-blog-zaun

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

可通过拉取仓库模板创建。

npx degit clark-cui/vitepress-blog-zaun my-vitepress-blog

Vue 博客

Vue 官方博客。

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

直接 clone 二次修改即可。

git clone https://github.com/vuejs/blog.git

Vue3 文档

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

其独立主题包为 @vue/theme

vitepress-blog-pure

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

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

克隆仓库食用。

git clone https://github.com/airene/vitepress-blog-pure.git

harlanzw.com-vitepress

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

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

git clone https://github.com/harlan-zw/harlanzw.com-vitepress.git

VitePress插件

拓展功能

vitepress-plugin-mermaid

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

// .vitepress/config.js
import { withMermaid } from 'vitepress-plugin-mermaid'

export default withMermaid({
  // your existing vitepress config...
  mermaid: {
    // mermaidConfig !theme here works for ligth mode since dark theme is forced in dark mode
  },
})

vitepress-plugin-rss

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

import { RSSOptions, RssPlugin } from 'vitepress-plugin-rss'

const baseUrl = 'https://sugarat.top'
const RSS: RSSOptions = {
  title: '粥里有勺糖',
  baseUrl,
  copyright: 'Copyright (c) 2018-present, 粥里有勺糖',
}

export default defineConfig({
  vite: {
    // ↓↓↓↓↓
    plugins: [RssPlugin(RSS)]
    // ↑↑↑↑↑
  }
})

搜索

vitepress-plugin-search

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

import { SearchPlugin } from 'vitepress-plugin-search'
import { defineConfig } from 'vitepress'

// default options
const options = {
  ...flexSearchIndexOptions,
  previewLength: 62,
  buttonLabel: 'Search',
  placeholder: 'Search docs',
  allow: [],
  ignore: [],
}

export default defineConfig({
  vite: { plugins: [SearchPlugin(options)] }
})

vitepress-plugin-pagefind

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

import { defineConfig } from 'vitepress'
import { pagefindPlugin } from 'vitepress-plugin-pagefind'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  vite: {
    plugins: [pagefindPlugin()],
  }
})

易用性提升

vitepress-plugin-autobar

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

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

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

TODO：wait a moment

markdown-it 插件

TODO：wait a moment