之前没太使用过 admonition,网上搜了一下基本上是使用短代码 shortcode 的方式,如何移植HUGO Loveit主題的admonition shortcodes | 懶懶部落 如果想使用该方式的话可以参考这篇文章,而且目前 css 上面都设置好了,挺好看的Responsive Image

image-20240926225429145

要使用该方法,markdown格式为

Responsive Image

image.png

Responsive Image

image-20240926225625081


下面来说如果要跟ob格式一样的适配

Responsive Image

image-20240926225729198

Responsive Image

image-20240926225742272

效果

Responsive Image

image-20240926225807051

没有做css适配,目前就是这个样子😆

非常重要的一点

首先该功能只有hugo version 0.132.0 以上才可以使用

打开cmd 输入hugo version ,检查一下hugo的版本

Responsive Image

image-20240926230409504

如果低于此版本,须先将版本进行升级

下面进行第一步

在对应的config.toml中添加设置代码

1
2
3
4
5
markup:
  goldmark:
    parser:
      attribute:
        block: true

Responsive Image

image-20240926225936796

新建一个html文件 路径layouts/_default/_markup/render-blockquote.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{{ $emojis := dict
  "caution" ":exclamation:"
  "important" ":information_source:"
  "note" ":information_source:"
  "tip" ":bulb:"
  "warning" ":information_source:"
}}

{{ if eq .Type "alert" }}
  <blockquote class="alert alert-{{ .AlertType }}">
    <p class="alert-heading">
      {{ transform.Emojify (index $emojis .AlertType) }}
      {{ with .AlertTitle }}
        {{ . }}
      {{ else }}
        {{ or (i18n .AlertType) (title .AlertType) }}
      {{ end }}
    </p>
    {{ .Text }}
  </blockquote>
{{ else }}
  <blockquote>
    {{ .Text }}
  </blockquote>
{{ end }}

Responsive Image

image-20240926230000815

这样就好了

在markdown中输入

Responsive Image

image.png

会显示这样

Responsive Image

image-20240926230546661

没有加title,然后没有加css,后续有机会再折腾吧

参考 hugo 官方文档