我很莜陌の个人主页

目录#

• GitHub 仓库卡片
• 提示框（Admonitions）
  • 基础语法
  • 自定义标题
  • GitHub 语法
  • 剧透
• 代码组
  • 长代码自动折叠
• 扩展提示框
• Wiki 链接
• Markdown 图片
• 自动图片网格
• PlantUML
• 化学式

GitHub 仓库卡片#

你可以添加指向 GitHub 仓库的动态卡片，页面加载时会通过 GitHub API 拉取仓库信息。

使用代码 ::github{repo="LyraVoid/Mizuki"} 创建一个 GitHub 仓库卡片。

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

提示框（Admonitions）#

支持以下类型的提示框：

NOTE

即使用户只是快速浏览，也应留意的重要信息。

TIP

帮助用户更顺利完成的补充信息。

IMPORTANT

用户顺利完成所必须的关键信息。

WARNING

因潜在风险而需要用户立即关注的关键内容。

CAUTION

某项操作可能带来的负面后果。

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip
6
Optional information to help a user be more successful.
7
:::

1
:::note[MY CUSTOM TITLE]
2
This is a note with a custom title.
3
:::

1
> [!NOTE]
2
> The GitHub syntax is also supported.
3

4
> [!TIP]
5
> The GitHub syntax is also supported.

1
The content :spoiler[is hidden **ayyy**]!

代码组#

使用 VitePress 风格的 ::: code-group labels=[...] 语法，把相关的示例以可访问的选项卡形式呈现。 选项卡支持鼠标操作以及 Left、Right、Home 和 End 按键。

1
export const config = {
2
  framework: "Mizuki",
3
  enhanced: true,
4
};

1
pnpm check && pnpm build

3 collapsed lines
1
import { one } from "one";
2
import { two } from "two";
3
import { three } from "three";
4
console.log(one, two, three);

1
::: code-group labels=[TypeScript, Shell]
2

3
```ts title="config.ts"
4
export const framework = "Mizuki";
5
```
6

7
```bash title="Build"
8
pnpm build
9
```
10

11
:::

1
01
2
02
3
03
4
04
5
05
6
06
7
07
8
08
9
09
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
21
21
22
22

扩展提示框#

除 GitHub 的五种提醒类型外，Mizuki 还接受 Obsidian 的常见别名，例如 INFO、TODO、SUCCESS、QUESTION、DANGER、BUG、 EXAMPLE 和 QUOTE。

Known limitation

扩展别名会被映射到 Mizuki 的语义化提示框样式。

同时也支持 Python Markdown 与 Docusaurus 风格的指令：

Danger directive

这条指令使用了自定义标题。

1
> [!BUG] Known limitation
2
> Describe the known issue here.
3

4
:::danger[Danger directive]
5
This directive uses a custom title.
6
:::

Wiki 链接#

Obsidian 风格的 Wiki 链接可解析文章路径、别名与标题锚点。 单独的链接会成为一个文章卡片：

Writing a Blog Post

A generic example of article structure and frontmatter.

2024-04-01Guides#Example#Writing#Markdown

卡片会复用目标文章的封面。相对封面从目标文章解析， 同时也支持公共、远程以及配置了 image: api 的封面。 加密文章在预览中绝不会暴露其封面。

行内链接保持行内。例如 Mermaid 示例，或直接链接到 某个章节。

1
[[markdown-mermaid]]
2

3
See [[markdown-mermaid|the Mermaid examples]].

Markdown 图片#

图片的替代文本对辅助技术仍然可用。Markdown 标题会作为可见的图注显示， 可选的合法 w-N% 标记用于控制显示宽度：

1
![Descriptive alt w-60%](./image.webp "A visible image caption")

仅接受 w-1% 到 w-100% 之间的宽度。imageOptimization.noReferrerDomains 中的 远程图片主机，会在初始 HTML 中收到 referrerpolicy="no-referrer"。 若希望保留自定义标记，可为原生 HTML 图片或其祖先元素添加 data-no-enhance； 这样自定义标记就不会被额外处理。

1
<div data-no-enhance>
2
  <img src="/images/demos/image-grid-demo/square-3.webp" alt="Custom image markup" width="640" height="360">
3
</div>

自动图片网格#

两张或以上相邻的独立图片会被组合成一个响应式画廊。 当需要自定义列数、宽高比或 对象填充方式时，仍可使用显式的 :::grid 指令。

1
![First image](/images/first.webp)
2
![Second image](/images/second.webp)

PlantUML#

PlantUML 代码块会通过配置的服务器生成 SVG 图表。图表支持 明/暗两种来源，以及缩放、拖动、重置和 全屏查看。

1
```plantuml
2
@startuml
3
Alice -> Bob: Hello
4
@enduml
5
```

化学式#

KaTeX 的 mhchem 扩展可渲染化学方程式：