PaperMod主题优化

配置标签页面

PaperMod 主题是支持多语言的，但是标签页不支持，需要修改对应的 html 模板。

主题提供的语言支持文件在themes/PaperMod/il8n里面，其中zh.yaml即简体中文。

为了防止更新主题时还原修改过的文件，需要在网站根目录进行修改，这样可以覆盖主题原有文件的效果。在网站根目录新建i18n/文件夹，复制themes/PaperMod/i18n/zh.yaml到i18n/zh.yaml，并按需设置：

 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


- id: prev_page
  translation: "上一页"

- id: next_page
  translation: "下一页"

- id: read_time
  translation:
    one : "1 分钟"
    other: "{{ .Count }} 分钟"

- id: words
  translation: 
    one: "字"
    other: "{{ .Count }} 字"

- id: toc
  translation: "目录"

- id: translations
  translation: "语言"

- id: home
  translation: "主页"

- id: edit_post
  translation: "编辑"

- id: code_copy
  translation: "Copy"

- id: code_copied
  translation: "Done"

添加MathJax

创建themes/PaperMod/layouts/partials/mathjax.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
34
35
36
37
38
39
40
41


<script type="text/javascript" async
    src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\[\[', '\]\]']],
                processEscapes: true,
                processEnvironments: true,
                skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
                TeX: {
                    equationNumbers: { autoNumber: "AMS" },
                    extensions: ["AMSmath.js", "AMSsymbols.js"]
                }
            },
            "HTML-CSS": {
                availableFonts: ["Arial", "TeX"],
                preferredFont: "TeX",
                webFont: "TeX"
            }
        });

        MathJax.Hub.Queue(function () {
            // Fix <code> tags after MathJax finishes running. This is a
            // hack to overcome a shortcoming of Markdown. Discussion at
            // https://github.com/mojombo/jekyll/issues/199
            var all = MathJax.Hub.getAllJax(), i;
            for (i = 0; i < all.length; i += 1) {
                all[i].SourceElement().parentNode.className += ' has-jax';
            }
        });
    </script>

<style>
    code.has-jax {
        font: inherit;
        font-size: 100%;
        background: inherit;
        border: inherit;
        color: #515151;
    }
</style>

打开themes/PaperMod/layouts/partials/extend_head.html文件，添加如下内容：
1 2

 {{ partial "mathjax.html" . }}

下面是一个泰勒级数展开的例子：

$$f(x) = f(a) + f’(a)(x-a) + \frac{f’’(a)}{2!}(x-a)^2 + \cdots + \frac{f^{(n)}(a)}{n!}(x-a)^n + R_n(x)$$

其中，$f(a)$表示在点$a$处的函数值，$f’(a)$表示在点$a$处的导数值，$f’’(a)$表示在点$a$处的二阶导数值，以此类推，$R_n(x)$为余项：$$R_n(x) = \frac{f^{(n+1)}(c)}{(n+1)!}(x-a)^{n+1}$$

自定义头部

Hugo 提供了一个默认的文章使用模板，位于archetypes/default.md，里面包括一些基本内容标题、日期以及是否为草稿。

为方便写作，在文件夹 archetypes 中创建post.md 文件，并写入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
lastmod: {{ .Date }}
author: ["kdjlyy"]
summary: ""             # 简单描述，会展示在主页，可被搜索
weight:                 # 输入1可以顶置文章
draft: false            # 是否为草稿
comments: true          # 是否开启评论
showToc: true           # 显示目录
TocOpen: true           # 自动展开目录
autonumbering: true     # 目录自动编号
hidemeta: false         # 是否隐藏文章的元信息，如发布日期、作者等
disableShare: true      # 底部不显示分享栏
searchHidden: false     # 该页面不能被搜索到
showbreadcrumbs: true   # 顶部显示当前路径
mermaid: true           # 是否开启mermaid
cover:
    image: ""           # 封面图片
    hidden: true        # 文章页面隐藏封面图片
tags:
- tag 1
- tag 2
---

根据定义好的模板，在此利用该模板生成关于页面，根目录执行执行命令：

1

hugo new --kind post content/posts/tech/xx.md

自定义字体

本博客使用落霞孤鹜系列字体，正文使用 LXGW WenKai Lite 字体，代码块英文使用 JetBrains Mono 字体，中文使用 LXGW WenKai Screen 字体，公式使用 Arial 字体。

打开themes/PaperMod/layouts/partials/extend_head.html文件，这个是会插入到 <head></head> 中间的内容，添加如下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!-- 文章字体设置 -->
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jetbrains-mono@1.0.6/css/jetbrains-mono.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css" />
    <style>
        body {
            font-family: "LXGW WenKai Lite", sans-serif;
            font-family: "LXGW WenKai Screen", sans-serif;
        }
    </style>
