diff --git a/exampleSite/content/docs/shortcodes/index.it.md b/exampleSite/content/docs/shortcodes/index.it.md
index 995b5894..9cf47639 100644
--- a/exampleSite/content/docs/shortcodes/index.it.md
+++ b/exampleSite/content/docs/shortcodes/index.it.md
@@ -71,18 +71,20 @@ Admonitions allow you to insert eye-catching callout boxes in your content.
Admonitions serve a similar purpose as the alert shortcode but are implemented via Hugo render hooks. The key difference is syntax: admonitions use Markdown syntax, making them more portable across different platforms, whereas shortcodes are specific to Hugo. The syntax resembles GitHub alerts:
```md
-> [!NOTE]
-> A Note type admonition.
+> [!TIP]
+> A Tip type admonition.
> [!TIP]+ Custom Title
> A collapsible admonition with custom title.
+{icon="twitter"}
```
-> [!NOTE]
-> A Note type admonition.
+> [!TIP]
+> A Tip type admonition.
> [!TIP]+ Custom Title
> A collapsible admonition with custom title.
+{icon="twitter"}
The alert sign (`+` or `-`) is optional to control whether the admonition is folded or not. Note that alert sign is only compatible in Obsidian.
diff --git a/exampleSite/content/docs/shortcodes/index.ja.md b/exampleSite/content/docs/shortcodes/index.ja.md
index dbae5cdf..e9db2a08 100644
--- a/exampleSite/content/docs/shortcodes/index.ja.md
+++ b/exampleSite/content/docs/shortcodes/index.ja.md
@@ -71,18 +71,20 @@ Admonitions は、文書内で読者の注意を引くための強調表示を
Admonitions は alert ショートコードと同様の目的を持ちますが、Hugo の render hooks を用いて実装されています。両者の主な違いは構文にあります。admonitions は Markdown 構文を使用するため、異なるプラットフォーム間でも扱いやすく、一方、ショートコードは Hugo 固有の仕組みです。構文は GitHub の alerts に近い形式です。
```md
-> [!NOTE]
-> NOTE タイプの表示例。
+> [!TIP]
+> Tip タイプの表示例。
> [!TIP]+ カスタムタイトル
> タイトルを指定した折りたたみ可能な表示例。
+{icon="twitter"}
```
-> [!NOTE]
-> NOTE タイプの表示例。
+> [!TIP]
+> Tip タイプの表示例。
> [!TIP]+ カスタムタイトル
> タイトルを指定した折りたたみ可能な表示例。
+{icon="twitter"}
記号（`+` または `-`）は任意で、表示を折りたたむかどうかを制御します。なお、この記号は Obsidian のみ対応しています。
diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 5f40e991..b257b1b7 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -71,18 +71,20 @@ Admonitions allow you to insert eye-catching callout boxes in your content.
Admonitions serve a similar purpose as the alert shortcode but are implemented via Hugo render hooks. The key difference is syntax: admonitions use Markdown syntax, making them more portable across different platforms, whereas shortcodes are specific to Hugo. The syntax resembles GitHub alerts:
```md
-> [!NOTE]
-> A Note type admonition.
+> [!TIP]
+> A Tip type admonition.
-> [!TIP]+ Custom Title
+> [!TIP]+ Custom Title + Custom Icon
> A collapsible admonition with custom title.
+{icon="twitter"}
```
-> [!NOTE]
-> A Note type admonition.
+> [!TIP]
+> A Tip type admonition.
-> [!TIP]+ Custom Title
+> [!TIP]+ Custom Title + Custom Icon
> A collapsible admonition with custom title.
+{icon="twitter"}
The alert sign (`+` or `-`) is optional to control whether the admonition is folded or not. Note that alert sign is only compatible in Obsidian.
@@ -92,6 +94,9 @@ The alert sign (`+` or `-`) is optional to control whether the admonition is fol
> **GitHub types:** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`
> **Obsidian types:** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote`
+> [!INFO]- Customize admonition
+> See the [admonition customization guide](https://github.com/nunocoracao/blowfish/blob/main/layouts/_default/_markup/render-blockquote.html).
+
## Article
diff --git a/exampleSite/content/docs/shortcodes/index.zh-cn.md b/exampleSite/content/docs/shortcodes/index.zh-cn.md
index df543782..ee3aa861 100644
--- a/exampleSite/content/docs/shortcodes/index.zh-cn.md
+++ b/exampleSite/content/docs/shortcodes/index.zh-cn.md
@@ -71,18 +71,20 @@ Admonition 用于在内容中插入醒目提示。
Admonition 的用途与 alert shortcode 类似，但其实现方式是通过 Hugo 的 render hooks。两者的关键区别在于语法：admonition 使用 Markdown 语法，因此在不同平台之间具有更好的可移植性；而 shortcode 是 Hugo 专有的。其语法类似 GitHub 的 alerts：
```md
-> [!NOTE]
-> 一个 NOTE 类型的提示块。
+> [!TIP]
+> 一个 Tip 类型的提示块。
> [!TIP]+ 自定义标题
> 一个带有自定义标题的可折叠提示块。
+{icon="twitter"}
```
-> [!NOTE]
-> 一个 NOTE 类型的提示块。
+> [!TIP]
+> 一个 Tip 类型的提示块。
> [!TIP]+ 自定义标题
> 一个带有自定义标题的可折叠提示块。
+{icon="twitter"}
提示符号（`+` 或 `-`）是可选的，用于控制提示块是否默认折叠。请注意，该提示符号仅在 Obsidian 中兼容。
@@ -92,6 +94,9 @@ Admonition 的用途与 alert shortcode 类似，但其实现方式是通过 Hug
> **GitHub 类型：** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`
> **Obsidian 类型：** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote`
+> [!INFO]- 自定义提示框
+> 请参阅 [提示框自定义指南](https://github.com/nunocoracao/blowfish/blob/main/layouts/_default/_markup/render-blockquote.html)。
+
## Article
diff --git a/layouts/_default/_markup/render-blockquote.html b/layouts/_default/_markup/render-blockquote.html
index 0b22ee35..6a8e5afa 100644
--- a/layouts/_default/_markup/render-blockquote.html
+++ b/layouts/_default/_markup/render-blockquote.html
@@ -1,40 +1,38 @@
-{{- if eq .Type "alert" -}}
- {{- $typeMap := dict
- "attention" "warning"
- "check" "success"
- "cite" "quote"
- "done" "success"
- "error" "danger"
- "fail" "failure"
- "faq" "question"
- "hint" "tip"
- "help" "question"
- "missing" "failure"
- "summary" "abstract"
- "tldr" "abstract"
- -}}
+{{- /* To customize your own admonitions, you can do the following:
- {{- $iconMap := dict
- "abstract" "file-lines"
- "bug" "bug"
- "caution" "fire"
- "danger" "fire"
- "example" "list-ol"
- "failure" "xmark"
- "important" "star"
- "info" "circle-info"
- "note" "circle-info"
- "success" "check"
- "todo" "list-check"
- "tip" "lightbulb"
- "question" "circle-question"
- "quote" "quote-left"
- "warning" "triangle-exclamation"
- -}}
+ 1. Change colors
+
+ Define your colors in `assets/css/custom.css` using the variables from:
+ https://github.com/nunocoracao/blowfish/blob/main/assets/css/components/admonition.css
+
+ Example:
+ ```
+ :root {
+ --adm-note-bg: red;
+ }
+ html.dark {
+ --adm-note-bg: green;
+ }
+ ```
+
+ This will update the background color for light and dark mode.
+
+ 2. Change icons and type settings
+
+ You can override the default type and icon mappings by creating your own
+ `impls/hooks/admonition-maps.html` in your `layouts` folder.
+ This allows you to assign different icons or styles for each admonition type.
+*/ -}}
+
+{{- if eq .Type "alert" -}}
+ {{- $maps := partialCached "impls/hooks/admonition-maps.html" . -}}
+ {{- $typeMap := $maps.typeMap -}}
+ {{- $iconMap := $maps.iconMap -}}
{{- $rawType := .AlertType | lower -}}
{{- $normalizedType := index $typeMap $rawType | default $rawType -}}
- {{- $iconName := index $iconMap $normalizedType | default "circle-info" -}}
+ {{- $iconName := .Attributes.icon | default (index $iconMap $normalizedType) | default "circle-info" -}}
+
{{- $admonitionTitle := .AlertTitle | default (i18n (printf "admonition.%s" $normalizedType) | default $normalizedType) -}}
{{- $containerClass := "admonition relative overflow-hidden rounded-lg border-l-4 my-3 px-4 py-3 shadow-sm" -}}
@@ -84,7 +82,12 @@
{{- end -}}
{{- else -}}
-
+
{{- .Text | safeHTML -}}
{{- end -}}
diff --git a/layouts/partials/impls/hooks/admonition-maps.html b/layouts/partials/impls/hooks/admonition-maps.html
new file mode 100644
index 00000000..1bdd02f3
--- /dev/null
+++ b/layouts/partials/impls/hooks/admonition-maps.html
@@ -0,0 +1,34 @@
+{{- /* Override this file in your site to customize admonition type aliases and icon mappings */ -}}
+{{- return dict
+ "typeMap" (dict
+ "attention" "warning"
+ "check" "success"
+ "cite" "quote"
+ "done" "success"
+ "error" "danger"
+ "fail" "failure"
+ "faq" "question"
+ "hint" "tip"
+ "help" "question"
+ "missing" "failure"
+ "summary" "abstract"
+ "tldr" "abstract"
+ )
+ "iconMap" (dict
+ "abstract" "file-lines"
+ "bug" "bug"
+ "caution" "fire"
+ "danger" "fire"
+ "example" "list-ol"
+ "failure" "xmark"
+ "important" "star"
+ "info" "circle-info"
+ "note" "circle-info"
+ "success" "check"
+ "todo" "list-check"
+ "tip" "lightbulb"
+ "question" "circle-question"
+ "quote" "quote-left"
+ "warning" "triangle-exclamation"
+ )
+-}}