Mihono Vitepress 模版

简体中文

English

简体中文

English

主题

样式与插件指南 ​

🕓 Under Renovation

The outdated content in this article is currently being renovated. The outdated sections may not apply to the latest version. Please discern carefully.

本文档是 CrychicDoc 中所有可用的 Markdown 功能的完整参考，包括文本格式化、容器插件和自定义 Vue 组件。

文本格式化扩展 ​

这些插件扩展了标准的 Markdown 语法，以支持更丰富的文本表示。

缩写词 (abbr) ​

用于为术语创建缩写。

示例

The HTML specification is maintained by the W3C.
md
*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification is maintained by the W3C.

上标与下标 (sup & sub) ​

用于创建角标。

示例

下角标：H2O 上标：19th
md
下角标：H~2~O
上标：19^th^

标记与插入 (mark & ins) ​

用于高亮和标记文本。

示例

VuePress Theme Hope 十分强大。 VuePress Theme Hope 十分 强大。
md
VuePress Theme Hope ==十分强大==。
VuePress Theme Hope ++十分++ 强大。

旁注标记 (ruby) ​

用于为字符添加旁注，常用于东亚语言。

示例

中zhōng国guó
md
{中国:zhōng|guó}

隐藏内容 (spoiler) ​

创建可以点击以显示的隐藏内容。

示例

VuePress Theme Hope 十分强大。
md
VuePress Theme Hope !!十分强大!!。

内容元素扩展 ​

这些插件用于创建特定的内容结构。

图片尺寸 (img-size) ​

允许在 Markdown 图片语法中直接指定图片的宽高。在图片替代文字后面添加 =widthxheight。

示例

Logo Logo Logo
md
![Logo =200x200](/logo.png)
![Logo =150x](/logo.png)
![Logo =x100](/logo.png)

待办清单 (todo) ​

创建 GitHub 风格的可勾选任务列表。

示例
  • 未完成的任务
  • 已完成的任务
md
- [ ] 未完成的任务
- [x] 已完成的任务

多选题 ​

markdown
[?] Your question goes here?
[ ] Wrong answer option
[x] Correct answer option (marked with 'x')
[ ] Another wrong answer option
[ ] Yet another wrong answer option
Your question goes here?

容器插件 ​

容器插件使用 ::: 语法来创建具有特殊样式或功能的块级内容。

对齐容器 (align) ​

用于控制内容的水平对齐方式。

示例

左对齐的内容

居中的内容

右对齐的内容

两端对齐的内容
md
::: left
左对齐的内容
:::

::: center
居中的内容
:::

::: right
右对齐的内容
:::

::: justify
两端对齐的内容
:::

选项卡 (tabs) ​

创建可以在多个面板之间切换的选项卡。

标签选项卡

a content
md
:::tabs key:ab
== tab a
a content
== tab b
b content
:::

步骤组 (stepper) ​

创建一个视觉上表示连续步骤的选项卡。

示例
md
::: stepper
@tab 第一步
这是第一步
@tab 第二步
这是第二步
:::

卡片 (card) ​

创建带有多种样式的卡片容器，可以包含标题和副标题。

