卡片标题
卡片内容
外观
约 5014 字大约 17 分钟
2026-03-19
本文档详细整理自 vuepress-theme-plume 官方文档,涵盖所有 Markdown 扩展语法和写作功能。
以下功能默认不启用,需在 .vuepress/plume.config.ts 中开启:
markdown: {
mermaid: true, // Mermaid 图表
bilibili: true, // Bilibili 视频
collapse: true, // 折叠面板
timeline: true, // 时间线
chat: true, // 对话记录
plot: true, // 隐秘文本
qrcode: true, // 二维码
codeTree: true, // 代码树
abbr: true, // 缩写词
annotation: true, // 内容注释
field: true, // 字段容器
npmTo: true, // npm 命令转换
}使用 ::: type 包裹内容:
::: note 内容 :::
::: info 内容 :::
::: tip 内容 :::
::: warning 内容 :::
::: caution 内容 :::
::: details 点我展开 :::可自定义标题:
::: caution 危险操作
请勿随意尝试!
:::
::: details 点我看代码
```js
console.log('Hello!'):::
**输出效果:**
::: note
这是一个注释框
:::
::: info
这是一个信息框
:::
::: tip
这是一个提示框
:::
::: warning
这是一个警告框
:::
::: caution
这是一个危险警告框
:::
::: details 点我展开
这是一个详情折叠框
:::
---
### 1.2 GitHub 风格警报
```md
> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。
> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。
> [!IMPORTANT]
> 对用户达成目标至关重要的信息。
> [!WARNING]
> 因为可能存在风险,所以需要用户立即关注的关键内容。
> [!CAUTION]
> 行为可能带来的负面影响。输出效果:
注
强调用户在快速浏览文档时也不应忽略的重要信息。
提示
有助于用户更顺利达成目标的建议性信息。
重要
对用户达成目标至关重要的信息。
注意
因为可能存在风险,所以需要用户立即关注的关键内容。
警告
行为可能带来的负面影响。
使用 == == 进行标记:
vuepress-theme-plume 是一个 ==简洁美观== 的主题输出: vuepress-theme-plume 是一个 简洁美观 的主题
添加配色:
==一个提示=={.tip}
==一个警告=={.warning}
==一个错误=={.danger}
==重要内容=={.important}可用类型:
| 类型 | 语法 | 颜色 |
|---|---|---|
| default | ==文本== | 默认颜色 |
| info | ==文本=={.info} | 蓝色 |
| note | ==文本=={.note} | 黄色 |
| tip | ==文本=={.tip} | 绿色 |
| warning | ==文本=={.warning} | 橙色 |
| danger/caution | ==文本=={.danger} | 红色 |
| important | ==文本=={.important} | 紫色 |
懒加载动画模式:
markdown: {
mark: 'lazy', // 滚动到可视区域后再播放动画
}::: left
左对齐的内容
:::
::: center
居中的内容
:::
::: right
右对齐的内容
:::输出:
左对齐的内容
居中的内容
右对齐的内容
19^th^
H~2~O输出: 19th H2O
人生自古谁无死,留取丹心照汗青[^脚注1]。
[^脚注1]: 出自 宋·文天祥《过零丁洋》输出: 人生自古谁无死,留取丹心照汗青[1]。
# 使用自定义锚点 {#my-anchor}链接:[跳转](#my-anchor)
[[TOC]]::: file-tree
- docs
- .vuepress
- ++ config.ts # ++ 新增(绿色)
- -- page1.md # -- 删除(红色)
- README.md
- **Navbar.vue** # 加粗突出
- node/ # 目录末尾加 / 不展开子项
- … # … 占位符
:::
::: file-tree icon="simple" title="项目结构"
- src
- index.ts
- App.vue
:::输出:
docs
.vuepress
config.ts
page1.md
README.md
Navbar.vue
node
…
…
:::: steps
1. 步骤 1
```ts
console.log('Hello!')
```
2. 步骤 2
相关内容
3. 步骤 3
::: tip
提示容器
:::
::::输出:
步骤 1
console.log('Hello!')步骤 2
相关内容
步骤 3
提示
提示容器
::: tabs
@tab npm
npm 应该与 Node.js 被一同安装。
@tab:active pnpm
```sh
corepack enable
corepack use pnpm@8
```
@tab yarn
yarn 内容
:::
::: tabs#fruit
@tab:active 苹果
苹果内容
@tab 香蕉
香蕉内容
@tab 橙子
橙子内容
:::输出:
npm 应该与 Node.js 被一同安装。
corepack enable
corepack use pnpm@8yarn 内容
苹果内容
香蕉内容
橙子内容
::: collapse
* 标题 1
内容(标题与内容必须空一行)
* :+ 标题 2 # :+ 默认展开
内容
* 标题 3
内容
:::
::: collapse accordion # 手风琴模式
* 标题 1
内容
* 标题 2
内容
* 标题 3
内容
:::
::: collapse expand # 默认全部展开
* 标题 1
内容
* :- 标题 2 # :- 标记折叠
内容
* 标题 3
内容
:::输出:
标题 1
内容(标题与内容必须空一行)
标题 2 # :+ 默认展开
内容
标题 3
内容
标题 1
内容
标题 2
内容
标题 3
内容
标题 1
内容
标题 2
内容
标题 3
内容
::: timeline
* 节点一 time=2025-03-20 type=success
正文内容
* 节点二 time=2025-01-22 type=warning
正文内容
* 节点三 time=2025-01-22 type=danger icon=mdi:bookmark
正文内容
:::输出:
节点一 time=2025-03-20 type=success
正文内容
节点二 time=2025-01-22 type=warning
正文内容
节点三 time=2025-01-22 type=danger icon=mdi:bookmark
正文内容
水平方向:
::: timeline horizontal
* 节点一 time=2025-03-20
正文内容
* 节点二 time=2025-04-20 type=success
正文内容
* 节点三 time=2025-01-22 type=danger
正文内容
:::输出:
节点一 time=2025-03-20
正文内容
节点二 time=2025-04-20 type=success
正文内容
节点三 time=2025-01-22 type=danger
正文内容
两端对齐:
::: timeline placement="between"
* 节点一 time=2025-03-20 placement=right
正文内容
* 节点二 time=2025-04-20 type=success
正文内容
* 节点三 time=2025-01-22 type=danger placement=right
正文内容
:::输出:
节点一 time=2025-03-20 placement=right
正文内容
节点二 time=2025-04-20 type=success
正文内容
节点三 time=2025-01-22 type=danger placement=right
正文内容
节点类型:
| 类型 | 说明 |
|---|---|
info | 信息(默认) |
tip | 提示 |
success | 成功 |
warning | 警告 |
danger | 危险 |
caution | 注意 |
important | 重要 |
::: card title="卡片标题" icon="twemoji:astonished-face"
卡片内容
:::
:::: card-grid
::: card title="卡片1"
内容
:::
::: card title="卡片2"
内容
:::
::::输出:
卡片标题
卡片内容
卡片1
内容
卡片2
内容
::: flex center
| 列 1 | 列 2 | 列 3 |
| ----- | ----- | ----- |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
:::
::: flex between center
| 列 1 | 列 2 | 列 3 |
| ----- | ----- | ----- |
| 1 | 2 | 3 |
| 列 1 | 列 2 | 列 3 |
| ----- | ----- | ----- |
| 1 | 2 | 3 |
:::
::: flex around center
| 列 1 | 列 2 |
| ----- | ----- |
| 1 | 2 |
| 列 1 | 列 2 |
| ----- | ----- |
| 1 | 2 |
:::
::: flex gap="20" column
内容块1
内容块2
:::输出:
| 列 1 | 列 2 | 列 3 |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 列 1 | 列 2 | 列 3 |
|---|---|---|
| 1 | 2 | 3 |
| 列 1 | 列 2 | 列 3 |
|---|---|---|
| 1 | 2 | 3 |
| 列 1 | 列 2 |
|---|---|
| 1 | 2 |
| 列 1 | 列 2 |
|---|---|
| 1 | 2 |
::: demo-wrapper title="标题"
### 三级标题
这是示例容器中的内容。
:::
::: demo-wrapper

