在文章页面添加字数统计#
打开任意文章页面,右击选择 “检查” (或 F12),点击 elements。
利用 Devtools 定位相关位置 (PaperMod 主题在 post-meta 位置)如下图:
用 VS 打开 single.html,目录如下:
themes - PaperMod - layouts - _default - single.html
CTRL + F 快速搜索 post-meta class
在 post-meta 内插入以下代码:
1
2
|
<div class="article-read-time"> 🐈 {{ .WordCount }} words</div>
</div>
|
EMOJI 位置可任意修改文字、EMOJI 等
自定义文章模板#
找到 hugo 根目录下的 archetypes 文件夹,打开 default.md 并修改成自己想要的模板。
Before:
1
2
3
4
5
|
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
---
|
After:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
---
title: "{{ replace .Name "-" " " | title }}"
description:
date: {{ .Date }}
image:
math:
license:
categories:
tags:
hidden: false
comments: true
draft: false
---
|
修改页尾信息#
打开相关主题文件下的 footer.html 进行修改
themes - PaperMod - layouts - partials - footer.html
找到 class = “footer”,如下:
Before
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<footer class="footer">
{{- if site.Copyright }}
<span>{{ site.Copyright | markdownify }}</span>
{{- else }}
<span>© {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
{{- end }}
<span>
Powered by
<a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
<a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
</span>
<span>
</span>
</footer>
{{- end }}
|
After
复制黏贴以下代码:
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
|
{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
{{- if site.Copyright }}
<span>{{ site.Copyright | markdownify }}</span>
{{- else }}
<span>© 2022 - {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a> ·
<i class="fas fa-bell"></i> <a id="days">0</a>Days</br></span>
{{- end }}
{{$var := $scratch.Get "total"}}{{$var = div $var 100.0}}{{$var = math.Ceil $var}}{{$var = div $var 10.0}}共书写了{{$var}}k字 · 共 {{ len (where .Site.RegularPages "Section" "post") }}篇文章</br><span>
<span>
Powered by
<a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
<a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a></br>
</span>
<script>
var s1 = '2022-04-05';//设置为建站时间
s1 = new Date(s1.replace(/-/g, "/"));
s2 = new Date();
var days = s2.getTime() - s1.getTime();
var number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
document.getElementById('days').innerHTML = number_of_days;
</script>
|
最终效果如下:
Ref#
stack theme mod
hugo papermod
hugo 部署个人博客 2 (config.yaml 设置)
字数统计