无意浏览了一下 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 输出全文
单语言的站点可以直接设置 languageCode 并在 baseof.html 修改为：
- <html lang="{{ .Site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
+ <html lang="{{ .Site.LanguageCode }}">
参考一：Hugo博客目录放在侧边 | PaperMod主题 | Sulv’s Blog
参考二：JannikArndt/jannikarndt.github.io@8b99f6c
参考：在 Hugo Goldmark Markdown 中设置以新标签打开链接
看到一篇 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.jsassets/css/hljs/an-old-hope.min.css我是直接从 highlight.js 下载最新版的 JS 和 CSS 文件，不修改文件名，直接替换掉里面的内容。
PaperMod 的代码块背景颜色是写死了的，可以在 blank.css 中设定代码块在博客为亮/暗色主题时不同的背景色。
:root {
--hljs-bg: #282C34;
}
.dark {
--hljs-bg: #272b33;
}
今天发现了 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
自定义了一些渲染风格，参考了一点 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;
}
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。