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

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

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

Markdown 示例——不区分大小写

1
2
3
4
5
6
7
8
9
10
11
12
13
> [!WARNING] 按图操作，注意端口一定不要错，格式 `localhost:25002`

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

> [!SUCCESS] 操作成功完成！现在可以正常访问了

> [!DANGER] 切勿在公网暴露端口

> [!TIP] 建议使用最新版本，旧版本可能存在兼容性问题

> [!NOTE] 这是一个普通备注，用于补充说明

> [!HELP] 纸上得来终觉浅，绝知此事要躬行

效果预览

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

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

操作成功完成！现在可以正常访问了

切勿在公网暴露端口

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

这是一个普通备注，用于补充说明

纸上得来终觉浅，绝知此事要躬

文件清单

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

步骤一：创建 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
/**
 * blockquote.js
 * Auto-add FA icons to blockquotes with Obsidian/GitHub callout syntax
 * Color definitions are in source/css/article.css
 */

"use strict";

const iconMap = {
  note: "fas fa-sticky-note",
  summary: "fas fa-clipboard-list",
  info: "fas fa-info-circle",
  todo: "fas fa-check-circle",
  important: "fas fa-star",
  tip: "fas fa-lightbulb",
  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",
  warning: "fas fa-exclamation-triangle",
  caution: "fas fa-exclamation-triangle",
  danger: "fas fa-times-circle",
  error: "fas fa-circle-exclamation",
  fail: "fas fa-times-circle",
  bug: "fas fa-bug",
  example: "fas fa-flask",
  quote: "fas fa-quote-right",
};

const keywords = Object.keys(iconMap).join("|");
const regex = new RegExp(
  `<blockquote>\\s*<p>\\s*\\[!\\s*(${keywords})\\s*\\]\\s+(.*?)<\\/p>\\s*<\\/blockquote>`,
  "gis"
);

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

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

    return `<blockquote class="bq-${k}"><i class="${icon} bq-icon"></i><p>${text}</p></blockquote>`;
  });
});

代码说明

部分 说明
iconMap 关键字 → FA 图标类名映射，颜色不在这里定义
regex 动态正则，自动匹配所有关键字，支持 [!KEYWORD] 格式
after_post_render Hexo filter，在文章渲染完成后执行转换

步骤二：添加 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
/* ===== 行内代码样式 ===== */
[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;
}

/* 橙 */
.bq-warning,
.bq-caution  { background-color: rgba(242,185,75,0.15) !important; border-left-color: #f2b94b !important; color: #b8860b !important; }
.bq-warning .bq-icon,
.bq-caution .bq-icon { color: #f2b94b; }

/* 蓝 */
.bq-info,
.bq-todo,
.bq-important  { background-color: rgba(66,90,239,0.15) !important; border-left-color: #425aef !important; color: #425aef !important; }
.bq-info .bq-icon,
.bq-todo .bq-icon,
.bq-important .bq-icon { color: #425aef; }

/* 绿 */
.bq-success,
.bq-check,
.bq-done  { background-color: rgba(103,194,58,0.15) !important; border-left-color: #67c23a !important; color: #2e7d32 !important; }
.bq-success .bq-icon,
.bq-check .bq-icon,
.bq-done .bq-icon { color: #67c23a; }

/* 红 */
.bq-danger,
.bq-error,
.bq-fail,
.bq-bug  { background-color: rgba(220,53,69,0.15) !important; border-left-color: #dc3545 !important; color: #c62828 !important; }
.bq-danger .bq-icon,
.bq-error .bq-icon,
.bq-fail .bq-icon,
.bq-bug .bq-icon { color: #dc3545; }

/* 金 */
.bq-tip,
.bq-quote  { background-color: rgba(230,162,60,0.15) !important; border-left-color: #e6a23c !important; color: #b8860b !important; }
.bq-tip .bq-icon,
.bq-quote .bq-icon { color: #e6a23c; }

/* 紫 */
.bq-note,
.bq-example  { background-color: rgba(168,85,247,0.15) !important; border-left-color: #a855f7 !important; color: #7b1fa2 !important; }
.bq-note .bq-icon,
.bq-example .bq-icon { color: #a855f7; }

/* 青 */
.bq-summary,
.bq-help,
.bq-faq  { background-color: rgba(0,188,212,0.15) !important; border-left-color: #00bcd4 !important; color: #00838f !important; }
.bq-summary .bq-icon,
.bq-help .bq-icon,
.bq-faq .bq-icon { color: #00bcd4; }

CSS 说明

选择器 作用
blockquote 默认引用块样式：左侧 4px 竖线
[data-theme] blockquote 深浅色模式背景色
.bq-icon 图标定位（绝对定位，垂直居中）
blockquote:has(.bq-icon) 有图标的引用块增加左内边距
.bq-* 各类颜色定义

如何引用 CSS

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

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

如果已有 inject 配置，追加一行即可。

步骤三：在文章中使用

支持的 19 个关键字（大小写均可）

写法 (支持小写) 效果 色系
> [!NOTE] 内容 📝 普通备注 🟣 紫
> [!EXAMPLE] 内容 🧪 示例 🟣 紫
> [!SUMMARY] 内容 📋 摘要 🌀 青
> [!HELP] 内容 ❓ 帮助 🌀 青
> [!FAQ] 内容 ❓ 常见问题 🌀 青
> [!INFO] 内容 ℹ️ 提示信息 🔵 蓝
> [!TODO] 内容 ✅ 待办事项 🔵 蓝
> [!IMPORTANT] 内容 ⭐ 重要提醒 🔵 蓝
> [!TIP] 内容 💡 小技巧 🟡 金
> [!QUOTE] 内容 💬 引用 🟡 金
> [!SUCCESS] 内容 ✅ 操作成功 🟢 绿
> [!CHECK] 内容 ✅ 已检查 🟢 绿
> [!DONE] 内容 ✅ 已完成 🟢 绿
> [!WARNING] 内容 ⚠️ 警告 🟠 橙
> [!CAUTION] 内容 ⚠️ 谨慎 🟠 橙
> [!DANGER] 内容 ❌ 危险 🔴 红
> [!ERROR] 内容 ❌ 错误 🔴 红
> [!FAIL] 内容 ❌ 失败 🔴 红
> [!BUG] 内容 🐛 已知问题 🔴 红

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; }

#主题 #建站 #博客