💄 Add github alert blockquote in markdown.

assets/css/_common/components/post/post-alert.scss

@@ -0,0 +1,36 @@
+
+@mixin alert-styles($type, $color) {
+  .post-alert-#{$type} {
+    padding: 0 0 0 10px;
+    border-left: 6px solid $color;
+    font-size: 0.825em;
+    color: $color;
+  }
+}
+
+@each $key, $color in $post_alert_colors {
+  @include alert-styles(#{$key}, $color);
+}
+
+.post-alert-title {
+
+  display: flex;
+  align-items: center;
+  line-height: 1.5;
+  margin: 0;
+
+  i {
+    font-size: 1.25em;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  span {
+    margin: 0 0 0 8px;
+    letter-spacing: 0.08em;
+  }
+}
+
+.post-alert-content {
+  color: var(--text-color);
+}

assets/css/_common/components/post/post-body.scss

@@ -85,4 +85,6 @@
   #more {
     visibility: hidden;
   }
+
+@import 'post-alert';
 }

assets/css/main.scss

@@ -87,6 +87,7 @@ $reward_settings_animation  : {{ $P.rewardSets.animation }};
 $post_end_tag_icon          : {{ $P.postFooter.tagIcon }};
 $post_share_enable          : {{ $P.share.enable }};
 $post_sharethis_set         : {{ isset $P.share "sharethis" }};
+$post_alert_colors          : ({{ range $key, $value := $P.postAlerts }} {{ $key }}: {{ $value.color }}, {{ end }});
 
 // TODO find the paramters
 $text_align_desktop         : {{ $P.textAlign.desktop }};

data/resources.yaml

@@ -64,7 +64,7 @@ js:
 # CSS Resources
 css:
   - name: font-awesome
-    version: 6.6.0
+    version: 6.7.2
     file: css/all.min.css
     alias: '@fortawesome/fontawesome-free'
 

exampleSite/content/post/hugo-blockquote.md

@@ -0,0 +1,150 @@
+---
+title: "支持在Markdown文档中实现块信息强调标注"
+description: "在新版本Hugo框架中添加了对blockquote样式渲染，支持自定义样式设计，实现类似Github的警告风格样式。"
+keywords: "hugo,block,quote"
+
+date: 2025-01-02T16:08:02+08:00
+lastmod: 2025-01-02T16:08:02+08:00
+
+categories:
+  - 示例文章
+  - 语法
+tags:
+  - blockquote
+  - Hugo
+
+url: "demo/hugo-blockquote.html"
+toc: true
+---
+
+过去 `HugoNexT` 主题都是通过自定义短语来实现块信息的标注，近期发现 `Hugo` 从[v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)版本开始便是可以支持通过hook方式渲染Markdown文档中的Blockquote样式（需要自己实现），实现类似Github的警告风格样式。于是便在 `HugoNexT` 主题中添加7种不同风格供用户可选择使用，还可以自定义图标与颜色配置。
+
+
+<!--more-->
+
+
+用户可以找到如下两处配置项的位置，然后根据自己喜欢的风格和颜色进行调整：
+
+```yaml
+
+# config.yaml 或 hugo.toml
+
+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"
+```
+
+```yaml
+# i18n/zh-cn.yaml
+
+PostAlert:
+  info     : "信息"
+  note     : "注意"
+  help     : "帮助"
+  error    : "错误"
+  warning  : "警告"
+  success  : "成功"
+  important: "重要"
+```
+
+在Maarkdown文档中的写法和实现的具体效果参考如下：
+
+## 信息提示
+
+```markdown
+> [!INFO]
+> `HugoNexT` 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
+```
+
+> [!INFO]
+> `HugoNexT` 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
+
+## 注意信息
+
+```markdown
+> [!NOTE]
+> 最新版本的 `HugoNexT` 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
+```
+
+> [!NOTE]
+> 最新版本的 `HugoNexT` 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
+
+## 帮助信息
+
+```markdown
+> [!HELP]
+> `HugoNexT` 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
+```
+
+> [!HELP]
+> `HugoNexT` 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
+
+## 警告信息
+
+```markdown
+> [!WARNING]
+> `HugoNexT` 主题使用了SCSS 预编译，需要下载 Hugo 官方 `hugo-extended` 版本使用。
+```
+
+> [!WARNING]
+> `HugoNexT` 主题使用了SCSS 预编译，需要下载 Hugo 官方 `hugo-extended` 版本使用。
+
+## 错误信息
+
+```markdown
+> [!ERROR]
+> `HugoNexT` 主题只支持在 Hugo v0.132.0 及以上版本中使用。
+```
+
+> [!ERROR]
+> `HugoNexT` 主题只支持在 Hugo v0.132.0 及以上版本中使用。
+
+## 成功信息
+
+```markdown
+> [!SUCCESS]
+> 恭喜你已经成功部署 `HugoNexT` 主题，请尽情的开始你的创作吧。
+```
+
+> [!SUCCESS]
+> 恭喜你已经成功部署 `HugoNexT` 主题，请尽情的开始你的创作吧。
+
+## 重要信息
+
+```markdown
+> [!IMPORTANT]
+> `HugoNexT` 主题支持使用外部的CDN服务，但此时请确保你的网络是正常且可访问CDN服务。
+```
+
+> [!IMPORTANT]
+> `HugoNexT` 主题支持使用外部的CDN服务，但此时请确保你的网络是正常且可访问CDN服务。
+
+
+## 自定义标题
+
+```markdown
+> [!Info]+ 自定义标题说明 
+> `HugoNexT` 主题提供很开放的灵活配置，用户可按自己的想法改造。
+```
+
+> [!Info]+ 自定义标题说明 
+> `HugoNexT` 主题提供很开放的灵活配置，用户可按自己的想法改造。