</head>
</html>

详细内容参考：https://github.com/lxgw/LxgwWenKai/issues/24

打开themes/PaperMod/assets/css/extended/blank.css ，这个是可以自定义样式的地方，添加：

1
2
3
4
5
6
7
8
9


/* ========== 正文字体：落霞孤鹜 ========== */
body {
    font-family: "LXGW WenKai Lite", sans-serif !important;
}

/* ========== 代码字体：JetBrains Mono ========== */
code {
    font-family: "JetBrains Mono", "LXGW WenKai Screen", "LXGW WenKai Lite", sans-serif;
}

为了让 MathJax 公式更加美观，需要在themes/PaperMod/layouts/partials/mathjax.html文件的MathJax.Hub.Config配置中添加：
1 2 3 4 5

"HTML-CSS": { availableFonts: ["Arial", "TeX"], preferredFont: "TeX", webFont: "TeX" }

示例：$\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$

添加busuanzi

busuanzi 插件可以提供站点访问量和文章阅读数的计数服务，因为打开该功能会略微降低网站加载速度，所以默认关闭该功能。

打开themes/PaperMod/layouts/partials/head.html，在{{- /* Styles */}}这一行前面添加如下代码：

1
2
3
4
5


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

在站点底部显示总访问量与访客数，打开footer.html一般和head.html同目录，添加如下代码，注意添加在<footer>代码块里：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- 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 -}}

用于显示每篇文章阅读量，在themes/PaperMod/layouts/_default/single.html，一样注意加在<header>代码块内：

1
2
3
4
5
6


<!-- busuanzi -->
{{ 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 }}

回到根目录改config.yml，在params里加上两行：

1
2
3


params:  
    busuanzi:
        enable: true

修改post_meta头部信息

post_meta 样式

定位到文件：themes/PaperMod/layouts/partials/post_meta.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


{{- $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 -}}

作者的中文显示要找themes/PaperMod/layouts/partials/author.html，设置如下：

1
2
3
4
5
6
7
8
9


{{- if or .Params.author site.Params.author }}
作者:&nbsp;{{- $author := (.Params.author | default site.Params.author) }}
{{- $author_type := (printf "%T" $author) }}
{{- if (or (eq $author_type "[]string") (eq $author_type "[]interface {}")) }}
{{- (delimit $author ", " ) }}
{{- else }}
{{- $author }}
{{- end }}
{{- end -}}

因为有些字段是自己加的，所以还要在config.yml文件的params字段下加上这些字段：

1
2
3
4
5


params:
    DateFormat: "2006-01-02"
    ShowWordCounts: true
    ShowReadingTime: true
    ShowLastMod: true

在每篇文章开头记得加上“date”、“lastmod”、“author”这三个字段，已经集成在 archetypes/post.md 里面了，这样每次创建文章就会自动生成，生成文章的命令：

1

hugo new --kind post content/posts/tech/xx.md

参考：Hugo博客修改post_meta头部信息

添加背景图片

通过浏览器定位 html 代码，发现背景图片在 list 标签下，所以需要：

打开themes/PaperMod/assets/css/extended/blank.css，添加如下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


/* 主页背景图片 */
.list {
    /* 添加!important表示覆盖默认的设置 */
    background-image: url("../../img/white_mountains.jpg") !important;
    /* 照片不重复出现 */
    background-repeat: no-repeat;
    /* 照片大小 */
    background-size: 100% 100%;
    /* 右侧滚动时照片固定大小 */
    background-attachment: fixed;
}

.dark.list {
    /* 添加!important表示覆盖默认的设置 */
    background-image: url("../../img/white_mountains_dark.jpg") !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

这里我是将图片源文件放在public/img目录下，也可以使用 URL 的方式填写。

文章自动编号

个人在写用 markdown 文章时一般用二级标题##开始，希望写文章时能有类似于 $LaTeX$ 的体验，这个在 Typora 中很容易实现，只需要添加对应的 css 样式即可，网络上很容易找到对应的教程。

在 Hugo 的 PaperMod 主题中，以下操作可以实现目录和正文的自动编号：

打开themes/PaperMod/layouts/_default/single.html文件，将

1

<article class="post-single">

替换为：

1

<article class="post" {{- if .Param "autonumbering" }} autonumbering {{- end }}>

打开themes/PaperMod/assets/css/extended/blank.css，添加如下代码：

 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
34
35
36
37
38
39
40


/* ========= 文章和目录自动编号（从二级标题开始）============ */
body {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

article[autonumbering] h2:before {
    counter-increment: h2;
    content: counter(h2) ". "
}

article[autonumbering] h3:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) " "
}

