自有语法指南
幻梦文档在标准 Markdown 之外，还启用了一些站内扩展写法。它们主要用于 强调重点、控制图片布局、增强表格表现、减少重复 HTML。
注意
这页里的写法并不是标准 Markdown 通用语法，只适用于当前文档站点。换到别的项目里时，可能不会生效。
彩色文本
本站支持用下面这种简写方式给短文本上色：
{blue}重点内容{}
{red}危险提示{}
{#ff9800}自定义颜色{}效果示例：重点内容、危险提示、自定义颜色
可用的预设颜色
目前支持这些预设颜色名：
auto()、darkred、red、yellow、orange、green、darkgreen、pink、purple、cyan、blue、gray、gold、aqua
auto 为自动适应颜色，根据用户设置的主题颜色自动适应。
推荐使用场景
- 强调数值、概率、增减效果。
- 强调正负反馈、稀有度、等级等短文本。
- 给一小段补充说明加弱化颜色，比如
{gray}（补充说明）{}。
注意事项
- 更适合短文本，不适合整段大面积上色。
- 颜色块内部以纯文本为主，不要指望在里面继续写复杂 Markdown。
- 如果只是普通强调，优先考虑
**加粗**，不要什么都上颜色。
圆角徽章（彩色背景标签）
如果你想把一段短文本做成 圆角彩色徽章 的样子（适合等级、状态标签等），可以在原有彩色文本语法前面加上 bg- 前缀：
{bg-yellow}S+{}
{bg-blue}A{}
{bg-green}B-{}
{bg-#fff3c7}自定义HEX背景{}效果示例：ACE、示例
可用的预设色名与彩色文本完全一致：
auto、darkred、red、yellow、orange、green、darkgreen、pink、purple、cyan、blue、gray、gold、aqua
也支持自定义 HEX 色值，例如 {bg-#fff3c7}文本{}，自定义色直接作为背景填充。
推荐使用场景
- 等级或稀有度标签（ACE / S+ / A / B-）。
- 状态徽章、版本标签、玩法分类。
- 任何希望以「彩色色块」突出展示的短词。
注意事项
- 同样建议用在短文本上，不要把整段话塞进徽章里。
- 预设色已经做了日间 / 夜间双模式适配，自定义 HEX 则按你提供的颜色原样填充，请自行确认在两种主题下都可读。
- 文字颜色统一跟随正文主色，不需要也不建议在徽章内再额外套一层
{颜色}文本{}。
图片属性与布局类
站内启用了 markdown-it-attrs，所以图片后面可以直接追加属性。
{.hm-center-img width="400"}
{.hm-right-img height="300"}
{.hm-left-img width="300"}常见类名如下：
.hm-center-img：图片居中显示。.hm-left-img：用于左右并排时的左侧图片。.hm-right-img：用于左右并排时的右侧图片。
常见属性如下：
width="400"height="300"
推荐使用场景
- 功能教程里的步骤截图。
- 两张对照图并排展示。
- 封面图、示例图居中展示。
注意事项
- 优先复用站内已有类名，不要随手新造一套图片类。
- 一页里图片尺寸尽量统一，不然观感会很乱。
- 如果普通单图展示已经足够，就不要为了“对齐”额外写太多布局代码。
提示块
本站支持 VitePress 提示块，现有页面最常用的是这三种：
::: info
补充说明。
:::
::: tip
友好建议。
:::
::: warning
重要提醒。
:::什么时候用
info：补充背景、额外解释、前置说明。tip：较温和的建议、经验提示。warning：限制条件、风险说明、容易踩坑的地方。
不推荐这样用
- 一页里连续堆很多提示块。
- 普通正文也全部塞进提示块里。
- 明明一句普通话就能说清楚，却强行套容器。
Tabs 标签页
站内已经启用了 vitepress-plugin-tabs，可以写标签页内容。
::: tabs
== 方式一
这里写方式一的内容。
== 方式二
这里写方式二的内容。
:::站内现有页面也会写成下面这样（两种专用 variant）：
hm-donate-image：图片型档位页，内容会水平居中，适合放二维码 / 截图。
::: tabs variant:hm-donate-image
== 支付宝
{height="350"}
== 微信
{height="350"}
:::hm-donate-text：文本型档位页，采用左右两列 Grid 布局、两列均垂直居中。首个块级子元素（介绍段落）进入左列，其余（如「档位福利：」段落和后续列表）进入右列。因此记得在介绍段落与 档位福利：（示例） 之间保留一空行，让它们拆成两个段落。
::: tabs variant:hm-donate-text
== ￥7.9
请幻梦作者喝一杯奶茶，让她拥有更好的心情敲打代码！
档位福利：
1. 解锁 xxx
2. 获得 xxx
:::推荐使用场景
- 同一主题下的多平台说明。
- 多种支付方式、多种入口、多种环境的切换展示。
- 内容结构相同，但分组不同的说明。
表格增强指令
普通表格可以直接写，但如果列比较多、每列宽度需要控制，可以在表格前加一条增强注释：
<!-- hm-table: smart; widths=5em,7.5em,auto,5.5em; min=40em -->
| 品质 | 道具名 | 道具作用 | 掉落权重 |
| :-: | :-: | :- | :-: |
| 普通 | 示例道具 | 示例效果 | 114514 |这条指令的作用
smart：启用增强表格样式。widths=...：按列指定宽度。min=40em：设置表格最小宽度。center：让整张表格在容器内水平居中（不影响 smart / 溢出滚动，可与其它选项叠加，如<!-- hm-table: center; widths=5em,auto -->）。
什么时候用
- 列数较多。
- 某些列内容明显更长。
- 移动端容易把表格挤坏。
- 表格内容很窄、希望在正文里看起来更平衡时，给它加
center居中显示。
Markdown 中混排 HTML
这个站点并不是“只能写纯 Markdown”。如果 Markdown 本身表达不够，可以适度混排 HTML。
现有页面里比较常见的是：
<div class="app-card-grid">
<div class="app-card">
<div class="app-card-left">
<div class="app-card-avatar emoji-avatar">📝</div>
<div class="app-card-info">
<div class="app-card-title">标题</div>
<div class="app-card-desc">描述</div>
</div>
</div>
<a href="/path" class="app-action-btn">前往</a>
</div>
</div>推荐使用场景
- 首页或索引页的卡片导航。
- 需要更稳定布局的内容块。
- Markdown 很难优雅表达的排版结构。
注意事项
- Markdown 能写清楚时，优先还是用 Markdown。
- 不要为了一个很小的视觉效果写一大段 HTML。
- 复用站内已有 class，避免引入没人维护的新结构。
加群确认按钮
文档里可以插入带二次确认弹窗的外链按钮，在移动端点击时会先弹出确认框，再跳转 QQ 群等外部链接：
<a class="group-join-btn" href="https://qm.qq.com/q/6lmTZCS0SY" target="_blank" rel="noopener noreferrer" data-confirm-title="二次确认" data-confirm-message="即将跳转到QQ幻梦官方群，是否继续？" data-confirm-label="确认">点击加群</a>可用属性：
data-confirm-title：弹窗标题，默认「提示」。data-confirm-message：弹窗正文；支持用\n换行，例如第一行\n第二行。data-confirm-label：确认按钮文字，默认「确定」。
信息
二次确认仅在移动端生效；桌面端会直接打开链接。顶栏「社区」菜单里的外链确认弹窗同样支持 \n 换行。
站内换行行为
当前站点启用了更宽松的换行渲染，单个文本换行也会被渲染为 <br>。这能让一些旧文档或说明页更容易保持原本排版。
不过写新内容时，仍然推荐：
- 正常段落之间空一行。
- 只有在确实需要紧凑展示时，才依赖单行换行。
这样更清楚，也更方便后续维护。
选用建议
如果你不确定该用哪种写法，可以按这个顺序判断：
- 标准 Markdown 能写清楚吗？能的话优先用标准 Markdown。
- 只是想强调几个字吗？优先考虑加粗，其次再用彩色文本。
- 只是想控制图片位置和尺寸吗？优先用图片属性语法。
- 需要做标签切换、卡片导航、复杂布局吗？再考虑 tabs 或 HTML。
提示
最好的自有语法用法，通常不是“用得越多越好”，而是“只有在确实值得用的时候才用”。