i18n/en.yaml

@@ -72,12 +72,14 @@ PostMeta:
   more: "Read More"
   edit: "Edit this post"
 
-Reward:
+PostAlert:
-  title: Donate
+  info     : "Info"
-  wechatpay: WechatPay
+  note     : "Note"
-  alipay: Alipay
+  help     : "Help"
-  paypal: Paypal
+  error    : "Error"
-  bitcoin: Bitcoin
+  warning  : "Warning"
+  success  : "Success"
+  important: "Important"
 
 PostCopyRight:
   title:  Post Title
@@ -96,6 +98,13 @@ PostFollowMe:
 PostComments:
   title: Comments
 
+Reward:
+  title: Donate
+  wechatpay: WechatPay
+  alipay: Alipay
+  paypal: Paypal
+  bitcoin: Bitcoin
+
 SiteInfoItems:
   title: "Web Status"
   runTimes: "Running:"

i18n/fr.yaml

@@ -18,7 +18,6 @@ CateTitle:
 AllSome:
   other: "Total :{{ .Some }}" 
 
-
 Symbol:
   colon: ":"
   comma: ","
@@ -72,12 +71,14 @@ PostMeta:
   more: "Lire la suite"
   edit: "Editer ce billet"
 
-Reward:
+PostAlert:
-  title: Donner
+  info     : "Info"
-  wechatpay: WechatPay
+  note     : "Note"
-  alipay: Alipay
+  help     : "Aide"
-  paypal: Paypal
+  error    : "Erreur"
-  bitcoin: Bitcoin
+  warning  : "Avertissement"
+  success  : "Succès"
+  important: "Inportant"
 
 PostCopyRight:
   title:  Titre du billet
@@ -96,6 +97,13 @@ PostFollowMe:
 PostComments:
   title: Commentaires
 
+Reward:
+  title: Donner
+  wechatpay: WechatPay
+  alipay: Alipay
+  paypal: Paypal
+  bitcoin: Bitcoin
+
 SiteInfoItems:
   title: "Statistiques"
   runTimes: "En cours:"

i18n/zh-cn.yaml

@@ -72,12 +72,14 @@ PostMeta:
   more: 阅读全文
   edit: 编辑
 
-Reward:
+PostAlert:
-  title: 赞赏
+  info     : "信息"
-  wechatpay: 微信
+  note     : "注意"
-  alipay: 支付宝
+  help     : "帮助"
-  paypal: Paypal
+  error    : "错误"
-  bitcoin: 比特币
+  warning  : "警告"
+  success  : "成功"
+  important: "重要"
 
 PostCopyRight:
   title: 文章标题
@@ -96,6 +98,13 @@ PostFollowMe:
 PostComments:
   title: 评论交流
 
+Reward:
+  title: 赞赏
+  wechatpay: 微信
+  alipay: 支付宝
+  paypal: Paypal
+  bitcoin: 比特币
+
 SiteInfoItems:
   title: "网站资讯"
   runTimes: "已运行："

i18n/zh-tw.yaml

@@ -72,12 +72,14 @@ PostMeta:
   more: 閱讀全文
   edit: 編輯
 
-Reward:
+PostAlert:
-  title: 讚賞
+  info     : "信息 "
-  wechatpay: 微信
+  note     : "注意"
-  alipay: 支付寶
+  help     : "幫助"
-  paypal: Paypal
+  error    : "錯誤"
-  bitcoin: 比特幣
+  warning  : "警告"
+  success  : "成功"
+  important: "重要"
 
 PostCopyRight:
   title: 文章標題
@@ -96,6 +98,13 @@ PostFollowMe:
 PostCommentTitle:
   other: 評論交流
 
+Reward:
+  title: 讚賞
+  wechatpay: 微信
+  alipay: 支付寶
+  paypal: Paypal
+  bitcoin: 比特幣
+
 SiteInfoItems:
   title: "網站資訊"
   runTimes: "已運行："

layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,23 @@
+{{ 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 }}