使用环境

  • 开发环境: Windows 11
  • Hugo版本: 0.145
  • Git版本: 2.38.1
  • Theme: PaperMod

前要

由于配置不久的左侧悬浮目录失效，想到会不会是PaperMod主题有问题或者Hugo有问题，于是下载了最新的Hugo版本，结果不仅问题没解决，还返回了许多错误包括之前配置Google Analytics的时候".Site.IsServer"参数。

之后查了一下问题很简单，就是部分参数在新版本中已经废弃了。想到都已经这样了，干脆再升级一下PaperMod，同时将问题记录下来。

以前的修改都是在PaperMod主题中修改，这次发现完全不必，不需要侵入式修改，主题和个性化样式完全分离。

自定义页面

每页显示文章数量

原来的PageSize已经在0.128.0被废弃了，官方给出了替代方案，使用PAGER.PagerSize，但是放的位置既不是在原来的地方，也不是在params，是放在languages下面:

languages:
    zh:
      languageName: "Chinese"
      weight: 1
      pagination:
        disableAliases: false
        pagerSize: 7
        path: page

添加页眉

在Hugo根目录下的layouts\partials目录新增post_meta.html,在每篇文章显示创建日期及最后更新日期等内容。

{{- $scratch := newScratch }}

{{- if not .Date.IsZero -}}
{{- $scratch.Add "meta" (slice (printf "<span title='%s'>🎬创建日期:%s</span>" (.Date) (.Date | time.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 "ShowReadingTime") -}}
{{- $scratch.Add "meta" (slice (printf "⏲︎时长: %s" (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime)))) }}

{{- end }}

{{- if (.Param "ShowWordCount") -}}
{{- $scratch.Add "meta" (slice (printf "📖字数: %s" (i18n "words" .WordCount | default (printf "%d字" .WordCount)))) }}
{{- end }}

{{- with (partial "author.html" .) }}
{{- $scratch.Add "meta" (slice .) }}
{{- end }}

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

添加公式支持

使用KaTeX渲染数学公式

添加页脚

在Hugo根目录下的layouts\partials目录新增extend_footer.html， 在每篇文章最后显示访问量等内容。

<footer class="footer">
<!-- busuanzi -->
{{ if .Site.Params.busuanzi.enable -}}
<div class="busuanzi-footer">
  <span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
  </span>
  <span id="busuanzi_container_site_uv">
    本站访客数<span id="busuanzi_value_site_uv"></span>人次
  </span>
</div>
{{- end }}
</footer>

当然还需要在config.yaml配置，使之生效

params:
  busuanzi:
    enable: true

其它配置

配置访问量

在Hugo根目录下的layouts\partials目录新增extend_header.html,引入不蒜子的js

<!-- busuanzi -->
{{- if .Site.Params.busuanzi.enable -}}
  <script async src="//busuanzi.icodeq.com/busuanzi.pure.mini.js "></script>
  <meta name="referrer" content="no-referrer-when-downgrade">
{{- end -}}

配置Google Analytics

在Hugo中使用Google Analytics

其它修改

去掉主题自带的页脚

将themes\PaperMod\layouts\partials\foot.html文件复制到Hugo根目录下的layouts\partials，注释了以下内容

<!-- <footer class="footer">
    {{- if not site.Params.footer.hideCopyright }}
        {{- if site.Copyright }}
        <span>{{ site.Copyright | markdownify }}</span>
        {{- else }}
        <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
        {{- end }}
        {{- print " · "}}
    {{- end }}

    {{- with site.Params.footer.text }}
        {{ . | markdownify }}
        {{- print " · "}}
    {{- 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>
</footer> -->

在每篇文章中显示阅读量

将themes\PaperMod\layouts_default\single.html复制到Hugo根目录下的layouts\partials_default文件夹，添加如下内容:

    <div class="post-meta">
      {{- partial "post_meta.html" . -}}
      {{- partial "translation_list.html" . -}}
      {{- partial "edit_post.html" . -}}
      {{- partial "post_canonical.html" . -}}
      <!-- 新增内容开始 -->
{{ if .Site.Params.busuanzi.enable -}}
<div  class="meta-item">&nbsp·&nbsp
  <span id="busuanzi_container_page_pv">本文阅读量<span id="busuanzi_value_page_pv"></span>次</span>
</div>
{{- end }}
<!-- 新增内容结束 -->
    </div>

后记

其实最初那个侧边悬浮的问题，根本不是问题，当你的浏览器没有最大化或屏幕分辨率不高的情况，目录会自动放在文章上方。
而我发现问题的时候是用的笔记本的屏幕，分辨率只有1920*1080。

全文完