在文章页面添加字数统计

打开任意文章页面,右击选择 “检查” (或 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>&copy; {{ 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>&copy; 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 设置) 字数统计