Lambent's Blog

GitHub 仓库卡片#

你可以添加指向 GitHub 仓库的动态卡片。页面加载时，系统会从 GitHub API 获取仓库信息。

Fabrizz/MMM-OnSpotify

使用 ::github{repo="<owner>/<repo>"} 创建 GitHub 仓库卡片。

1
::github{repo="saicaca/fuwari"}

Mermaid 图表#

围栏代码块中的 mermaid 内容会渲染为图表，并跟随当前配色方案。

flowchart LR
    accTitle: Markdown rendering pipeline
    accDescr: Markdown source is transformed into semantic HTML and then enhanced as a themed SVG diagram.
    A[Markdown source] --> B[Astro content pipeline]
    B --> C[Semantic HTML]
    C --> D[Themed diagram]

提示容器#

支持以下类型的提示容器：note、tip、important、warning 和 caution。

1
:::note
2
突出显示即使快速浏览时也值得注意的信息。
3
:::
4

5
:::tip
6
帮助读者更顺利完成任务的可选信息。
7
:::

1
:::note[我的自定义标题]
2
这是一个带有自定义标题的说明容器。
3
:::

1
> [!NOTE]
2
> 同样支持 GitHub 语法。
3

4
> [!TIP]
5
> 同样支持 GitHub 语法。

1
内容 :spoiler[已隐藏 **啦**]！

图片宽度与说明文字#

独立图片的 alt 文本中可以包含可选的 w-N% 宽度标记；Markdown 标题则会显示为图片下方居中的说明文字：

1
![图片说明 w-50%](./image.webp "显示的说明文字")

有效宽度范围为 w-1% 至 w-100%；无效标记会保留在 alt 文本中。宽度和说明文字相互独立——仅填写标题也会显示说明文字：