早期在Hugo NexT主题中使用短代码方式实现过对不同类型消息的样式支持，只不过是使用时需要用户书写完整短代码不是很方便，同时输出的效果是独立的块占用空间比较大。后来发现Hugo框架在新版中支持了自定义 blockquote的渲染方式，于是乎便有点有新的想法，让用户直接使用Markdown语法来书写不同消息内容，输出的效果实现类似于Github的警告样式，这样使用起来会更加方便。下面就来看看相关实现思路和使用方式吧。
直接参考了官方提供的示例
blockquotes
，在主题中实现自己定义的blockquote渲染重写，增加了alert类型识别判断，具体的代码参考如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!-- layouts/partials/render-blockquotes.html -->
{{ if eq .Type "alert" }}
{{ $postAlert := site.Params.postAlerts }}
{{ $alertCfg := index $postAlert .AlertType }}
<div class="post-alert-{{ .AlertType }}">
<div class="post-alert-title">
<i class="fa-solid fa-{{ $alertCfg.icon }}"></i>
<span>
{{ with .AlertTitle }}
{{ . }}
{{ else }}
{{ or (T (printf "PostAlert.%s" .AlertType)) (title .AlertType) }}
{{ end }}
</span>
</div>
<div class="post-alert-content">
{{ .Text }}
</div>
</div>
{{ else }}
<blockquote>
{{ .Text }}
</blockquote>
{{ end }}
|
考虑到了灵活性和用户的个性化需求，这里把alert中的颜色和图标，以及说明文字都做成了可配置的参数，用户可根据自己的喜好进行调整。其中颜色和图标在全局配置参数中，可找到如下配置项进行必要的调整：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| # 文章内容中的提示信息设置
# icon图标：https://fontawsome.com
postAlerts:
info:
icon: "circle-info"
color: "#4A90E2"
note:
icon: "bell"
color: "#17A2B8"
help:
icon: "circle-question"
color: "#967ADC"
error:
icon: "circle-xmark"
color: "#DC3545"
warning:
icon: "triangle-exclamation"
color: "#F39C12"
success:
icon: "circle-check"
color: "#32CD32"
important:
icon: "circle-plus"
color: "#007BFF"
|
另外对于不同类型消息的描述说明，是放在了i18n配置文件中，方便用户根据自己的语言环境或需求进行调整：
1
2
3
4
5
6
7
8
| PostAlert:
info : "信息"
note : "注意"
help : "帮助"
error : "错误"
warning : "警告"
success : "成功"
important: "重要"
|
上述这些参数配置在Hugo NexT主题中都已有默认的设置，使用时直接在文章中使用Markdown语法书写即可，部分用法示例参考如下：
1
2
3
4
5
6
7
8
9
10
11
12
|
> [!INFO]
> `HugoNexT` 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
> [!NOTE]
> 最新版本的 `HugoNexT` 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
> [!HELP]
> `HugoNexT` 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
> [!WARNING]
> `HugoNexT` 主题使用了SCSS 预编译，需要下载 Hugo 官方 `hugo-extended` 版本使用。
|
上述这些用法示例的输出实际效果如下所示：
信息
HugoNexT 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
注意
最新版本的 HugoNexT 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
帮助
HugoNexT 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
警告
HugoNexT 主题使用了SCSS 预编译，需要下载 Hugo 官方 hugo-extended 版本使用。
这相比较于之前的短代码方式，使用起来是更加方便，而且Github的警告样式在整体的风格上也是和文章更为契合，能让读者的阅读体验也更好些。如果你喜欢的话，就赶紧去升级下你的Hugo NexT主题吧！
