折腾 Hugo & PaperMod 主题

无意浏览了一下 Hugo 官网的主题目录，发现了一个简约风格的 Paper 主题，非常喜欢，第二天发现了一个 PaperMod，差不多算是增强版。

之前就没遇到过心爱的主题，一直将就着，好多功能也没有弄，这两天一顿折腾，记录一下折腾经过。

使用的版本是 hugo-PaperMod-7.0。

开始

更新 Hugo，新建站点，导入 PaperMod 主题。

示例配置在另一个分支里，导入 PaperMod 演示站的 config.yml。

配置时可以参考着 Hugo 官方文档的 Configure Hugo。

另外要看看 PaperMod Wiki，PaperMod 的示例文件里好多参数都没写，比如这些参数很好用：

params:
	# ...
    DateFormat: "2006-01-02"  # 日期格式化
    ShowFullTextinRSS: true   # RSS 输出全文

HTML lang

单语言的站点可以直接设置 languageCode 并在 baseof.html 修改为：

- <html lang="{{ .Site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
+ <html lang="{{ .Site.LanguageCode }}">

PaperMod 的悬浮目录

参考一：Hugo博客目录放在侧边 | PaperMod主题 | Sulv’s Blog

参考二：JannikArndt/jannikarndt.github.io@8b99f6c

设置文章中链接以新标签的方式打开

参考：在 Hugo Goldmark Markdown 中设置以新标签打开链接

修复本地图片的累计布局偏移（CLS）问题

参考：修复 Hugo 本地图片的累计布局偏移（CLS）问题

最后更新时间

看到一篇 Use Lastmod with PaperMod，这个可以和 Git 搭配，不过我希望可以手动输入。

在 PaperMod 的 post_meta.html 中加上三行：

{{- if gt .Lastmod .Date -}}
{{- $scratch.Add "meta" (slice (printf "<span title='%s'>(updated: %s)</span>" (.Lastmod) (.Lastmod | time.Format (default "January 2, 2006" .Site.Params.DateFormat)))) }}
{{- end }}

在 Hugo 的 Front Matter 下手动加上 lastmod 属性即可：

title: 折腾 Hugo & PaperMod 主题
slug: hugo-papermod-config
author: Dvel
date: 2022-01-11T15:15:38+08:00
lastmod: 2023-02-14T00:40:08+08:00

评论功能

试用了一下 Disqus，但是界面好杂乱，就换到了 Waline。

官方教程非常详尽，就是配置麻烦点，不能像 Disqus 那样一键搞定。

部署在了 Vercel，按照 Errors Accessing From China 将 CANME 记录修改成官方推荐的地址 cname-china.vercel-dns.com。（现在那个页面访问不了了，不知道是否还推荐这个。）

适配 Waline 的黑暗模式，在 PaperMod 中以 body.dark 作为选择器：

/* # Waline 黑暗模式 */
body.dark {
    /* 下面是官网默认的黑暗模式配色 */
    /* 常规颜色 */
    --waline-white: #000;
    --waline-light-grey: #666;
    --waline-dark-grey: #999;

    /* 布局颜色 */
    --waline-color: #888;
    --waline-bgcolor: #1e1e1e;
    --waline-bgcolor-light: #272727;
    --waline-border-color: #333;
    --waline-disable-bgcolor: #444;
    --waline-disable-color: #272727;

    /* 特殊颜色 */
    --waline-bq-color: #272727;

    /* 其他颜色 */
    --waline-info-bgcolor: #272727;
    --waline-info-color: #666;
}

浏览量统计

不蒜子的：

总访客：<span id="busuanzi_value_site_uv"></span>
总浏览量：<span id="busuanzi_value_site_pv"></span>
页面访问量：<span id="busuanzi_value_page_pv"></span>

Waline 的：

老版的：
<span class="waline-visitor-count" id="{{ .RelPermalink }}">
新版的：
<span class="waline-pageview-count" data-path="{{ .RelPermalink }}" />

代码高亮

Hugo 自带的配色方案是 Chroma，但 PaperMod 用的 highlight.js，用 Chroma 时样式有点问题。

设置 disableHLJS: false 选择 highlight.js 作为高亮方案。

自定义的话，由于 PaperMod 是读取写死了的文件名：

