PaperMod主题折腾记录

本站主题已开源，请前往github下载使用。

在修改站点样式及其它设置时，使用此命令hugo server --disableFastRender实时预览。

统计文章篇数和字数

实现步骤：

1、新建统计模板

./layouts/partials/stat.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{{- $scratch := newScratch -}}
{{- $kind := .Kind }}
{{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections -}}

{{- if eq $kind "pages" -}}
{{-   $pages = .pages -}}
{{- else if or (eq $kind `term`) (eq $kind `section`) -}}
{{-   $pages = union .RegularPages .Sections -}}
{{- end -}}

{{- range $pages -}}
{{- $scratch.Add "words" .WordCount -}}
{{- end -}}

{{- $words := $scratch.Get "words" | default 0 }}
{{- printf "%s 篇 %s 字" ((len $pages) | string) ($words | string) -}}

2、编辑模板

./layouts/_default/list.html和 ./layouts/_default/archives.html

1
2
3
4
5
6
7
<!-- 列表模板-->

  {{- if (.Param "ShowStatInSectionTermList" | default true) }}
  <sup class="archive-count">&nbsp;&nbsp;{{- partial "stat.html" . }}</sup>
  {{- end }}
<!-- h1 这行上面 -->
</h1>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!-- 归档模板-->

  <h2 class="archive-year-header">
    {{- replace .Key "0001" "" }}
    {{- if (site.Params.ShowStatInArchive | default true) }}
    <sup class="archive-count">&nbsp;&nbsp;{{- partial "stat.html" (dict "Kind" "pages" "pages" .Pages) }}</sup>
    {{- else }}
    <sup class="archive-count">&nbsp;&nbsp;{{ len .Pages }}</sup>
    {{- end }}
  </h2>

3、使用方法

可直接使用，不需要修改，也可通过以下配置隐藏统计 ./config.yml

1
2
3
  params:
    ShowStatInSectionTermList: false
    ShowStatInArchive: false

搜索页展示标签列表

需求：在搜索页展示标签列表

原因：标签页（/tags）需要一个入口，但是 PaperMod 默认的标签页比较简洁，占用一个菜单感觉有点浪费，而搜索页面内提供标签列表似乎挺合理。

实现步骤

1、编辑搜索页面模板

