PaperMod：主题个性化

前言

想着把每个操作都记录下来，但是发现一些基础配置记录太多了，想快速上手，于是就只贴链接了，后续有新的更改和优化会专门成一个记录，初期看到的就只放链接了（到处CV，哈哈哈哈）。当时也看到很多大佬开源博客代码，但是想着一点点搭建起来更有体验。

区分列表和文章的导航文字

PaperMod 列表页面和文章页面的导航文字都是上一页/下一页，这在中文表述中不太准确，因此将文章页面的文字改为上一篇/下一篇。

编辑 i18n

1
2
3
4
5
6
# 加入这几行
- id: prev_post
  translation: "上一篇"

- id: next_post
  translation: "下一篇"

编辑页面导航模板 layouts/partials/post_nav_links.html，新建/追加：

1
2
{{ i18n "prev_page" }} 改为 {{ i18n "prev_post" }}
{{ i18n "next_page" }} 改为 {{ i18n "next_post" }}

参考教程

hugo-papermodx-distinguish-nav

自定义字体

博客：落霞孤鹜系列字体
正文：LXGW WenKai Lite 字体
公式使用 Arial 字体

在 layouts/partials/extend_head.html 中引入 CDN：

1
2
3
4
5
6
7
8
<!-- 霞鹜字体 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
<!-- Lite version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
<!-- TC version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
<!-- Screen version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />

在 assets/css/extended/custome.css 中添加字体样式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* 正文字体 */
.post-content {
    font-family: LXGW WenKai Lite, sans-serif;
}

body {
    font-size: 18px;
    line-height: 1.6;
    font-family: LXGW WenKai Lite, sans-serif;
}

在 assets/css/extended/admonition.css 处修改 admonition 注释框中的字体。

1
2
3
4
5
/* admonition注释框字体 */
body,
.admonition {
    font-family: LXGW WenKai Lite, sans-serif, Arial;
}

添加 favicon

图片文件放在根目录下的 static 下面的 imgs 中。
修改 config/_default/hugo.yaml 中的 favicon 配置：

1
2
3
4
5
6
7
params:
  assets:
      favicon: "imgs/favicon.png"
      favicon16x16: "imgs/favicon.png"
      favicon32x32: "imgs/favicon.png"
      apple_touch_icon: "imgs/favicon.png"
      safari_pinned_tab: "imgs/favicon.png"

添加MathJax

在 config/_default/markup.yaml 和 config/production/params.yaml 中添加下面配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
markup:
  goldmark:
    extensions:
      passthrough:
        delimiters:
          block:
          - - \[
            - \]
          - - $$
            - $$
          inline:
          - - \(
            - \)
        enable: true
params:
  math: true

修改 block 和 inlin （可以删除，忽略内联公式）符号，可以自定义公式起始符号。

在 layouts/partials/mathjax.html 中添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
  MathJax = {
    tex: {
      displayMath: [['\\[', '\\]'], ['$$', '$$']],  // block
      inlineMath: [['\\(', '\\)']]                  // inline
    },
    loader:{
      load: ['ui/safe']
    },
  };
</script>

可以写入基础模板 layouts/_default/baseof.html 里面调用，也可以直接写在 layouts/partials/extend_head.html 中：

1
2
3
4
<!-- MathJax -->
{{ if .Param "math" }}
    {{ partialCached "mathjax.html" . }}
{{ end }}

示例：

This is an inline \(a^*=x-b^*\) equation.

These are block equations:

\[a^*=x-b^*\]\[ a^*=x-b^* \]\[ a^*=x-b^* \]

参考教程

参考：Hugo-mathematics

进度条实现

在 layouts/partials/extend_head.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
<!-- 进度条 HTML -->
<div class="progress-bar"></div>

<!-- 进度条 JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    const progressBar = document.querySelector('.progress-bar');

    // 计算滚动进度
    const calculateScrollProgress = () => {
        const windowHeight = window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight - windowHeight;
        const scrollTop = window.scrollY;
        const progress = (scrollTop / documentHeight) * 100;
        progressBar.style.width = `${progress}%`;
    };

    // 监听滚动事件
    window.addEventListener('scroll', calculateScrollProgress);

    // 初始计算
    calculateScrollProgress();
});
</script>

