Hugo博客修改post_meta头部信息

1. 基本头部信息修改

定位到文件：layouts/partials/post_meta.html，添加如下代码

{{- $scratch := newScratch }}
<!-- 创建时间 -->
{{- if not .Date.IsZero -}}
{{- $scratch.Add "meta" (slice (printf "创建:&nbsp;<span title='%s'>%s</span>" (.Date) (.Date.Format (default "January 2, 2006" .Site.Params.DateFormat)))) }}
{{- end }}

<!-- 更新时间 -->
{{- if (.Param "ShowLastMod") -}}
{{- $scratch.Add "meta" (slice (printf "更新:&nbsp;%s" (.Lastmod.Format (.Site.Params.dateFormat | default "2006-01-02")))) }}
{{- end }}

<!-- 统计字数 -->
{{- if (.Param "ShowWordCounts") -}}
{{- $scratch.Add "meta" (slice (default (printf "字数:&nbsp;%d字" .WordCount))) }}
{{- end }}

<!-- 大概需要花费的阅读时间 -->
{{- if (.Param "ShowReadingTime") -}}
{{- $scratch.Add "meta" (slice (default (printf "时长: %d分钟" .ReadingTime))) }}
{{- end }}

<!-- 作者 -->
{{- with (partial "author.html" .) }}
{{- $scratch.Add "meta" (slice .) }}
{{- end }}

<!-- 分隔方式 -->
{{- with ($scratch.Get "meta") }}
{{- delimit . "&nbsp;|&nbsp;" -}}
{{- end -}}

作者的中文显示要找到layouts/partials/author.html，在如下位置加入中文

作者:&nbsp;{{- $author := (.Params.author | default .Site.Params.author) }}

因为有些字段是自己加的，默认是没有的，所以还要在config配置文件加上这些字段

# 请写到params这个参数下面
params:
    DateFormat: "2006-01-02"
    ShowWordCounts: true
    ShowReadingTime: true
    ShowLastMod: true

在每篇文章开头记得加上这三个字段，可以添加在 archetypes/default.md 里面，这样每次创建文章就会自动生成，生成文章的命令例如：hugo new posts/tech/a.md，看你自己要生成在那个目录下

---
date: 2022-01-08T23:33:37+08:00
lastmod: 2022-01-08T23:33:37+08:00	#更新文章的时候手动改一下时间就可以
author: ["Sulv"]
---

2. 添加拓展头部

注意：此方法只会在文章内显示，在文章列表不显示

我在官方的基础上还增加了标签、访问量、评论等，还可以按照此方法继续扩展

定位到layouts/_default/single.html，找到如下代码位置，官方原先的写法是如下，直接引用头部

{{- if not (.Param "hideMeta") }}
<div class="post-meta">
    {{- partial "post_meta.html" . -}} <!--在这里引用头部信息-->
    {{- partial "translation_list.html" . -}}
    {{- partial "edit_post.html" . -}}
    {{- partial "post_canonical.html" . -}}
</div>
{{- end }}

我们可以在下面添加自己的扩展头部，如下代码

{{- if not (.Param "hideMeta") }}
<div class="post-meta">
    {{- partial "post_meta.html" . -}}

    <!--在头部显示可跳转的标签-->
    &nbsp;|&nbsp;标签: &nbsp;
    {{- if .Params.tags }}
    <ul class="post-tags-meta">
        {{- range $index, $value := ($.GetTerms "tags") }}
        {{- if eq $index 0}}
        <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
        {{- else }}
        <a href="{{ .Permalink }}">、{{ .LinkTitle }}</a>
        {{- end }}
        {{- end }}
    </ul>
    {{- end }}

    <!--访问量-->
    <!--也可以用twikoo评论带的访问方式，如下：-->
    <!--   <span id="twikoo_visitors"></span>    -->
    <!--如下是使用busuanzi的方式，记得引入busuanzi的js，如果在其他文件引入了，这里可以不用引入-->
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_page_pv">
        &nbsp;| 访问: <span id="busuanzi_value_page_pv"></span>
    </span>

    
    <!--评论数-->
    <!--根据twikoo提供的接口文档修改：https://twikoo.js.org/api.html-->
    <!--要引入twikoo的js，.Site.Params.twikoo.version是我自己的写法，让版本在config.yml配置文件控制-->
    <script src="https://cdn.staticfile.org/twikoo/{{ .Site.Params.twikoo.version }}/twikoo.all.min.js">
    </script>
    <script>
        let url = document.documentURI
        {{ $baseURL := .Site.BaseURL }}
        let dnsUrl = {{ $baseURL }}
        let urlSplit = url.split(dnsUrl)
        let finalUrl = urlSplit[1]
        if (finalUrl[0] !== '/') {
            finalUrl = '/'+finalUrl
        }
        twikoo.getCommentsCount({
            envId: {{ .Site.Params.twikoo.id }},
            region: {{ .Site.Params.twikoo.region }},
            urls: [
                finalUrl,
            ],
            includeReply: false // 评论数是否包括回复，默认：false
        }).then(function (res) {
            let count = res[0].count
            const obj = document.getElementById("comment_count");
            obj.innerText = count
            // 返回示例: [
            //   { url: '/2020/10/post-1.html', count: 10 },
            // ]
        }).catch(function (err) {
            // 发生错误
            console.error(err);
        });
    </script>
    &nbsp;| 评论: &nbsp; <span id="comment_count"></span>
    

    {{- partial "translation_list.html" . -}}
    {{- partial "edit_post.html" . -}}
    {{- partial "post_canonical.html" . -}}
</div>
{{- end }}

设置完上面的还需要在config.yml配置文件里填写自己的信息

params:
	twikoo:
        version:  # 填写twikoo的版本
        region: # 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数，请看twikoo官方文档
        id: # 填写个人的twikoo ID

1. 基本头部信息修改#

2. 添加拓展头部#

1. 基本头部信息修改

2. 添加拓展头部