让安知鱼主题引用块支持 Obsidan 语法

让安知鱼主题引用块支持 Obsidan 语法

无需复杂的安知鱼自带的 tag plugin 语法，难以记忆，只需 obsidian 或 github 的原生语法，即可实现精美的 callout 效果：

效果预览

  • 单行无标题

按图操作，注意端口一定不要错，格式 localhost:25002

  • 多行：默认标题 + 正文

[!INFO]
部署完成后等待两分钟，点击 CF 分配的域名访问博客

  • 多行：自定义标题 + 正文

特别建议
建议使用最新版本，旧版本可能存在兼容性问题

写法示例

关键词字段不区分大小写

1
2
3
4
5
6
7
> [!TIP] 单行正文                        → 图标 + 同一行文字，无标题

> [!TIP]                                → 默认标题「提示」（加粗）
> 多行正文内容                            → 正文

> [!TIP] 特别提示                        → 标题「自定义标题」（加粗）
> 多行正文内容                            → 正文

支持的字段与颜色

颜色 字段 色值
🔵 蓝 note, info, todo #027AFF
🌀 青 summary, tip, hint, important #53DFDD
🟢 绿 success, check, done #44CF6E
🟠 橙 help, faq, question, warning, caution #E9973F
🔴 红 fail, danger, error, bug #FB464C
🟣 紫 example, quote #A882FF

修改步骤

1. 文件清单

# 文件 操作 说明
1 themes/anzhiyu/scripts/filters/blockquote.js 新建 Hexo filter，构建时自动转换
2 source/css/article.css 新建 所有样式定义

2. 创建 Hexo Filter

  • 文件路径
1
themes/anzhiyu/scripts/filters/blockquote.js
  • 完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
 * blockquote.js
 * Auto-add FA icons to blockquotes with Obsidian/GitHub callout syntax
 * Supports single-line and multi-line (title + body) layouts
 * Color definitions are in source/css/article.css
 */

"use strict";

const iconMap = {
  note:    "fas fa-pencil",
  summary: "fas fa-clipboard-list",
  info:    "fas fa-info-circle",
  todo:    "fas fa-check-circle",
  important: "fas fa-star",
  tip:     "fas fa-fire",
  hint:    "fas fa-fire",
  success: "fas fa-check-circle",
  check:   "fas fa-check-circle",
  done:    "fas fa-check-circle",
  help:    "fas fa-circle-question",
  faq:     "fas fa-circle-question",
  question: "fas fa-circle-question",
  warning: "fas fa-triangle-exclamation",
  caution: "fas fa-triangle-exclamation",
  danger:  "fas fa-bolt",
  error:   "fas fa-bolt",
  fail:    "fas fa-xmark",
  bug:     "fas fa-bug",
  example: "fas fa-flask",
  quote:   "fas fa-quote-left",
};

const titleMap = {
  note:    "备注",
  summary: "摘要",
  info:    "信息",
  todo:    "待办",
  important: "重要",
  tip:     "提示",
  hint:    "提示",
  success: "完成",
  check:   "检查",
  done:    "完成",
  help:    "帮助",
  faq:     "问题",
  question: "疑问",
  warning: "警告",
  caution: "注意",
  danger:  "危险",
  error:   "错误",
  fail:    "失败",
  bug:     "漏洞",
  example: "示例",
  quote:   "引用",
};

const keywords = Object.keys(iconMap).join("|");

// Match both single-line and multi-line callouts
const regex = new RegExp(
  `<blockquote>\\s*<p>\\s*\\[!\\s*(${keywords})\\s*\\](?:\\s+(.*?))?<\\/p>\\s*((?:<p>.*?<\\/p>)*)\\s*<\\/blockquote>`,
  "gis"
);

hexo.extend.filter.register("after_post_render", (data) => {
  if (!data.content) return;

  data.content = data.content.replace(regex, (match, keyword, title, body) => {
    const k = keyword.toLowerCase();
    const icon = iconMap[k];
    if (!icon) return match;

    if (body) {
      // Multi-line: title + body
      const displayTitle = title && title.trim() ? title.trim() : titleMap[k] || k;
      return `<blockquote class="bq-${k}"><i class="${icon} bq-icon"></i><p class="bq-title"><strong>${displayTitle}</strong></p>${body}</blockquote>`;
    }

    // Single-line: icon + text on same line
    const text = title || "";
    return `<blockquote class="bq-${k}"><i class="${icon} bq-icon"></i><p>${text}</p></blockquote>`;
  });
});

