标注

一个合适的标注可以吸引读者注意,给予更好的阅读体验

由于笔者本身使用 Obsidian 进行本地书写,而 Fuwari 自带的样式没有做到很好的兼容,我尝试修改一番后也没有很好的效果,然后找到了 rehype-callout,这是一个现成的插件,支持 github、obsidian 等样式和写法,算是完美解决了我的问题。

title
> [!NOTE]  
> 强调用户在浏览时应考虑的信息。

> [!TIP]
> 可选信息,可帮助用户更成功。

> [!IMPORTANT]
> 用户成功所必需的关键信息。

> [!WARNING]
> 由于潜在风险,需要用户立即注意的关键内容。

> [!CAUTION]
> 行动的负面潜在后果。

示例

[!NOTE]
强调用户在浏览时应考虑的信息。

[!TIP]
可选信息,可帮助用户更成功。

[!IMPORTANT]
用户成功所必需的关键信息。

[!WARNING]
由于潜在风险,需要用户立即注意的关键内容。

[!CAUTION]
行动的负面潜在后果。


自定义标题

可以在 callout 类型后添加自定义标题,格式为 > [!类型] 自定义标题

> [!NOTE] 关于标注的说明
> 这是一个带自定义标题的 NOTE 标注,标题会显示在图标右侧。

> [!TIP] 高效使用技巧
> 自定义标题可以让标注更具针对性,方便快速识别内容主题。

> [!WARNING] 数据备份提醒
> 请定期备份你的 Obsidian 库,避免数据丢失。

示例效果

[!NOTE] 关于标注的说明
这是一个带自定义标题的 NOTE 标注,标题会显示在图标右侧。

[!TIP] 高效使用技巧
自定义标题可以让标注更具针对性,方便快速识别内容主题。

[!WARNING] 数据备份提醒
请定期备份你的 Obsidian 库,避免数据丢失。

可折叠的 Callout

通过添加 - 参数实现折叠功能,默认折叠状态;添加 + 可默认展开:

# 默认折叠(需点击展开)
> [!IMPORTANT]- 折叠的重要信息
> 点击标题可展开/折叠内容,适合内容较长的标注,减少视觉干扰。
> - 列表项 1
> - 列表项 2
> - 列表项 3

# 默认展开(可手动折叠)
> [!CAUTION]+ 可折叠的警告
> 这是默认展开的折叠标注,包含多行内容时非常实用:
> 1. 第一步操作
> 2. 第二步操作
> 3. 注意事项:操作前请确认数据无误

示例效果

[!IMPORTANT]- 折叠的重要信息
点击标题可展开 / 折叠内容,适合内容较长的标注,减少视觉干扰。

  • 列表项 1
  • 列表项 2
  • 列表项 3

[!CAUTION]+ 可折叠的警告
这是默认展开的折叠标注,包含多行内容时非常实用:

  1. 第一步操作
  2. 第二步操作
  3. 注意事项:操作前请确认数据无误

代码块

通过安装 Expressive Code 增强 Astro 的代码块

音乐卡片

根据 remark 写的卡片,支持外部音乐链接。没有使用 meetingjs,因为我不相信国内的音乐平台

具体可见博客美化记录