猫羽雫

文本样式#

普通段落中可以使用 粗体、斜体、删除线、行内代码，也可以添加 Mizuki 项目文档。

普通图片#

使用 public 目录中的图片时，路径从站点根目录 / 开始：

1
![山间风景](/images/demos/image-grid-demo/feature-landscape-1.webp "普通图片标题")

下面是实际显示效果：

图片方括号中的文字是替代文本，圆括号中的路径指向图片；路径后的可选标题会在支持的场景中作为图片说明使用。

引用式图片#

当同一张图片需要复用时，可以先定义图片地址：

1
![引用式图片][landscape]
2

3
[landscape]: /images/demos/image-grid-demo/feature-landscape-2.webp "引用式图片标题"

实际效果：

响应式图片网格#

Mizuki 使用 :::grid 创建图片网格。每张图片应单独占一个段落，并在图片之间保留空行。

1
:::grid{columns="3" aspect="16/9" fit="cover"}
2
![第一张图片](图片路径 "说明文字")
3

4
![第二张图片](图片路径 "说明文字")
5

6
![第三张图片](图片路径 "说明文字")
7
:::

参数含义：

• columns：桌面端列数，可设置为 1～6。
• aspect：卡片显示比例，例如 16/9、3/4 或 1/1。
• fit="cover"：填满卡片，必要时裁剪图片。
• fit="contain"：完整显示图片，比例不同时可能留白。

三列横向图片#

两列方形图片#

完整显示竖向图片#

下面使用 contain 保留完整图片内容：

提示框#

NOTE

这是普通提示，用于补充与正文相关的信息。

图片使用建议

优先使用 WebP 等体积较小的图片格式，并为每张图片填写有意义的替代文本。

IMPORTANT

如果图片放在 public 目录中，请使用以 / 开头的站点根路径。

WARNING

图片文件名和路径需要注意大小写；部署到 Linux 环境后，大小写不一致会导致图片无法加载。

CAUTION

不要直接使用体积过大的原图，否则可能明显影响页面加载速度。

也支持 GitHub 风格提示：

NOTE

点击网格中的图片，可以检查灯箱预览和同组图片切换效果。

剧透文本#

下面的内容使用剧透语法，点击或悬停后查看：

这张图片背后的秘密是：它只是用于页面显示测试的示例图片。

1
:spoiler[这里是被隐藏的内容]

代码块#

代码围栏后添加语言名称即可启用语法高亮：

1
const image = {
2
  src: "/images/demos/image-grid-demo/feature-landscape-1.webp",
3
  alt: "测试图片",
4
};
5

6
console.log(image);

数学公式#

行内公式示例：圆的面积为 $A = \pi r^2$。

块级公式示例：

Mermaid 图表#

GitHub 仓库卡片#

使用仓库卡片指令可以展示 GitHub 项目信息：

1
::github{repo="LyraVoid/Mizuki"}

行内 HTML#

Markdown 中也可以使用简单的行内 HTML，例如：

这是一段居中显示的 HTML 示例文本。

检查清单#

1. 文章标题、封面、分类和标签是否正常显示。
2. 普通图片和引用式图片是否成功加载。
3. 图片网格是否会在窄屏设备上自动减少列数。
4. 点击网格图片后，灯箱是否可以缩放和切换图片。
5. cover 是否裁剪并填满卡片，contain 是否保留完整图片。
6. 提示框、剧透、代码高亮、公式和 Mermaid 图表是否正常渲染。