修改进度条样式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* 进度条样式 */
.progress-bar {
    background: linear-gradient(to right, #50c878 0%, #3cb371 100%);
    height: 2px;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    z-index: 9999;
    transition: width 0.2s ease-out;
}

参考教程

Coolzr’s Blog

文章自动编号并显示在侧边

复制主题下themes/PaperMod/layouts/_default/single.html到根目录下 layouts/_default/single.html，将下面内容：

1
<article class="post-single">

替换为：

1
<article class="post" {{- if .Param "autonumbering" }} autonumbering {{- end }}>

根目录下的 layouts/partials/toc.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
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
    {{- $has_headers := ge (len $headers) 1 -}}
    {{- if $has_headers -}}
    <aside id="toc-container" class="toc-container wide">
        <div class="toc">
            <details {{if (.Param "TocOpen" ) }} open{{ end }}>
                <summary accesskey="c" title="(Alt + C)">
                    <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
                </summary>

                <div class="inner">
                    {{- $largest := 6 -}}
                    {{- range $headers -}}
                    {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
                    {{- $headerLevel := len (seq $headerLevel) -}}
                    {{- if lt $headerLevel $largest -}}
                    {{- $largest = $headerLevel -}}
                    {{- end -}}
                    {{- end -}}

                    {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}

                    {{- $.Scratch.Set "bareul" slice -}}
                    <ul>
                        {{- range seq (sub $firstHeaderLevel $largest) -}}
                        <ul>
                            {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
                            {{- end -}}
                            {{- range $i, $header := $headers -}}
                            {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
                            {{- $headerLevel := len (seq $headerLevel) -}}

                            {{/* get id="xyz" */}}
                            {{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}

                            {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
                            {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
                            {{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}

                                {{- if ne $i 0 -}}
                                {{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
                                {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
                                {{- if gt $headerLevel $prevHeaderLevel -}}
                                {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
                                <ul>
                                    {{/* the first should not be recorded */}}
                                    {{- if ne $prevHeaderLevel . -}}
                                    {{- $.Scratch.Add "bareul" . -}}
                                    {{- end -}}
                                    {{- end -}}
                                    {{- else -}}
                                    </li>
                                    {{- if lt $headerLevel $prevHeaderLevel -}}
                                    {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
                                    {{- if in ($.Scratch.Get "bareul") . -}}
                                </ul>
                                {{/* manually do pop item */}}
                                {{- $tmp := $.Scratch.Get "bareul" -}}
                                {{- $.Scratch.Delete "bareul" -}}
                                {{- $.Scratch.Set "bareul" slice}}
                                {{- range seq (sub (len $tmp) 1) -}}
                                {{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
                                {{- end -}}
                                {{- else -}}
                        </ul>
                        </li>
                        {{- end -}}
                        {{- end -}}
                        {{- end -}}
                        {{- end }}
                        <li>
                            <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
                            {{- else }}
                        <li>
                            <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
                            {{- end -}}
                            {{- end -}}
                            <!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
                            {{- $firstHeaderLevel := $largest }}
                            {{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
                        </li>
                        {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
                        {{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
                    </ul>
                    {{- else }}
                    </ul>
                    </li>
                    {{- end -}}
                    {{- end }}
                    </ul>
                </div>
            </details>
        </div>
    </aside>
    <script>
        let activeElement;
        let elements;
        window.addEventListener('DOMContentLoaded', function (event) {
            checkTocPosition();

            elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
            // Make the first header active
            activeElement = elements[0];
            const id = encodeURI(activeElement.getAttribute('id')).toLowerCase();
            document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
        }, false);

        window.addEventListener('resize', function (event) {
            checkTocPosition();
        }, false);

        window.addEventListener('scroll', () => {
            // Check if there is an object in the top half of the screen or keep the last item active
            activeElement = Array.from(elements).find((element) => {
                if ((getOffsetTop(element) - window.pageYOffset) > 0 &&
                    (getOffsetTop(element) - window.pageYOffset) < window.innerHeight / 2) {
                    return element;
                }
            }) || activeElement

            elements.forEach(element => {
                const id = encodeURI(element.getAttribute('id')).toLowerCase();
                if (element === activeElement) {
                    document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
                } else {
                    document.querySelector(`.inner ul li a[href="#${id}"]`).classList.remove('active');
                }
            })
        }, false);

        const main = parseInt(getComputedStyle(document.body).getPropertyValue('--article-width'), 10);
        const toc = parseInt(getComputedStyle(document.body).getPropertyValue('--toc-width'), 10);
        const gap = parseInt(getComputedStyle(document.body).getPropertyValue('--gap'), 10);

        function checkTocPosition() {
            const width = document.body.scrollWidth;

            if (width - main - (toc * 2) - (gap * 4) > 0) {
                document.getElementById("toc-container").classList.add("wide");
            } else {
                document.getElementById("toc-container").classList.remove("wide");
            }
        }

        function getOffsetTop(element) {
            if (!element.getClientRects().length) {
                return 0;
            }
            let rect = element.getBoundingClientRect();
            let win = element.ownerDocument.defaultView;
            return rect.top + win.pageYOffset;
        }
    </script>
{{- end }}

根目录下的 assets/css/extended/custome.css，新建/追加：

  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
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
/* 文章目录自动编号（从二级标题开始） */
body {
    counter-reset: h2;
}

h2 {
    counter-reset: h3;
}

h3 {
    counter-reset: h4;
}

h4 {
    counter-reset: h5;
}

article[autonumbering] h2:before {
    counter-increment: h2;
    content: counter(h2) ". ";
}

article[autonumbering] h3:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) " ";
}

article[autonumbering] h4:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) " ";
}

article[autonumbering] .toc ul {
    counter-reset: item
}

article[autonumbering] .toc li a:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

:root {
    --nav-width: 1380px;
    --article-width: 650px;
    --toc-width: 300px;
}

/* 调整目录样式 */
.toc {
    margin: 0 2px 40px 2px;
    border: 1px solid var(--border);
    background: var(--entry);
    border-radius: var(--radius);
    padding: 0.4em;
}

/* 调整目录标题样式 */
.toc summary {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.toc-container.wide {
    position: absolute;
    height: 100%;
    left: calc((var(--toc-width) + var(--gap)) * -0.92);
    top: calc(var(--gap) * 1);
    width: var(--toc-width);
}

.wide .toc {
    position: sticky;
    top: var(--gap);
    border: unset;
    background: unset;
    border-radius: unset;
    width: 100%;
    margin: 0 2px 40px 2px;
}

.toc .details {
    display: inline;
    font-weight: 600;
}

.toc details summary {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    list-style: none;
    /* 移除原有Gecko箭头 */
}

/* 目录图标 */
.toc details summary::before {
    content: "🪧";
    margin-right: 8px;
    font-size: 1.3em;
    vertical-align: middle;
}

/* 移除原有webkit箭头 */
.toc details summary::-webkit-details-marker {
    display: none;
}

.toc details[open] summary {
    font-weight: 500;
}

.toc-container.wide .toc .inner {
    margin: 0;
}

.toc ul {
    list-style-type: circle;
}

.toc .inner {
    margin: 0 0 0 20px;
    padding: 0px 15px 15px 20px;
    font-size: 16px;
}

.toc li ul {
    margin-inline-start: calc(var(--gap) * 0.5);
    list-style-type: none;
}

.toc li {
    color: var(--secondary);
    list-style: none;
    font-size: 16px;
    padding-bottom: 5px;
}

.toc li .active {
    margin-inline-start: 5px;
    color: rgb(49, 184, 204, 0.8);
    border-bottom-color: rgb(49, 184, 204);
}

.toc li a:hover {
    color: rgb(49, 184, 204, 0.8);
    border-bottom-color: rgb(49, 184, 204);
}

/* 进度条样式 */
.progress-bar {
    background: linear-gradient(to right, rgba(226, 107, 86, 0.87) 0%, rgba(226, 107, 86, 0.86) 100%);
    height: 2px;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    z-index: 9999;
    transition: width 0.2s ease-out;
}

/* 最新文章模块样式 */
.recent-container {
    margin: 10px 0 0 0;
}

.recent-container.wide {
    position: absolute;
    height: 100%;
    right: calc((var(--toc-width) + var(--gap)) * -0.92);
    top: calc(var(--gap) * 1);
    width: var(--toc-width);
}

.wide .recent {
    position: sticky;
    top: var(--gap);
    border: unset;
    background: unset;
    border-radius: unset;
    width: 100%;
    margin: 0 2px 40px 2px;
}

.recent details summary {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.recent details summary::before {
    content: "🪄";
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: middle;
}

.recent-post-item a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    margin-left: 15px;
    font-size: 16px;
    border-bottom: 1px solid transparent;
}

.recent-post-item a:hover {
    color: rgb(49, 184, 204, 0.8);
    border-bottom-color: rgb(49, 184, 204);
}

/* 适配移动设备 */
@media screen and (max-width: 1400px) {
    .recent-container.wide {
        display: none;
    }
}

在文章头部信息前面设置 autonumbering: true，即可完成正文和目录的自动编号功能。
修改 config/production/hugo.yml 中的目录配置，启用目录。

1
2
3
4
params:
    UseHugoToc: true # 文章目录放在侧边
    ShowToc: true    # 展示文章详情页的目录
    tocopen: true    # 文章目录默认打开

参考教程

列表文章标题后添加标识

效果：自动为列表中的文章添加对应的标识：[置顶]、[转载]。

在 layouts/_default/list.html 中追加，若没有则需要复制 themes/PaperMod/layouts/_default/list.html。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<header class="entry-header">
<h2>
    {{- .Title }}
    <!-- 加入下面这行，表示 weight 值为 1 的文章标题后添加 [置顶] 标识 -->
    {{- if (eq .Weight 1) }}<sup><span class="x-entry-istop">&nbsp;&nbsp;[置顶]</span></sup>{{- end }}
    <!-- 加入下面这行，表示 outer 值为 true 的文章标题后添加 [转载] 标识 -->
    {{- if (.Param "outer") }}<sup><span class="x-entry-isouter">&nbsp;&nbsp;[转载]</span></sup>{{- end }}
    {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
</h2>
</header>

在 layouts/_default/archives.html 中追加，若没有则需要复制 themes/PaperMod/layouts/_default/archives.html。

1
2
3
4
5
6
7
<h3 class="archive-entry-title entry-hint-parent">
    {{- .Title | markdownify }}
    <!-- 归档页面显示 [置顶] 标识怪怪的，所以这里没添加 -->
    <!-- 加入下面这行，表示 outer 值为 true 的文章标题后添加 [转载] 标识 -->
    {{- if (.Param "outer") }}<sup><span class="x-entry-isouter">&nbsp;&nbsp;[转载]</span></sup>{{- end }}
    {{- if .Draft }}
</h3>

修改样式 assets/css/extended/custome.css ：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* 置顶标签 */
.x-entry-isouter {
    font-size: 14px;
    color: #cd201f;
}

/* 转载标签 */
.x-entry-isouter {
font-size: 14px;
color: #2db7f5;
}

使用方法

1
2
3
4
5
6
7
8
---
title: "测试"
draft: false
# 1 表示置顶
weight: 1
# true 表示是转载
outer: true
---

参考教程

sign-title-in-list

修改post_meta头部信息

在 config/_default/params.yaml 修改参数配置：

1
2
3
4
5
params:
    hideMeta: false
    hideAuthor: true
    ShowReadingTime: true
    ShowWordCount: true

在 layouts/partials/post_meta.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
26
27
28
29
30
31
32
33
34
{{- $scratch := newScratch }}

{{- if not .Date.IsZero -}}
{{- $scratch.Add "meta_keys" (slice "date") -}}
{{- $scratch.SetInMap "meta_items" "date" (slice "calendar" (.Date | time.Format (default "January 2, 2006" site.Params.DateFormat))) -}}
{{- end }}

{{- if (.Param "ShowWordCount") -}}
{{- $scratch.Add "meta_keys" (slice "words") -}}
{{- $scratch.SetInMap "meta_items" "words" (slice "file-text" (i18n "words" .WordCount | default (printf "%d words" .WordCount))) -}}
{{- end }}

{{- if (.Param "ShowReadingTime") -}}
{{- $scratch.Add "meta_keys" (slice "read_time") -}}
{{- $scratch.SetInMap "meta_items" "read_time" (slice "clock" (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime))) -}}
{{- end }}

{{- if not (.Param "hideAuthor") -}}
{{- with (partial "author.html" .) -}}
{{- $scratch.Add "meta_keys" (slice "author") -}}
{{- $scratch.SetInMap "meta_items" "author" (slice "avatar" .) -}}
{{- end }}
{{- end }}

{{- $metaItems := $scratch.Get "meta_items" -}}
{{- range ($scratch.Get "meta_keys") -}}
{{- $icon := (partial "svg.html" (dict "name" (index $metaItems . 0))) -}}
{{- $text := (printf "<span>%s</span>" (index $metaItems . 1)) -}}
{{- $scratch.Add "meta" (slice (printf "<span class=\"pe-post-meta-item\">%s%s</span>" $icon $text )) -}}
{{- end }}

{{- with ($scratch.Get "meta") -}}
{{- delimit . "&nbsp;·&nbsp;" | safeHTML -}}
{{- end }}

在 layouts/partials/svg.html 添加图标模板文件，详见hugo-PaperModx-SVG

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{{ $icon_name := . }}
{{ if (eq $icon_name "") }}
{{ else if (eq $icon_name "calendar") }}
<svg> ... </svg>
{{ else if (eq $icon_name "file-text") }}
<svg> ... </svg>
{{ else if (eq $icon_name "clock") }}
<svg> ... </svg>
{{ else if (eq $icon_name "avatar") }}
<svg> ... </svg>
{{ else if (eq $icon_name "tag") }}
<svg> ... </svg>
{{ else }}
{{ partial "svg.html" (dict "name" $icon_name) }}
{{ end }}

新建 ``layouts/partials/post_meta_tags.html，可以显示 Tags`，添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{- if .Params.tags }}
<span class="x-post-meta-item">
    &nbsp;·&nbsp;{{- (partial "svg.html" (dict "name" "tags")) -}}
</span>
<ul class="x-post-meta-item">
    {{- range $index, $value := ($.GetTerms "tags") }}
    <a href="{{ .Permalink }}">#{{ .LinkTitle }}</a>
    {{- end }}
</ul>
{{- end }}

在 layouts/_default/single.html 中，追加：

1
2
3
4
    <div class="post-meta">
      {{- partial "post_meta.html" . -}}
      <!--在头部显示可跳转的标签-->
      {{- partial "post_meta_tags.html" . -}}

在 assets/css/extended/custom.css 添加样式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.x-post-meta-item {
  display: inline-block;
}

.x-post-meta-item svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 4px;
}

参考教程

post-meta

最后更新时间

在 layouts/partials/post_meta.html 中加上下面三行，可手动修改也可通过 Git 提交来更新时间，添加下面的内容：

1
2
3
4
{{- if gt .Lastmod .Date -}}
{{- $scratch.Add "meta_keys" (slice "lastmod") -}}
{{- $scratch.SetInMap "meta_items" "lastmod" (slice "cloud" (.Lastmod | time.Format (default "2006-01-02" site.Params.DateFormat))) -}}
{{- end }}

在 layouts/partials/svg.html 中加上图标：

1
2
3
4
5
{{- else if (eq $icon_name "cloud") -}}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud">
    <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
</svg>

在 config/_default/hugo.yaml 中启用 GitInfo。

1
enableGitInfo: true

参考教程

use-lastmod-with-papermod

前言#

区分列表和文章的导航文字#

自定义字体#

添加 favicon#

添加MathJax#

进度条实现#

最新文章模块#

文章自动编号并显示在侧边#

列表文章标题后添加标识#

修改post_meta头部信息#

最后更新时间#

前言

区分列表和文章的导航文字

自定义字体

添加 favicon

添加MathJax

进度条实现

最新文章模块

文章自动编号并显示在侧边

列表文章标题后添加标识

修改post_meta头部信息

最后更新时间