:::输出:
标题
这是示例容器中的内容。

::: card-masonry






:::
:::: card-masonry cols="{ sm: 1, md: 2, lg: 3 }"
::: card title="卡片1"
内容
:::
::: card title="卡片2"
内容(更多内容)
:::
::: card title="卡片3"
内容
:::
::::安装:npm install mermaid,启用 markdown.mermaid: true
```mermaid
graph TB
A --> B
subgraph one
A1 --> A2
end
subgraph two
B1 --> B2
end
one --> two
two --> C
```输出:
```sequence
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Alice->John: Yes... John, how are you?
```输出:
```class Animal Example
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
```输出:
```gantt
dateFormat YYYY-MM-DD
title 项目计划
section 设计
完成设计 :done, des1, 2024-01-06, 2024-01-08
进行中任务 :active, des2, 2024-01-09, 3d
未来任务 : des3, after des2, 5d
```输出:
```pie
"选项A" : 40
"选项B" : 35
"选项C" : 25
```输出:
```mindmap
root((VuePress))
Out of box
Default theme
Navbar
Sidebar
Darkmode
Search
Customize
Theme
Plume
Plugins
```输出:
```git-graph
commit id:"ash" tag:"abc"
branch hotfix
checkout hotfix
commit
checkout main
merge hotfix
```输出:
```state State Example
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
```输出:
```er Er Example
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
}
```输出:
```quadrant
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
```输出:
```xy
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500]
line [5000, 6000, 7500, 8200, 9500]
```输出:
```block
columns 3
前端 right 后端
space:2 down down
硬盘 left left 数据库
```输出:
支持的图表类型:
| 语言 | 类型 | 说明 |
|---|---|---|
mermaid | 流程图/时序图/甘特图等 | 通用 Mermaid |
sequence | 时序图 | 简写语法 |
class | 类图 | 简写语法 |
gantt | 甘特图 | 简写语法 |
pie | 饼图 | 简写语法 |
mindmap | 思维导图 | 简写语法 |
timeline | 时间线图 | 简写语法 |
git-graph | Git 图 | 简写语法 |
state | 状态图 | 简写语法 |
er | ER 图 | 简写语法 |
journey | 用户旅程 | 简写语法 |
c4c | C4 架构图 | 简写语法 |
sankey | 桑基图 | 简写语法 |
requirement | 需求图 | 简写语法 |
quadrant | 象限图 | 简写语法 |
xy | XY 坐标图 | 简写语法 |
block | 块图 | 简写语法 |
@[bilibili](BV1EZ42187Hg)
@[bilibili width="320px" ratio="9:16"](BV1zr42187eg)
@[bilibili p1](aid cid)
@[bilibili autoplay time="60"](bvid)参数说明:
| 参数 | 说明 | 示例 |
|---|---|---|
width | 视频宽度 | width="320px" |
ratio | 视频比例 | ratio="9:16" |
p1 | 分P视频 | @[bilibili p1](aid cid) |
autoplay | 自动播放 | @[bilibili autoplay](bvid) |
time | 开始时间 | time="60"(秒) |
@[qrcode](https://github.com/pengzhanbo/vuepress-theme-plume)
@[qrcode card title="vuepress-theme-plume"](https://github.com/pengzhanbo/vuepress-theme-plume)
@[qrcode svg width=200](vuepress-theme-plume)
::: qrcode title="宣州谢朓楼饯别校书叔云" card
弃我去者,昨日之日不可留。
乱我心者,今日之日多烦忧。
长风万里送秋雁,对此可以酣高楼。
蓬莱文章建安骨,中间小谢又清发。
俱怀逸兴壮思飞,欲上青天览明月。
抽刀断水水更流,举杯消愁愁更愁。
人生在世不称意,明朝散发弄扁舟。
:::输出:
@qrcode card title="vuepress-theme-plume"
参数说明:
| 参数 | 说明 | 默认值 |
|---|---|---|
card | 卡片样式 | false |
svg | SVG 格式 | false |
title | 二维码标题 | - |
align | 对齐方式 | left |
width | 二维码宽度 | 300 |
light | 背景色 | #ffffffff |
dark | 前景色 | #000000ff |
margin | 边距 | 2 |
level | 纠错等级 | M |
version | 二维码版本 | 自动 |
在 .vuepress/client.ts 中注册:
import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
export default defineClientConfig({
enhance: ({ app }) => {
app.component('Swiper', Swiper)
},
})<Swiper :items="['/img1.webp', '/img2.webp', '/img3.webp']" />
<Swiper :items="images" effect="cube" :height="400" />
<Swiper :items="images" mode="carousel" :slides-per-view="3" />
<Swiper :items="images" mode="broadcast" :height="200" mousewheel />效果参数:
| 参数 | 说明 | 可选值 |
|---|---|---|
effect | 轮播效果 | slide / fade / cube / coverflow / flip / cards |
mode | 轮播模式 | banner / carousel / broadcast |
delay | 间隔时间(ms) | 默认 3000 |
speed | 动画速度(ms) | 默认 300 |
loop | 是否循环 | true / false |
pauseOnMouseEnter | 悬停暂停 | true / false |
点击文章中的图片可放大预览。
忽略某些图片:
{.no-view}
{.ignore}
{no-view}!!鼠标悬停看到我了!!
!!点击看到我了!!{.click}
!!模糊效果!!{.blur}
!!遮罩层效果!!{.mask}
!!遮罩+点击!!{.mask .click}
!!模糊+悬停!!{.blur .hover}参数:
| 参数 | 说明 |
|---|---|
.hover | 鼠标悬停触发(默认) |
.click | 点击触发 |
.mask | 遮罩层效果(默认) |
.blur | 模糊效果 |
::: chat title="对话标题"
{:2025-03-24 10:15:00}
{用户A}
用户A的消息
{.}
本人的消息
{用户B}
用户B的消息
{.}
第二条本人消息
:::输出:
对话标题
用户A
用户A的消息
本人的消息
用户B
用户B的消息
第二条本人消息
语法说明:
| 标记 | 说明 |
|---|---|
{:时间} | 时间戳 |
{用户名} | 其他用户消息 |
{.} | 本人消息 |
::: code-tree title="Vue App" height="400px" entry="src/main.ts"
```vue title="src/components/HelloWorld.vue"
<template>
<div class="hello">
<h1>Hello World</h1>
</div>
</template>
```
```vue title="src/App.vue"
<template>
<div id="app">
<HelloWorld />
</div>
</template>
```
```ts title="src/main.ts"
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
:::
@[code-tree title="Collections 配置"](/.vuepress/collections)参数:
| 参数 | 说明 |
|---|---|
title | 代码树标题 |
height | 代码树高度 |
entry | 默认展开的文件路径 |
站点由 VuePress [+vuepress] 驱动。
[+vuepress]:
VuePress 是一个 [静态站点生成器](https://v2.vuepress.vuejs.org/) (SSG) 。
专为构建以内容为中心的站点而设计。同标签多个定义:
中国古代 **四大名著** [+名著] 家喻户晓。
[+名著]:
**《三国演义》:**
以三国时期的历史为背景...
[+名著]:
**《西游记》:**
讲述了唐僧师徒四人...
[+名著]:
**《红楼梦》:**
以贾、史、王、薛四大家族的兴衰...
[+名著]:
**《水浒传》:**
描写了北宋末年以宋江为首的108位好汉...输出:
中国古代 四大名著 家喻户晓。
```json title="package.json"
{
"name": "vuepress-theme-plume",
"version": "1.0.0"
}
```
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
```js{1,4,6-8}
export default { // Highlighted
data () {
return {
msg: 'Highlighted!'
}
}
}
```
```ts:line-numbers=2
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:no-line-numbers
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```输出:
{
"name": "vuepress-theme-plume",
"version": "1.0.0"
}export default {
data () {
return {
msg: 'Highlighted!'
}
}
}export default {
data () {
return {
msg: 'Highlighted!'
}
}
}const line2 = 'This is line 2'
const line3 = 'This is line 3'const line3 = 'This is line 3'
const line4 = 'This is line 4'```js
export default {
data() {
return {
msg: 'Focused!'
}
}
}
```
```js
export default {
data() {
return {
msg: 'Focused!'
}
}
}
```输出:
export default {
data() {
return {
msg: 'Focused!'
}
}
}export default {
data() {
return {
msg: 'Focused!'
}
}
}```js
export default {
data() {
return {
error: 'Removed',
warning: 'Added'
}
}
}
```输出:
export default {
data() {
return {
error: 'Removed',
warning: 'Added'
}
}
}```js
export default {
data() {
return {
error: 'Error',
warning: 'Warning'
}
}
}
```输出:
export default {
data() {
return {
error: 'Error',
warning: 'Warning'
}
}
}```ts
const msg = 'Hello'
console.log(msg) // prints Hello
```
```ts
const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo)
```输出:
const msg = 'Hello'
console.log(msg)const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo)```xml :whitespace
<catalog>
<book>
<title>Everyday Italian</title>
</book>
</catalog>
```
```js :whitespace=all
function foo( ) {
return 'Hello World'
}
```输出:
<catalog>
<book>
<title>Everyday Italian</title>
</book>
</catalog>function foo( ) {
return 'Hello World'
}```css :collapsed-lines
html {
margin: 0;
background: black;
height: 100%;
}
body {
margin: 0;
width: 100%;
height: inherit;
}
```
```css :collapsed-lines=5
html {
margin: 0;
background: black;
height: 100%;
}
body {
margin: 0;
}
```输出:
html {
margin: 0;
background: black;
height: 100%;
}
body {
margin: 0;
width: 100%;
height: inherit;
}html {
margin: 0;
background: black;
height: 100%;
}
body {
margin: 0;
}::: npm-to
```sh
npm install vuepress vuepress-theme-plume
```
:::
::: npm-to tabs="pnpm,yarn,npm,bun,deno"
```sh
npm ci
```
:::
::: npm-to
```sh
npm install && npm run docs:dev
```
:::输出:
npm install vuepress vuepress-theme-plumepnpm add vuepress vuepress-theme-plumepnpm install --frozen-lockfileyarn install --immutablenpm cibun install --frozen-lockfiledeno install --frozennpm install && npm run docs:devpnpm install && pnpm docs:dev支持的命令:
npm install / npm inpm run / npm run-scriptnpm initnpm createnpm uninstall / npm rm / npm remove / npm unnpm cinpxThe HTML specification is maintained by the W3C.
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
*[W3C]: World Wide Web Consortium输出:
The HTML specification is maintained by the W3C.
*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium
<!-- 导入整个文件 -->
<!-- #include-env-start: /home/runner/work/blog/blog/docs/notes/dev -->
# 示例片段文件
这是用于 `@include` 演示的占位文件。
包含多行内容供测试导入功能使用。
第 5 行
第 6 行
第 7 行
最后一行
<!-- #include-env-end -->
<!-- 导入指定行 -->
<!-- #include-env-start: /home/runner/work/blog/blog/docs/notes/dev -->
---
# 示例片段文件
<!-- #include-env-end -->
<!-- 导入前5行 -->
<!-- #include-env-start: /home/runner/work/blog/blog/docs/notes/dev -->
<!-- #include-env-end -->
<!-- 导入最后3行 -->
<!-- #include-env-start: /home/runner/work/blog/blog/docs/notes/dev -->
<!-- #include-env-end -->
<!-- 导入文件区域 -->
<!-- #include-env-start: /home/runner/work/blog/blog/docs/notes/dev -->
<!-- #include-env-end -->支持的语言:
HTML / Markdown / TS / JS / CSS / Less / Sass / Java / Python / C# / C/C++ / Bat / VB
:::: field-group
::: field name="theme" type="ThemeConfig" required default="{}"
主题配置
:::
::: field name="enabled" type="boolean" optional default="true"
是否启用
:::
::: field name="callback" type="(...args) => void" optional default="() => {}"
<Badge type="tip" text="v1.0.0 新增" />
回调函数
:::
::: field name="deprecated" type="string" deprecated
<Badge type="danger" text="v0.9.0 弃用" />
已弃用属性
:::
::::输出:
themeRequiredThemeConfig
{}
主题配置
enabledOptionalboolean
true
是否启用
callbackOptional(...args) => void
() => {}
回调函数
deprecatedDeprecatedstring
已弃用属性
@[caniuse](css-matches-pseudo)
@[caniuse baseline](css-matches-pseudo)输出:
安装:npm i @vuepress/shiki-twoslash,启用 codeHighlighter.twoslash: true
```ts twoslash
import { createHighlighter } from 'shiki'
const highlighter = await createHighlighter({
themes: ['nord'],
langs: ['javascript']
})
// ^?
```
```ts twoslash
// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
```常用标记:
| 标记 | 说明 |
|---|---|
^? | 提取类型 |
^^^ | 高亮范围 |
^| | 自动补全 |
// @filename | 声明文件 |
// ---cut--- | 剪切代码 |
// @showEmit | 显示编译输出 |
VuePress - <Badge type="info" text="v2" />
VuePress - <Badge type="tip" text="v2" />
VuePress - <Badge type="warning" text="v2" />
VuePress - <Badge type="danger" text="v2" />
VuePress - <Badge text="v2" color="#8e5cd9" bg-color="rgba(159,122,234,0.16)" />输出:
<LinkCard title="卡片标题" href="https://..." description="描述" />
<LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />
<LinkCard href="/">
<template #title>
<span style="color: red">自定义标题</span>
</template>
卡片内容
</LinkCard><ImageCard
image="/images/photo.webp"
title="阿尔凡齐纳灯塔"
description="位于葡萄牙南部海岸的美丽灯塔"
author="Andreas Kunz"
date="2024/08/16"
href="/"
/>::: file-tree / ::: collapse 使用无序列表 * 语法,不是 -coverStyle.ratio 在 frontmatter 中使用 / 分隔符(如 ratio: 16/9),避免使用 :::: qrcode 容器内文本过长可能导致二维码无法扫描material-symbols:home、mdi:github出自 宋·文天祥《过零丁洋》 ↩︎