引言

Hugo 的 Stack 主题在每篇文章的标题下方展示了当前文章的创建日期和大致的阅读时长，今天想给自己的博客添加一个小功能，统计每篇文章的字数。

具体步骤

修改文章模板

首先介绍一下 Hugo 使用样式文件的基本优先级，Hugo 会优先使用网站根目录下layouts\文件夹中的样式文件，之后使用模板中的样式文件，以 Stack 主题中的文章详情样式为例，它使用的模板是themes\hugo-theme-stack\layouts\partials\article\components\details.html，如果我们想要修改样式，则需要在同样的目录下创建同样的样式文件将其覆盖，即在layouts\partials\article\components\目录下创建details.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


    ...
    <footer class="article-time">
        {{ if $showDate }}
            <div>
                {{ partial "helper/icon" "date" }}
                <time class="article-time--published">
                    {{- .Date | time.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
                </time>
            </div>
        {{ end }}
    <!-- 在此插入以下代码 -->

        {{ if $showReadingTime }}
        <div>
            {{ partial "helper/icon" "wordcount" }}
            <time class="article-time--reading">
                {{ T "article.wordCount" .WordCount  }}
            </time>
        </div>
        {{ end }}

    <!-- 在此结束 -->
        {{ if $showReadingTime }}
            <div>
                {{ partial "helper/icon" "clock" }}
                <time class="article-time--reading">
                    {{ T "article.readingTime" .ReadingTime }}
                </time>
            </div>
        {{ end }}
    </footer>
    {{ end }}
    ...

此时由于站内没有对应的图标和文案定义，因此无法正常显示，还请继续往下看。

国际化文案

在上述代码中 {{ T "article.wordCount" .WordCount }} 表示使用 article.wordCount的文案模板，并使用 .WordCount 作为参数传入。

类似文章模板，我们需要覆盖掉模板自带的文案模板，将 themes\hugo-theme-stack\i18n 中你所需要的语言类型复制到 i18n\ 中，以英文 en.yaml 、简体中文 zh-cn.yaml 和繁体中文 zh-hk.yaml 为例。将这三个文件复制到 i18n\ 中后，在其 article 类目下分别添加 wordCount 字段，如下所示。

en.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


...
article:
    ...
    readingTime:
        one: "{{ .Count }} minute read"
        other: "{{ .Count }} minute read"
# new codes below
    wordCount:
        other: "{{ .Count }} words"
...

zh-cn.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


...
article:
    ...
    readingTime:
        one: "{{ .Count }} minute read"
        other: "{{ .Count }} minute read"
# 以下为新增代码
    wordCount:
        other: "本文共 {{ .Count }} 字"
...

zh-hk.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


...
article:
    ...
    readingTime:
        one: "{{ .Count }} minute read"
        other: "{{ .Count }} minute read"
# 以下為新增代碼
    wordCount:
        other: "本文共 {{ .Count }} 字" # 繁體
...

图标修改

建议在阿里矢量图标库中寻找你想要的图标，选择好想要的图标后，将下载的 svg 文件复制入 assets\icons\ 并命名 wordcount.svg，之后可以根据喜好或者主题样式来更改图标的粗细、颜色等属性，本站使用的 svg 代码如下：

1
2
3
4
5
6
7
8
9


<svg t="1728665493176"
    class="icon icon-tabler icon-tabler-clock" 
    viewBox="0 0 1024 1024"
    xmlns="http://www.w3.org/2000/svg" 
    p-id="6574" 
    fill="currentColor" >
<path d="M640 42.666667a42.666667 42.666667 0 0 1 30.165333 12.501333l213.333334 213.333333A42.666667 42.666667 0 0 1 896 298.666667v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333V128a85.333333 85.333333 0 0 1 85.333333-85.333333z m-17.706667 85.333333H213.333333v768h597.333334V316.373333L622.293333 128z m69.504 256.938667a42.666667 42.666667 0 0 1 32.768 50.688l-64 298.666666c-8.448 39.424-61.866667 46.208-79.872 10.112l-68.522666-137.002666-68.48 137.002666c-17.28 34.517333-66.858667 29.824-78.549334-5.162666l-1.365333-4.949334-64-298.666666a42.666667 42.666667 0 1 1 83.456-17.92l38.485333 179.754666 52.309334-104.533333a42.666667 42.666667 0 0 1 73.6-4.693333l2.730666 4.693333 52.224 104.533333 38.528-179.754666a42.666667 42.666667 0 0 1 50.688-32.768z" p-id="6575" >
</path>
</svg>

中文字数统计

如果你的博客和我一样有中文或者日语和韩文的话，需要设置 hasCJKLanguage: true 以确保字数统计正确，只需在 config.yaml 中加入以上属性即可。

作者信息

邮箱： [email protected] 欢迎交流技术知识

本文原载于 jianyese.com，遵循 CC BY-NC-SA 4.0 协议，复制请保留原文出处。

【建站技术】在你的 Hugo 文章中加入字数统计能力

以 Stack 主题为例的文章字数统计能力追加

引言