支持Github风格的警告样式
温馨提醒
总结摘要
现可以支持在撰写文章的过程中，直接使用`Markdown`语法来书写不同类型的警告消息，让文章的内容更加丰富和易读，快来看看它的使用和效果吧。
早期在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主题吧！
腾讯云开发者