assets/js/highlight.min.js
assets/css/hljs/an-old-hope.min.css

我是直接从 highlight.js 下载最新版的 JS 和 CSS 文件，不修改文件名，直接替换掉里面的内容。

PaperMod 的代码块背景颜色是写死了的，可以在 blank.css 中设定代码块在博客为亮/暗色主题时不同的背景色。

:root {
    --hljs-bg: #282C34;
}
.dark {
    --hljs-bg: #272b33;
}

SRI

今天发现了 SRI（完整性检查）的问题，浏览器提示「Failed to find a valid digest in the ‘integrity’ attribute for resource …」，导致语法高亮失效了。

搜索后发现是因为 Hugo 的「minify」与 Cloudflare 的「Auto Minify」发生了冲突，Cloudflare 在再次压缩后导致文件哈希值改变，校验失败。

解决办法是要么关闭 SRI，要么取消 Cloudflare 的「Auto Minify」。

Cloudflare 关闭的方法：速度 - 优化 - Auto Minify。

在 Hugo 中关闭的方法：

params:
  assets:
    disableFingerprinting: true

Markdown 渲染风格

自定义了一些渲染风格，参考了一点 Simple.css 和 GitHub。

由于习惯了在 Typora 的 H2 标题前打一个空行，标准 Markdown 都不会渲染空行，所以直接增加上边距了。

PaperMod 的表格有点空洞，用了 GitHub 那种样式的表格：

样式	体验
PaperMod	有点空洞
GitHub	感觉刚刚好

和一些杂七杂八的调整。

在 blank.css 中新增自定义样式：

/* # Markdown 风格 */
/* 标题、正文、行内代码 - 颜色 */
:root {
    --primary: #212121;  /* rgb(30, 30, 30); */
    --content: #333333;  /* rgb(31, 31, 31); */
    --code-bg: rgba(175, 184, 193, 0.2); /* rgb(245, 245, 245); */
}
.dark {
    --code-bg: rgba(175, 184, 193, 0.2); /* rgb(55, 56, 62); */
}
/* 链接样式 */
.post-content a {
    color: #0969da;
    box-shadow: none;
    text-decoration: none;
}
.post-content a:hover {
    text-decoration: underline;
}
/* 行内代码 - 左右间距 */
.post-content code {
    margin: unset;
}
/* 代码块 - 最大高度 */
/* .post-content pre code {
    max-height: 40rem;
} */
/* 图片居中 */
.post-content img {
    margin: auto;
}
/* 行文风格 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}
.post-content {
    padding-top: 1rem;
}
.post-content blockquote {
    color: #808080;
}
.post-content p,
.post-content blockquote,
.post-content figure,
.post-content table {
    margin: 1.15rem 0;
}
.post-content hr {
    margin: 4rem 8rem;
}
.post-content ul,
.post-content ol,
.post-content dl,
.post-content li {
    margin: 0.5rem 0;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-bottom: 1.15rem;
    font-weight: 600;
}
.post-content h1 {
    font-size: 2.6rem;
    margin-top: 4rem;
    border-bottom: 1px solid #ccc;
}
.post-content h2 {
    font-size: 1.8rem;
    margin-top: 4rem;
    border-bottom: 1px solid #ccc;
}
.post-content h3 {
    font-size: 1.6rem;
    margin-top: 2rem;
}
.post-content h4 {
    font-size: 1.4rem;
    margin-top: 1.44rem;
}
.post-content h5 {
    font-size: 1.2rem;
    margin-top: 1.15rem;
}
.post-content h6 {
    font-size: 1rem;
    margin-top: 1rem;
}
/* GitHub 样式的表格 */
.post-content table tr {
    border: 1px solid #979da3 !important;
}
.post-content table tr:nth-child(2n),
.post-content thead {
    background-color: var(--code-bg);
}
.post-content table th {
    border: 1px solid #979da3 !important;
}
.post-content table td {
    border: 1px solid #979da3 !important;
}

开始#

HTML lang#

PaperMod 的悬浮目录#

设置文章中链接以新标签的方式打开#

修复本地图片的累计布局偏移（CLS）问题#

最后更新时间#

评论功能#

浏览量统计#

代码高亮#

SRI#

Markdown 渲染风格#

开始