article[autonumbering] h4:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) " "
}

article[autonumbering] .toc ul {
    counter-reset: item
}

article[autonumbering] .toc li a:before {
    content: counters(item, ".") " ";
    counter-increment: item
}   

在文章头部信息前面设置autonumbering: true即可完成正文和目录的自动编号功能。

封面图片缩小并移到侧边

PaperMod 主题会因为插入了封面图片导致文章磁贴高度变大，达不到美观统一的要求，下面操作可以做到将封面图片缩小并移到右侧，效果如图：

封面图片缩小并移到侧边

打开themes/PaperMod/layouts/_default/list.html，添加一个 class 标识，命名为post-info，把 entry-header 和 entry-content 和 entry-footer 都包裹进去，具体修改如下：

 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


<article class="{{ $class }}">
  <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}
  {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} -->
  <div class="post-info">
    <header class="entry-header">
      <h2>
        {{- .Title }}
        {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>
        {{- end }}
      </h2>
    </header>
    {{- if (ne (.Param "hideSummary") true) }}
    <div class="entry-content">
      <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
    </div>
    {{- end }}
    {{- if not (.Param "hideMeta") }}
    <footer class="entry-footer">
      {{- partial "post_meta.html" . -}}
    </footer>
    {{- end }}
  </div>
  {{- $isHidden := (.Site.Params.cover.hidden | default .Site.Params.cover.hiddenInList) }}
  {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}
  <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
</article>

打开themes/PaperMod/assets/css/extended/blank.css，添加如下代码：

 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
34
35
36
37
38
39


/* 封面图片显示到右边 */
.entry-cover1 {
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

.post-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.entry-cover {
    border-radius: 10px;
    overflow: hidden;
    width: 50%;
    margin-bottom: unset;

    max-height: 150px;
    display: grid;
    align-content: center;
}

.post-info {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    padding-right: 10px;
}

/* 文章内使用的封面图 */
.entry-cover1 img {
    border-radius: var(--radius);
    pointer-events: none;
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

因为上面对文章封面图片进行了调整，会影响到文章里面顶部的图片展示，所以需要解决冲突：
- 定位到目录themes/PaperMod/layouts/partials/cover.html，在相同目录下创建一个名字为cover1.html的文件，并把cover.html里的文件复制一份一样的到cover1.html下；
- 把cover1.html文件里的<figure class="entry-cover">修改为<figure class="entry-cover1">；
- 定位到themes/PaperMod/layouts/_default/single.html，把{{- partial "cover.html" (dict "cxt" . "IsHome" false "isHidden" $isHidden) }}改为{{- partial "cover1.html" (dict "cxt" . "IsHome" false "isHidden" $isHidden) }}，这样文章封面调用的是经过修改的图片，而文章里面顶部的图片调用的是未经修改的图片。
  
  如果只需要封面图片，但是不需要文章顶部的图片需要在写作时设置头部：
  1 2 3
  
  cover: image: "" # 封面图片 hidden: true # 文章页面隐藏封面图片

添加utterances评论

utterances 是一款基于 GitHub issues 的评论工具，优点是极其轻量、加载非常快、配置比较简单。

首先创建一个 Github 仓库保存个人博客的评论内容，例如：blog_comments；
进入 utterances app 对自己所要保存评论的仓库授权；

创建themes/PaperMod/layouts/partials/comments.html，输入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- github comments -->
<div>
    <div class="pagination__title">
        <span class="pagination__title-h" style="font-size: 20px;">评论</span>
        <br />
    </div>
    <div id="tcomment"></div>
    <script src="https://utteranc.es/client.js" repo="GitHub仓库名称（如：kdjlyy/blog_comments）" issue-term="title" theme="github-light"
        crossorigin="anonymous" async>
        </script>
</div>

在博客配置文件config.yml中的params字段添加配置：

1
2
3
4
5


utteranc:
  enable: true
  repo: "kdjlyy/blog_comments" 
  issueTerm: "title"
  theme: "github-light"  

配置标签页面#

添加MathJax#

自定义头部#

自定义字体#

添加busuanzi#

修改post_meta头部信息#

添加背景图片#

文章自动编号#

封面图片缩小并移到侧边#

添加utterances评论#

配置标签页面

添加MathJax

自定义头部

自定义字体

添加busuanzi

修改post_meta头部信息

添加背景图片

文章自动编号

封面图片缩小并移到侧边

添加utterances评论