之前没太使用过 admonition,网上搜了一下基本上是使用短代码 shortcode 的方式,如何移植HUGO Loveit主題的admonition shortcodes | 懶懶部落 如果想使用该方式的话可以参考这篇文章,而且目前 css 上面都设置好了,挺好看的
Responsive Image要使用该方法,markdown格式为
Responsive ImageResponsive Image
下面来说如果要跟ob格式一样的适配
Responsive ImageResponsive Image效果
Responsive Image没有做css适配,目前就是这个样子😆
非常重要的一点
首先该功能只有hugo version 0.132.0 以上才可以使用
打开cmd 输入hugo version
,检查一下hugo的版本
Responsive Image如果低于此版本,须先将版本进行升级
下面进行第一步
在对应的config.toml中添加设置代码
1
2
3
4
5
| markup:
goldmark:
parser:
attribute:
block: true
|
Responsive Image新建一个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这样就好了
在markdown中输入
Responsive Image会显示这样
Responsive Image没有加title,然后没有加css,后续有机会再折腾吧
参考 hugo 官方文档