GitHub 仓库卡片
您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。
::github{repo=“CuteLeaf/Firefly”}
使用代码 ::github{repo="CuteLeaf/Firefly"} 创建 GitHub 仓库卡片。
1::github{repo="CuteLeaf/Firefly"}
提醒框(Admonitions)配置
Firefly 采用了 rehype-callouts 插件，支持了三种风格的提醒框主题：GitHub、Obsidian 和 VitePress。您可以在 src/config/siteConfig.ts 中进行配置：
1// src/config/siteConfig.ts
2export const siteConfig: SiteConfig = {
3 // ...
4 rehypeCallouts: {
5 // 选项: "github" | "obsidian" | "vitepress"
6 theme: "github",
7 },
8 // ...
9};
注意：更改配置后需要重启开发服务器才能生效。
以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。
1. GitHub 主题风格
这是 GitHub 官方支持的 5 种基本类型。
基本语法
1> [!NOTE] NOTE
2> 突出显示用户应该考虑的信息。
3
4> [!TIP] TIP
5> 可选信息，帮助用户更成功。
6
7> [!IMPORTANT] IMPORTANT
8> 用户成功所必需的关键信息。
9
10> [!WARNING] WARNING
11> 关键内容，需要立即注意。
12
13> [!CAUTION] CAUTION
14> 行动的负面潜在后果。
15
16> [!NOTE] 自定义标题
17> 这是一个带有自定义标题的示例。
2. Obsidian 主题风格
Obsidian 风格支持非常丰富的类型和别名。
点击展开 Obsidian 语法列表
1
2> [!NOTE] NOTE
3> 通用的笔记块。
4
5> [!ABSTRACT] ABSTRACT
6> 文章的摘要。
7
8> [!SUMMARY] SUMMARY
9> 文章的总结（同 Abstract）。
10
11> [!TLDR] TLDR
12> 太长不看（同 Abstract）。
13
14> [!INFO] INFO
15> 提供额外信息。
16
17> [!TODO] TODO
18> 需要完成的事项。
19
20> [!TIP] TIP
21> 实用技巧或提示。
22
23> [!HINT] HINT
24> 暗示（同 Tip）。
25
26> [!IMPORTANT] IMPORTANT
27> 重要信息（Obsidian 风格通常使用类似的图标）。
28
29> [!SUCCESS] SUCCESS
30> 操作成功。
31
32> [!CHECK] CHECK
33> 检查通过（同 Success）。
34
35> [!DONE] DONE
36> 已完成（同 Success）。
37
38> [!QUESTION] QUESTION
39> 提出问题。
40
41> [!HELP] HELP
42> 寻求帮助（同 Question）。
43
44> [!FAQ] FAQ
45> 常见问题（同 Question）。
46
47> [!WARNING] WARNING
48> 警告信息。
49
50> [!CAUTION] CAUTION
51> 注意事项（同 Warning）。
52
53> [!ATTENTION] ATTENTION
54> 引起注意（同 Warning）。
55
56> [!FAILURE] FAILURE
57> 操作失败。
58
59> [!FAIL] FAIL
60> 失败（同 Failure）。
61
62> [!MISSING] MISSING
63> 缺失内容（同 Failure）。
64
65> [!DANGER] DANGER
66> 危险操作警告。
67
68> [!ERROR] ERROR
69> 错误信息（同 Danger）。
70
71> [!BUG] BUG
72> 报告软件缺陷。
73
74> [!EXAMPLE] EXAMPLE
75> 展示一个例子。
76
77> [!QUOTE] QUOTE
78> 引用一段话。
79
80> [!CITE] CITE
81> 引证（同 Quote）。
82
83> [!NOTE] 自定义标题
84> 这是一个带有自定义标题的示例。
3. VitePress 主题风格
VitePress 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 5 种 基础类型。
点击展开 VitePress 语法列表
1> [!NOTE] NOTE
2> 对应 GitHub 的 Note。
3
4> [!TIP] TIP
5> 对应 GitHub 的 Tip。
6
7> [!IMPORTANT] IMPORTANT
8> 对应 GitHub 的 Important。
9
10> [!WARNING] WARNING
11> 对应 GitHub 的 Warning。
12
13> [!CAUTION] CAUTION
14> 对应 GitHub 的 Caution。
15
16> [!TIP] 自定义标题
17> VitePress 风格同样支持自定义标题。
4. Docusaurus 风格语法
仅支持语法，风格保持跟上面三个主题相同。
点击展开 Docusaurus 语法列表
支持以下类型的提醒框：note tip important warning caution
1:::note
2突出显示用户应该考虑的信息，即使在快速浏览时也是如此。
3:::
4
5:::tip
6可选信息，帮助用户更成功。
7:::
8
9:::important
10用户成功所必需的关键信息。
11:::
12
13:::warning
14由于潜在风险需要用户立即注意的关键内容。
15:::
16
17:::caution
18行动的负面潜在后果。
19:::
20
21:::tip[自定义标题]
22可选信息，帮助用户更成功。
23:::
剧透
您可以为文本添加剧透。文本也支持 Markdown 语法。
内容 :spoiler[被隐藏了 哈哈]！
1内容 :spoiler[被隐藏了 **哈哈**]！
图片画廊网格 (Image Grid)
您可以使用 [grid] 和 [/grid] 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。
自动补齐图片高度： 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。
图注恒定底端对齐： 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。
[grid]
[/grid]
基本语法
1[grid]
2
3
4
5[/grid]
留言评论
期待你的想法评论加载中