说明

已知文章目录最多支持2-4, 正文标题也是这样

使用ox-hugo导出时, 将标题级别大于4的转换为列表. 不过如果Markdown中包含5-6级标题也是可以识别和转换的

这个和Hugo Guidelines相悖, 没有折腾的必要

Guidelines

设计

参照Org中不同级别的标题前用星号指示, 且字体颜色不同

使用方块个数示意标题级别, 设置方块颜色对应某一级别

Font Awesome - Square

目前不支持标题下内容依照标题级别缩进

思路

Hugo提供渲染标题的模板, 于此处为标题添加方块

Hugo语法

slice

slice

创建字符集合

seq

seq

创建集合, 给出闭区间的开始和结束; 默认从1开始

{{ seq 2 }} → [1 2]
{{ seq 0 2 }} → [0 1 2]
{{ seq -2 2 }} → [-2 -1 0 1 2]
{{ seq -2 2 2 }} → [-2 0 2]

range

range

遍历集合, 使用索引和对应的值

Copy1{{ $s := slice "foo" "bar" "baz" }}
2{{ range $k, $v := $s }}
3  <p>{{ $k }}: {{ $v }}</p>
4{{ end }}

<p>0: foo</p>
<p>1: bar</p>
<p>2: baz</p>

实现

必须在最外面获取标题级别; 标题级别本就是数字; 修改锚图标

Copy 1{{ $level := .Level }}
 2
 3<!-- 只支持2-4 -->
 4<h{{ .Level }} id="{{ .Anchor | safeURL }}">
 5    {{ $s := slice "" "#941100" "#008f51" "#0096ff" "#000000" "#FFFFFF" "#FFFFFF" }}
 6    {{ range $k, $v := $s }}
 7        {{ if eq $k $level }}
 8            {{ range seq $k }}
 9            <svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="{{ $v }}" d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"/></svg>
10            {{ end }}
11        {{ end }}
12    {{ end }}
13    {{ .Text | safeHTML }} 
14    <a href="#{{ .Anchor | safeURL }}" class="anchor" aria-hidden="true">
15      <svg xmlns="http://www.w3.org/2000/svg" height="28" width="24.5" viewBox="0 0 448 512" class="bi bi-link"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="currentColor" d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320h95.1l21.3-128H187.1z"/></svg>
16    </a>
17</h{{ .Level }}>

便签

图标