3. 添加 CSS 样式

  • 文件路径
1
source/css/article.css
  • 完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/* ===== 行内代码样式 ===== */
[data-theme="light"] #article-container code {
    background-color: var(--anzhiyu-main-op) !important;
    color: var(--anzhiyu-main) !important;
}

[data-theme="dark"] #article-container code {
    background-color: rgba(242, 185, 75, 0.2) !important;
    color: #f2b94b !important;
}

/* ===== Blockquote 默认样式 ===== */
blockquote {
    border: none;
    border-left: 4px solid var(--anzhiyu-lighttext);
}

[data-theme="light"] blockquote {
    background-color: var(--anzhiyu-main-op);
}

[data-theme="dark"] blockquote {
    background-color: rgba(242, 185, 75, 0.25);
}

/* ===== Blockquote 自动图标样式 ===== */
.bq-icon {
    position: absolute;
    left: 0.8em;
    top: calc(50% - 0.5em);
    font-size: larger;
}

blockquote:has(.bq-icon) {
    position: relative;
    padding-left: 3em;
}

/* 多行模式：图标对齐标题 */
blockquote:has(.bq-title) .bq-icon {
    top: 1.2em;
}

/* 标题样式 */
.bq-title {
    font-weight: bold;
    margin-bottom: 0.25em;
}

/* 🔵 蓝 — note, info, todo */
.bq-note,
.bq-info,
.bq-todo  { background-color: rgba(2,122,255,0.15) !important; border-left-color: #027AFF !important; color: #027AFF !important; }
.bq-note .bq-icon,
.bq-info .bq-icon,
.bq-todo .bq-icon { color: #027AFF; }

/* 🌀 青 — summary, tip, hint, important */
.bq-summary,
.bq-tip,
.bq-hint,
.bq-important  { background-color: rgba(83,223,221,0.15) !important; border-left-color: #53DFDD !important; color: #53DFDD !important; }
.bq-summary .bq-icon,
.bq-tip .bq-icon,
.bq-hint .bq-icon,
.bq-important .bq-icon { color: #53DFDD; }

/* 🟢 绿 — success, check, done */
.bq-success,
.bq-check,
.bq-done  { background-color: rgba(68,207,110,0.15) !important; border-left-color: #44CF6E !important; color: #44CF6E !important; }
.bq-success .bq-icon,
.bq-check .bq-icon,
.bq-done .bq-icon { color: #44CF6E; }

/* 🟠 橙 — help, faq, question, warning, caution */
.bq-help,
.bq-faq,
.bq-question,
.bq-warning,
.bq-caution  { background-color: rgba(233,151,63,0.15) !important; border-left-color: #E9973F !important; color: #E9973F !important; }
.bq-help .bq-icon,
.bq-faq .bq-icon,
.bq-question .bq-icon,
.bq-warning .bq-icon,
.bq-caution .bq-icon { color: #E9973F; }

/* 🔴 红 — fail, danger, error, bug */
.bq-fail,
.bq-danger,
.bq-error,
.bq-bug  { background-color: rgba(251,70,76,0.15) !important; border-left-color: #FB464C !important; color: #FB464C !important; }
.bq-fail .bq-icon,
.bq-danger .bq-icon,
.bq-error .bq-icon,
.bq-bug .bq-icon { color: #FB464C; }

/* 🟣 紫 — example, quote */
.bq-example,
.bq-quote  { background-color: rgba(168,130,255,0.15) !important; border-left-color: #A882FF !important; color: #A882FF !important; }
.bq-example .bq-icon,
.bq-quote .bq-icon { color: #A882FF; }

如何引用 CSS

在 _config.anzhiyu.yml 的 inject 配置中添加：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/article.css">

Obsidian 兼容

以上语法与 Obsidian Callout 完全一致，在 Obsidian 中编辑时也能正确渲染。

维护指南

改颜色

  • 只改 source/css/article.css 一处

新增关键字

需要同时改两个文件

  • JS — 增加图标映射：
1
2
3
4
const iconMap = {
  // ... 已有
  custom: "fas fa-star",
};
  • CSS — 增加颜色样式：
1
2
.bq-custom  { background-color: rgba(103,194,58,0.15) !important; border-left-color: #67c23a !important; color: #2e7d32 !important; }
.bq-custom .bq-icon { color: #67c23a; }

#主题 #建站 #博客