支持在Markdown文档中实现块信息强调标注

发表于： 更新于： 分类于：
字数： 973 阅读：≈ 2分钟 浏览：
温馨提醒
总结摘要
在新版本Hugo框架中添加了对blockquote样式渲染，支持自定义样式设计，实现类似Github的警告风格样式。

过去 HugoNexT 主题都是通过自定义短语来实现块信息的标注，近期发现 Hugo 从 v0.134.0 版本开始便是可以支持通过hook方式渲染Markdown文档中的Blockquote样式（需要自己实现），实现类似Github的警告风格样式。于是便在 HugoNexT 主题中添加7种不同风格供用户可选择使用，还可以自定义图标与颜色配置。

用户可以找到如下两处配置项的位置，然后根据自己喜欢的风格和颜色进行调整：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 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"
1
2
3
4
5
6
7
8
9

# i18n/zh-cn.yaml
PostAlert:
  info     : "信息"
  note     : "注意"
  help     : "帮助"
  error    : "错误"
  warning  : "警告"
  success  : "成功"
  important: "重要"

在Maarkdown文档中的写法和实现的具体效果参考如下：

信息提示 

1
2

> [!INFO]
> `HugoNexT` 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。
信息

HugoNexT 主题支持自定义样式设计，你可实现属于自己站点的个性化设计。

注意信息 

1
2

> [!NOTE]
> 最新版本的 `HugoNexT` 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。
注意

最新版本的 HugoNexT 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。

帮助信息 

1
2

> [!HELP]
> `HugoNexT` 主题提供了完整的示例使用说明及源代码，上手更为简单易用。
帮助

HugoNexT 主题提供了完整的示例使用说明及源代码，上手更为简单易用。

警告信息 

1
2

> [!WARNING]
> `HugoNexT` 主题使用了SCSS 预编译，需要下载 Hugo 官方 `hugo-extended` 版本使用。
警告

HugoNexT 主题使用了SCSS 预编译，需要下载 Hugo 官方 hugo-extended 版本使用。

错误信息 

1
2

> [!ERROR]
> `HugoNexT` 主题只支持在 Hugo v0.132.0 及以上版本中使用。
错误

HugoNexT 主题只支持在 Hugo v0.132.0 及以上版本中使用。

成功信息 

1
2

> [!SUCCESS]
> 恭喜你已经成功部署 `HugoNexT` 主题，请尽情的开始你的创作吧。
成功

恭喜你已经成功部署 HugoNexT 主题，请尽情的开始你的创作吧。

重要信息 

1
2

> [!IMPORTANT]
> `HugoNexT` 主题支持使用外部的CDN服务，但此时请确保你的网络是正常且可访问CDN服务。
重要

HugoNexT 主题支持使用外部的CDN服务，但此时请确保你的网络是正常且可访问CDN服务。

自定义标题 

1
2

> [!Info]+ 自定义标题说明 
> `HugoNexT` 主题提供很开放的灵活配置，用户可按自己的想法改造。
自定义标题说明

HugoNexT 主题提供很开放的灵活配置，用户可按自己的想法改造。