示例
md
:::text 标题#副标题
这是text样式
:::
:::flat 只有标题
这是flat样式
:::
:::elevated #只有副标题
这是elevated样式
:::
:::tonal 标题#副标题
这是tonal样式
:::
:::outlined
这是outlined样式，没有标题和副标题
:::
::::plain 标题#副标题
这是plain样式  
只能使用双空格或`\`换行
:::tonal 嵌套
支持嵌套，支持!!别的插件!!
:::
::::

示例容器 (demo) ​

用于展示 Markdown 示例及其渲染效果的容器。

示例
这是一个示例

Markdown is awesome!
md
**Markdown** is *awesome*!
md
::: demo 这是一个示例
**Markdown** is *awesome*!
:::

警告框 (alert & v-alert) ​

新版警告框 (推荐) ​

新一代的警告框组件，通过 JSON 提供丰富的配置选项。

属性 类型 描述 可选值
type string 警告框类型/颜色 success, info, warning, error
title string 警告框标题 任意字符串
variant string 视觉样式变体 flat, tonal, outlined, text, plain
density string 间距密度 default, comfortable, compact
border string|boolean 边框位置 start, end, top, bottom, true
icon string 自定义 Material Design 图标 如 mdi-star, mdi-heart
color string 自定义颜色 任意颜色值
lightColor string 亮色主题下的自定义颜色 任意颜色值
darkColor string 暗色主题下的自定义颜色 任意颜色值
新版警告框示例
md
::: alert {"type": "success", "title": "成功"}
这是成功类型的警告框。
:::

::: alert {"type": "info", "title": "信息", "icon": "mdi-information"}
这是信息类型的警告框，带有自定义图标。
:::

::: alert {"type": "warning", "title": "警告", "variant": "tonal"}
这是警告类型的警告框，使用 tonal 变体。
:::

::: alert {"type": "error", "title": "错误", "border": "start"}
这是错误类型的警告框，左边有边框。
:::

传统警告框 (v-alert) ​

旧版的 Vuetify 风格警告框。

传统警告框示例
md
::: v-success 成功
这是成功样式
:::
::: v-info 提示
这是提示样式
:::
::: v-warning 警告
这是警告样式
:::
::: v-error 错误
这是错误样式
:::

对话框 (dialog) ​

用于创建可从任何地方触发的复杂对话框。

配置字段 用途 类型 默认值
title 对话框的标题 string N/A
width 对话框的最大宽度 string | number 800
fullscreen 是否以全屏模式显示 boolean false
persistent 点击外部是否关闭 boolean false
示例

点击 这里 来触发对话框。
md
@@@ dialog-def#my-dialog {"title": "对话框示例", "width": 500}
这是一个 **Markdown** 对话框。

- 它可以包含列表
- `代码块`
- 以及其他任何 Markdown 内容。
@@@

点击 :::dialog#my-dialog 这里::: 来触发对话框。

滚动横幅 (carousels) ​

创建一个自定义内容的图片轮播。

示例
md
::: carousels#{"cycle": true, "interval": 2800, "undelimiters": true}
@tab
![1](https://docs.variedmc.cc/mods/adventure/champions-unofficial/1.png)
@tab
![2](https://docs.variedmc.cc/mods/adventure/champions-unofficial/2.png)
:::

内嵌外链 (iframe) ​

用于在页面中嵌入外部网页。

配置字段 用途 类型 默认值
src 网页的链接，必填 string N/A
height 设置元素的高度。 length value 140px
示例
md
:::iframes#{"src": "https://misode.github.io/"}
:::

注意： 由于安全策略，某些网站可能不允许被嵌入，会显示空白或错误信息。

聊天对话 (chat) ​

创建模拟聊天界面的对话容器，支持多种头像类型和消息样式。

chat 容器属性 ​

属性 类型 描述 默认值
title string 聊天面板标题 ""
max-height string 最大高度 "400px"

message 容器属性 ​

属性 类型 描述 默认值
nickname string 用户昵称 ""
avatar-type string 头像类型 "icon"
location string 消息位置 "left"
avatar-link string 头像点击链接 ""

头像类型 ​

类型 描述 自动链接
icon 默认图标头像 无
ai AI助手头像 无
github GitHub头像 自动链接到GitHub主页

示例 ​

AI对话演示
AI对话演示
👤
用户

你好，能帮我解释一下什么是Vue组合式API吗？

A
AI助手

当然可以！Vue组合式API是Vue 3中引入的新功能：

  • 响应式数据：使用ref()和reactive()
  • 生命周期钩子：使用onMounted()等
javascript
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return { count }
  }
}
octocat

GitHub头像会自动添加链接跳转到GitHub主页
md
:::: chat title="AI对话演示"
::: message nickname="用户" avatar-type="icon"
你好，能帮我解释一下什么是Vue组合式API吗？
:::

::: message nickname="AI助手" avatar-type="ai" location="right"
当然可以！Vue组合式API是Vue 3中引入的新功能：

- **响应式数据**：使用`ref()`和`reactive()`
- **生命周期钩子**：使用`onMounted()`等

```javascript
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return { count }
  }
}
```
:::

::: message nickname="octocat" avatar-type="github"
GitHub头像会自动添加链接跳转到GitHub主页
:::
::::

图表网格 (chart-grid) ​

专门为 Vue Chart 优化的网格布局容器，提供更好的图表并列显示效果。

配置字段 用途 类型 默认值
columns 网格列数 number 2
gap 图表间距 string "24px"
responsive 是否启用响应式 boolean true
equalHeight 是否等高显示 boolean true
minHeight 最小高度 string "300px"

双图表并列 ​

双列图表（columns=2）
md
:::: chart-grid {"columns": 2, "gap": "24px"}

::: chart pie {"title": "项目进度分布", "height": "300px"}
已完成: 65
进行中: 25
待开始: 10
:::

::: chart line {"title": "月度完成趋势", "height": "300px", "smooth": true}
月度完成 | 1月: 20, 2月: 35, 3月: 45, 4月: 65
:::

::::
单列图表（columns=1）
md
:::: chart-grid {"columns": 1, "gap": "24px"}

::: chart bar {"title": "团队工作量分布", "height": "300px"}
工作分布 | 开发: 150, 测试: 80, 文档: 60, 会议: 40
:::
::: chart bar {"title": "团队工作量分布", "height": "300px"}
工作分布 | 开发: 150, 测试: 80, 文档: 60, 会议: 40
:::
::: chart bar {"title": "团队工作量分布", "height": "300px"}
工作分布 | 开发: 150, 测试: 80, 文档: 60, 会议: 40
:::

::::

多图表网格 ​

多图表网格（3列）
md
:::: chart-grid {"columns": 3, "gap": "20px"}

::: chart radar {"title": "团队技能评估"}
张三 | 前端:85, 后端: 90, 测试: 75, 文档: 80, 项目管理: 70
:::

::: chart bar {"title": "月度工作量统计", "height": "280px"}
工作量统计 | 开发: 120, 测试: 80, 文档: 40, 会议: 30
:::

::: chart pie {"title": "项目时间分配", "height": "280px"}
前端开发: 40
后端开发: 35
测试验证: 15
文档整理: 10
:::

::::

图表与表格混合 ​

图表与表格混合
团队成员 主要技能 经验年限
开发者A 前端开发 3年
开发者B 后端开发 5年
测试工程师 质量保证 4年
md
:::: table-grid {"columns": 2, "gap": "24px"}

::: chart radar {"title": "技能评估"}
开发者A | 前端: 85, 后端: 75, 测试: 60, 文档: 90
开发者B | 前端: 70, 后端: 95, 测试: 80, 文档: 65
:::

| 团队成员 | 主要技能 | 经验年限 |
|:---|:---|:---|
| 开发者A | 前端开发 | 3年 |
| 开发者B | 后端开发 | 5年 |
| 测试工程师 | 质量保证 | 4年 |

::::

图表 (chart) ​

使用 chart 容器来渲染 ECharts 图表，支持多种图表类型和丰富的配置选项。

配置选项 ​

属性 类型 描述 默认值
title string 图表主标题 ""
subtitle string 图表副标题 ""
width string 容器宽度 100%
height string 容器高度 400px
theme string 主题 auto
legend boolean 是否显示图例 false
smooth boolean 是否平滑曲线（仅折线图） false

支持的图表类型 ​

图表类型 语法 数据格式
折线图 line 系列名 | 类别1: 值1, 类别2: 值2
柱状图 bar 系列名 | 类别1: 值1, 类别2: 值2
面积图 area 系列名 | 类别1: 值1, 类别2: 值2
饼图 pie 类别: 值
环形图 doughnut 类别: 值
散点图 scatter x值, y值
雷达图 radar 系列名 | 指标1: 值1, 指标2: 值2
仪表盘 gauge 数值
漏斗图 funnel 类别: 值
热力图 heatmap x, y, 值
桑基图 sankey 源->目标: 值
关系图 graph 节点1->节点2: 值
K线图 candlestick/k 日期: 开盘,收盘,最低,最高
箱线图 boxplot 最小值,下四分位,中位数,上四分位,最大值
平行坐标 parallel 值1, 值2, 值3, ...
主题河流 themeRiver 日期,类别: 值
象形柱图 pictorialBar 类别: 值

示例：折线图 ​

示例：饼图 ​

示例：雷达图 ​

时间线 (timeline) ​

使用 timeline 和 timeline-item 容器来创建垂直时间线，支持丰富的预设类型和自定义样式。

timeline 容器属性 ​

属性 类型 描述 默认值
density string 时间线密度 default
direction string 方向 vertical

可选值：

  • density: default, comfortable, compact
  • direction: vertical, horizontal

timeline-item 容器属性 ​

属性 类型 描述 默认值
type string 预设类型 ""
dot-color string 圆点颜色 ""
icon string 圆点内的图标 ""
opposite string 显示在时间线对侧的内容 ""
card boolean 是否使用卡片样式 false
card-title string 卡片标题 ""

预设类型 ​

类别 可用类型
基础 success, info, warning, error, tip
项目 start, finish, milestone, deadline, meeting, launch, pause, stop
状态 review, approve, reject, pending, progress, complete, todo, doing, done
Bug bug, bug_investigating, bug_fixed
功能 feature, feature_designing, feature_developing, feature_testing, feature_released
任务 task_created, task_assigned, task_started, task_paused, task_resumed, task_completed, task_cancelled
构建 build_started, build_success, build_failed
部署 deploy, deploy_staging, deploy_production, rollback
安全 security, security_issue, security_fixed
性能 performance, performance_issue, performance_optimized
其他 documentation, documentation_updated, release, hotfix, maintenance, optimization, testing, refactor, meeting_completed, decision_made, backup_created, user_feedback, issue_escalated, database_migration, api_deprecated, dependency_updated

示例：项目时间线 ​

示例
md
:::: timeline
::: timeline-item type="start" opposite="2024-08"
项目启动
:::
::: timeline-item type="milestone" card="true" card-title="v1.0 发布"
我们成功发布了第一个主要版本！
:::
::: timeline-item type="refactor" opposite="2025-06"
Sidebar系统完成重构，开始整理2.0
:::
::: timeline-item type="task_completed" opposite="2025-07"
2.0版本完成
:::
::: timeline-item type="launch" opposite="2025-07"
文档仍维护至今。
:::
::::

代码与图表插件 ​

Markmap 思维导图 ​

使用 Markmap 插件可以将 Markdown 内容渲染为交互式思维导图。

基本语法 ​

markdown
```markmap
# 主题
## 分支 1
### 子分支 1.1
### 子分支 1.2
## 分支 2
### 子分支 2.1
### 子分支 2.2
```

渲染效果 ​

特性 ​

  • 自动适应：思维导图会自动调整大小以适应容器
  • 深色模式支持：自动适配当前主题的深色/浅色模式
  • 交互式：支持点击节点展开/折叠
  • 彩色分支：不同层级使用不同颜色区分

Magic Move 代码动画 ​

用于展示代码的逐步演变过程，支持高亮变化部分。

基本语法 ​

markdown
:::magic-move

```js [js]
const hello = 'world'
```

```ts [ts]
const hello = 'world' as String
```

:::

渲染效果 ​

Loading...

语法说明 ​

  • 容器语法：使用 :::magic-move 和 ::: 包裹多个代码块
  • 文件名：在代码块信息中使用 [filename] 指定文件名
  • 高亮行：使用 {1,3-5} 语法高亮特定行
  • 步骤切换：点击顶部标签页切换不同步骤

特性 ​

  • 平滑过渡：代码变化时有平滑的动画效果
  • 语法高亮：支持多种编程语言的语法高亮
  • 文件图标：根据文件扩展名自动显示对应图标
  • 深色模式：自动适配主题模式

自定义 Vue 组件 ​

可以直接在 Markdown 中使用的 Vue 组件。

Mermaid 图表 ​

Demo
md
```mermaid
graph TD
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Check console];
```

Bilibili 视频 ​

Demo
md
<BilibiliVideo bvid="BV1rC4y1C7z2" />

PDF 查看器 ​

Demo
md
<PdfViewer pdfSource="/pdf/modding/java/test.pdf"/>