My Docs

Appearance

新增插件示例 ​

本页演示新接入的 7 个插件。带 实时渲染 的可直接看到效果；带 构建期 的在 docs:build 时生效（生成文件或全局行为）。

插件作用类型
@vitepress-plugin/markmapMarkdown → 交互式脑图实时渲染
vitepress-plugin-tabs选项卡容器实时渲染
vitepress-demo-plugin代码 Demo 实时预览实时渲染
vitepress-plugin-nprogress路由切换顶部进度条全局
vitepress-sidebar自动生成侧边栏全局
vitepress-plugin-llms生成 llms.txt构建期
vitepress-plugin-rss生成 feed.rss构建期

关于包名

你最初要求的 vitepress-plugin-markmap 在 npm 上并不存在，真正的 markmap 插件包名是 @vitepress-plugin/markmap，本项目已按正确包名安装。

1. markmap 脑图 ​

语法说明：用 :::markmap 容器包裹一段标准 Markdown 大纲（# 标题 + 列表层级），即可渲染成可缩放、可折叠的交互式脑图。容器顶部可用 YAML frontmatter 覆盖高度、颜色、初始展开层级等。

示例写法：

md
:::markmap
---
containerHeight: 420
markmap:
  initialExpandLevel: 2
---
# VitePress
## 特性
- 基于 Vite
- Vue 驱动
- Markdown 优先
## 插件
- Mermaid
- markmap
- tabs
## 部署
- GitHub Pages
- Cloudflare
- Vercel
:::

实际效果：

2. tabs 选项卡 ​

语法说明：用 :::tabs 容器 + == 标签名 分隔多个面板，把并列内容（如不同包管理器、不同语言）折叠进选项卡，避免页面过长。

示例写法：

md
::: tabs
== pnpm
```sh
pnpm add vitepress
```
== npm
```sh
npm i vitepress
```
:::

实际效果：

安装命令：pnpm add vitepress

3. demo 代码预览 ​

语法说明：vitepress-demo-plugin 用 <demo> 组件把一个真实的 .vue / .tsx / .html 文件同时渲染为「实时效果 + 可展开源码」，非常适合组件库文档。

示例写法：

md
<demo vue="./demos/hello.vue" title="计数器" />

实际效果：

loading

4. nprogress 进度条 全局 ​

语法说明：无需任何 Markdown 语法。在 theme/index.ts 的 enhanceApp 里调用一次，路由切换时页面顶部会出现加载进度条。

示例写法（docs/.vitepress/theme/index.ts）：

ts
import vitepressNprogress from 'vitepress-plugin-nprogress'
import 'vitepress-plugin-nprogress/lib/css/index.css'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    vitepressNprogress(ctx)
  },
}

实际效果：点击左侧任意其它页面，观察浏览器视口顶部出现的细长进度条。

5. sidebar 自动侧边栏 全局 ​

语法说明：vitepress-sidebar 用 withSidebar() 包裹配置，按目录结构自动生成侧边栏，标题优先取每个页面的 H1。你现在看到的左侧菜单就是它自动生成的——本页 new-plugins 也是自动出现的，无需手写。

示例写法（docs/.vitepress/config.mts）：

ts
import { withSidebar } from 'vitepress-sidebar'

const sidebarOptions = ['guide', 'java', 'ai', 'showcase'].map((section) => ({
  documentRootPath: 'docs',
  scanStartPath: section,
  resolvePath: `/${section}/`,
  useTitleFromFileHeading: true,
  collapsed: false,
}))

export default withMermaid(withSidebar(vitePressOptions, sidebarOptions))

实际效果：左侧「Showcase 示例」分组下自动列出本目录所有页面。

6. llms 文档 构建期 ​

语法说明：vitepress-plugin-llms 在构建时生成符合 llmstxt.org 标准的 llms.txt（索引）与 llms-full.txt（全文合并），方便 AI/LLM 抓取你的文档。零配置即可用。

示例写法（docs/.vitepress/config.mts）：

ts
import llmstxt from 'vitepress-plugin-llms'

export default defineConfig({
  vite: {
    plugins: [llmstxt()],
  },
})

实际效果：执行 pnpm docs:build 后，产物目录会生成 /llms.txt 和 /llms-full.txt（本地 docs:dev 下可能不可见，需构建后访问）。

7. rss 订阅 构建期 ​

语法说明：vitepress-plugin-rss 在构建时读取各页面 frontmatter（title / date / description / author / category / cover），生成 feed.rss，并自动在导航栏加上 RSS 图标。

示例写法（docs/.vitepress/config.mts）：

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

const RSS: RSSOptions = {
  title: 'My Docs',
  baseUrl: 'https://example.com',
  copyright: 'Copyright © 2026 My Docs',
}

export default defineConfig({
  vite: { plugins: [RssPlugin(RSS)] },
})

页面 frontmatter 示例：

md
---
title: 我的第一篇文章
date: 2026-01-15
description: 一篇关于 RSS 的介绍
author: chenzw
---

实际效果：pnpm docs:build 后生成 /feed.rss。记得把配置里的 baseUrl 换成你的正式域名。