./layouts/_default/search.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{{- if not (.Param "hideTags") }}
{{- $taxonomies := .Site.Taxonomies.tags }}
{{- if gt (len $taxonomies) 0 }}
<h2 style="margin-top: 32px">{{- (.Param "tagsTitle") | default "tags" }}</h2>
<ul class="terms-tags">
    {{- range $name, $value := $taxonomies }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/tags/%s" $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup> </a>
    </li>
    {{- end }}
    {{- end }}
</ul>
{{- end }}
{{- end }}
{{- end }}{{/* end main */}}  <!-- 在最后一行前加入上面的代码 -->

2、使用方法

./config.yml

1
2
3
4
# 设置文章分类 https://gohugo.io/content-management/taxonomies
taxonomies:
    tag: tags
    series: series

设置文章所属标签，比如本篇是这样：

1
2
3
4
5
6
7
---
title: "PaperMod 搜索页展示标签列表"
date: 2022-06-09
draft: false
tags: ["hugo", "paper-modx"]
series: ["PaperModx 定制搜索页"]
---

可通过以下配置隐藏标签列表

./content/search.md

1
2
3
4
5
6
7
---
title: "搜索"
layout: "search"
# 是否隐藏标签
hideTags: true
tagsTitle: 标签 
---

列表文章标题后添加标识

需求：自动为列表中的文章添加对应的标识：[置顶]、[转载]

1、将./themes/PaperMod/layouts/_default/list.html复制到./layouts/_default/list.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
  <header class="entry-header">
    <h2>
      {{- .Title }}
      <!-- 加入下面这行，表示 weight 值为 1 的文章标题后添加 [置顶] 标识 -->
      {{- if (eq .Weight 1) }}<sup><span class="x-entry-istop">&nbsp;&nbsp;[置顶]</span></sup>{{- end }}
      <!-- 加入下面这行，表示 outer 值为 true 的文章标题后添加 [转载] 标识 -->
      {{- if (.Param "outer") }}<sup><span class="x-entry-isouter">&nbsp;&nbsp;[转载]</span></sup>{{- end }}
      {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
    </h2>
  </header>

2、将./themes/PaperMod/layouts/_default/archives.html复制到./layouts/_default/archives.html

1
2
3
4
5
6
7
          <h3 class="archive-entry-title">
          {{- .Title | markdownify }}
          <!-- 归档页面显示 [置顶] 标识怪怪的，所以这里没添加 -->
          <!-- 加入下面这行，表示 outer 值为 true 的文章标题后添加 [转载] 标识 -->
          {{- if (.Param "outer") }}<sup><span class="x-entry-isouter">&nbsp;&nbsp;[转载]</span></sup>{{- end }}
          {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
        </h3>

3、修改样式 ./assets/_css/extended/custom.css

1
2
3
4
5
6
7
8
9
.x-entry-isouter {
  font-size: 14px;
  color: #cd201f;
}

.x-entry-isouter {
  font-size: 14px;
  color: #2db7f5;
}

4、使用方法：使用姿势：在文章页面修改配置来开关标识

1
2
3
4
5
6
7
8
9
---
title: "测试"
date: 2022-06-03
draft: false
# 1 表示置顶
weight: 1
# true 表示是转载
outer: true
---

添加文章最后更新时间

1、根目录打开config.yml，最后位置添加以下代码

1
2
3
#显示文章更新时间：依次从文件git提交记录获取；从文件中lastmod字段获取；从文件修改时间获取
frontmatter:
  lastmod: ['lastmod', ':git', ':fileModTime', ':default']

2、在./themes/PaperMod/layouts/_default/目录下，找到single.html在合适的位置插入代码

1
2
3
4
5
  {{ if ne (.Lastmod.Format "2022-07-17") (.Date.Format "2022-07-17") }}
  <p style="text-align:right">
  <b> 最后更新于： {{ .Lastmod.Year }} 年 {{ printf "%d" .Lastmod.Month }} 月 {{ .Lastmod.Day }} 日</b>
  </p>
  {{ end }}

添加下雪效果

把代码添加到网站的body标签里或者自定义js里就可以了！这里可以自己调整雪花的颜色和速度，大小等。

1
2
3
4
5
6
7
<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
<script>
    // https://hcodes.github.io/demo-snowflakes/
    var sf = new Snowflakes({
        color: "#cccccc"
    });
</script>

自定义页面底部信息

将./themes/PaperMod/layouts/partials/footer.html 复制到./layouts/partials/footer.html
新建自定义底部信息模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
./layouts/partials/footer_info.html
<!-- 将 footer.html 中 <footer> 的代码移至 footer_info.html -->
<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/loyayz/hugo-PaperModx/" rel="noopener" target="_blank">PaperModx</a>
    </span>
</footer>

编辑模板./layouts/partials/footer.html

1
2
3
4
<!-- 添加引用 footer_info.html -->
{{- if not (.Param "hideFooter") }}
{{- partial "footer_info.html" . }}
{{- end }}

和./layouts/partials/footer_info.html

1
2
3
4
5
6
7
8
9
<footer class="footer">
    <span>&copy; {{ now.Year }} <a href="/about/">loyayz</a></span>
    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/loyayz/hugo-PaperModx/" rel="noopener" target="_blank">PaperModx</a>
    </span>
    <span>·&nbsp;<a href="/copyright/">版权说明</a></span>
</footer>

注：可以直接修改./layouts/partials/footer.html，我是为了方便后续修改而这样拆分

文章元数据前添加图标

修改网站配置./config.yml

1
2
3
4
params:
    hideMeta: false
    ShowReadingTime: true
    ShowWordCount: true

新建元数据模板文件./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
31
32
{{ $scratch := newScratch }}

{{ if not .Date.IsZero }}
{{ $scratch.Add "meta_keys" (slice "date") }}
{{ $scratch.SetInMap "meta_items" "date" (slice "calendar" (.Date | time.Format (default "January 2, 2006" site.Params.DateFormat))) }}
{{ end }}

{{ if (.Param "ShowWordCount") }}
{{ $scratch.Add "meta_keys" (slice "words") }}
{{ $scratch.SetInMap "meta_items" "words" (slice "file-text" (i18n "words" .WordCount | default (printf "%d words" .WordCount))) }}
{{ end }}

{{ if (.Param "ShowReadingTime") }}
{{ $scratch.Add "meta_keys" (slice "read_time") }}
{{ $scratch.SetInMap "meta_items" "read_time" (slice "clock" (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime))) }}
{{ end }}

{{ with (partial "author.html" .) }}
{{ $scratch.Add "meta_keys" (slice "author") }}
{{ $scratch.SetInMap "meta_items" "author" (slice "avatar" .)}}
{{ end }}

{{ $metaItems := $scratch.Get "meta_items" }}
{{ range ($scratch.Get "meta_keys") }}
{{ $icon := (partial "extend_svg.html" (index $metaItems . 0)) }}
{{ $text := (printf "<span>%s</span>" (index $metaItems . 1)) }}
{{ $scratch.Add "meta" (slice (printf "<span class=\"x-post-meta-item\">%s%s</span>" $icon $text )) }}
{{ end }}

{{ with ($scratch.Get "meta") }}
{{ delimit . "&nbsp;·&nbsp;" }}
{{ end }}

新建图标模板文件./layouts/partials/extend_svg.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{{ $icon_name := . }}
{{ if (eq $icon_name "") }}
{{ else if (eq $icon_name "calendar") }}
<svg> ... </svg>
{{ else if (eq $icon_name "file-text") }}
<svg> ... </svg>
{{ else if (eq $icon_name "clock") }}
<svg> ... </svg>
{{ else if (eq $icon_name "avatar") }}
<svg> ... </svg>
{{ else if (eq $icon_name "tag") }}
<svg> ... </svg>
{{ else }}
{{ partial "svg.html" (dict "name" $icon_name) }}
{{ end }}

添加样式./assets/css/extended/custom.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.x-post-meta-item {
  display: inline-block;
}

.x-post-meta-item svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 4px;
}

点击小圆点，围住小猫。
你点击一次，小猫走一次。
直到你把小猫围住（赢），或者小猫走到边界并逃跑（输）。

统计文章篇数和字数#

1、新建统计模板#

2、编辑模板#

3、使用方法#

搜索页展示标签列表#

1、编辑搜索页面模板#

2、使用方法#

列表文章标题后添加标识#

添加文章最后更新时间#

添加下雪效果#

自定义页面底部信息#

文章元数据前添加图标#

统计文章篇数和字数

1、新建统计模板

2、编辑模板

3、使用方法

搜索页展示标签列表

1、编辑搜索页面模板

2、使用方法

列表文章标题后添加标识

添加文章最后更新时间

添加下雪效果

自定义页面底部信息

文章元数据前添加图标