功能介绍
本文记录了为 Quartz 4 深度定制的 Callout(标注) 插件。该插件在保持与 Obsidian 原生标注样式高度一致的前提下,实现了以下核心增强:
- 容器化语法:引入
:::块级语法,解决了原生标注每行都需要添加>的书写痛点。 - 无限层级嵌套:支持通过不同数量的冒号实现清晰的容器嵌套。
- 原生折叠动画:完美适配 Quartz 的折叠脚本,支持默认展开
+或默认折叠-。 - 动态样式定制:支持在 Markdown 中直接为单个标注指定自定义 SVG 图标和 Hex 配色。
语法指南
1. 基础用法
使用 :::[!类型] 标题 的标准语法。该插件完整支持以下 12 种基础类型:
基础类型
类型 别名 默认颜色 默认图标 note- 蓝色 abstractsummary,tldr浅蓝色 info- 蓝绿色 todo- 蓝绿色 tiphint,important绿色 successcheck,done绿色 questionhelp,faq橙色 warningattention,caution橙黄色 failuremissing,fail红色 dangererror红色 bug- 红色 example- 紫色 quotecite灰色
代码:
:::[!note] 笔记标题
这里是内容,可以直接写多行。
不需要每行都加 > 符号。
:::效果:
笔记标题这里是内容,可以直接写多行。 不需要每行都加 > 符号。
2. 折叠控制
在类型后缀添加 + 或 -(需放在方括号内)。
代码:
:::[!info]- 点击展开查看秘密
这是一个默认折叠的标注。
:::效果:
点击展开查看秘密这是一个默认折叠的标注。
3. 嵌套标注
外层标注使用更多的冒号(如 ::::)包裹内层标注(如 :::)。
代码:
::::[!question] 这是一个复杂的问题
内部可以包含普通文本。
:::[!todo] 内部的任务
- [ ] 任务一
- [ ] 任务二
:::
::::效果:
这是一个复杂的问题内部可以包含普通文本。
内部的任务
- 任务一
- 任务二
4. 纯标题标注
该插件支持不带主体内容的标注,非常适合作为精美的“标签”或“状态栏”使用。
代码:
:::[!info] 纯标题标注示例
:::效果:
纯标题标注示例
5. 自定义图标与颜色
该插件支持灵活的智能识别语法::::[!类型|颜色] 标题。
规范说明
- 类型 (Type):可以是标准名称(如
tip),也可以直接是一个 图标 URL。- 颜色 (Color):以
#开头的 Hex 值,用于一键设置整个标注的主题色。- 方括号:必须使用
[!...]格式以对齐 Obsidian 的心智模型。
代码:
:::[!https://api.iconify.design/lucide:rocket.svg|#a855f7] 深度定制
- **规范语法**:必须使用 `:::[!图标URL|颜色] 标题`。
:::
:::[!tip|#ff0000] 红色警告
即使是标准类型,也可以直接加 `|颜色` 来覆盖。
:::效果:
深度定制
- 规范语法:必须使用
:::[!图标URL|颜色] 标题。
红色警告即使是标准类型,也可以直接加
|颜色来覆盖。
如何使用
下载文件
请确保以下文件已保存至项目的 quartz/custom/ 对应位置:
启用插件
在 quartz.config.ts 中注册该 Transformer 插件:
import * as Custom from "./quartz/custom"
// ...
transformers: [
// ... 其他插件
Custom.Callout(),
// 建议放在 ObsidianFlavoredMarkdown 之前
],