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

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

开始

更新 Hugo,新建站点,导入 PaperMod 主题,导入 PaperMod 演示站的 config.yml

示例配置在另一个分支里,配置时可以参考着 Hugo 官方文档的 Configure HugoPaperMod Wiki

HTML lang

单语言的站点可以直接设置 languageCode: "zh-CN" 并在 baseof.html 修改为:

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

RSS 输出全文

创建最高优先级的 <站点目录>/layouts/index.rss.xml 文件就可以了。

使用官方模板,将

<description>{{ .Summary | html }}</description>

中的 .Summary 改成 .Content

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

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

PaperMod 的悬浮目录

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

相关功能已经在 PR 中了,不知道什么时候会合并进来。

实测 Cloudflare 的 Rocket Loader 会让「跟随滚动」的功能失效,不太理解为什么,如果要开启这个功能的话,可以对 toc.html 进行如下修改,以让 Rocket Loader 忽略它:

- <scrip>
+ <script data-cfasync="false">

Hack 字体

太喜欢这个字体了,IDE、编辑器、终端全是它。

extend_head.html 中引入:

<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/[email protected]/build/web/hack.css'>

在自定义 CSS 文件 blank.css 中:

pre, code { 
    font-family: Hack, monospace; 
}

Markdown 渲染风格

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

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

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,
.post-content hr {
    margin: 1.15rem 0;
}
.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;
}

代码高亮

Highlight.js

PaperMod 默认就是 highlight.js,前端代码看不太懂,摸索着改的。

自己从 highlight.js 下载了 package 后分别将 highlight.min.js 和选好的 atom-one-dark.min.css 替换主题目录下的 assets/ 文件夹内原先的 JS 和 CSS 文件。

然后要修改已经写死了的代码块背景颜色。定位 post-single.csspre 的 CSS 设定:background: var(--hljs-bg) !important;

注释 background,或者在 blank.css 中自定义背景色以覆盖,这样可以分别调整亮暗主题的背景色:

:root {
    --hljs-bg: #282C34;
}
.dark {
    --hljs-bg: #1c1c1c;
}

Chroma

Hugo 默认支持 Chroma,但可选的高亮主题不多,点击查看主题列表

在配置文件中禁用 highlight.js,然后使用自带的高亮主题:

如果不设置 disableHLJS: true,highlight.js 会覆盖 Chroma 主题,但行号等配置还需要从这里启用。

params:
  assets:
    disableHLJS: true
# ...
markup:
  highlight:
    codeFences: true  # 代码块围栏
    # lineNos: true   # 显示行号
    # anchorLineNos: false  # 行号锚点(特别丑!)
    guessSyntax: true  # 语法猜测
    noClasses: true  # true 比较省事,false 需要生成 CSS,参考:https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css
    style: dracula

评论功能

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

相比 Valine 有个后端管理。

关于使用 Gmail 的邮件提醒。以前我在 Python 上用的是 TLS 587 端口,跑小脚本完全正常发件,前提是启用不安全的登录方式。Waline 则是需要 Google 账号开启二级验证,使用 App 专用的 16 位密码(不开二级验证无此功能),用的是 465 端口。这种邮件部署还是建议新开个小号来发,以防止自己的主力邮箱被标记 spam。

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

适配 PaperMod 的黑暗模式,可以将 CSS 选择器设置为 body.dark

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

    /* 布局颜色 */
    --waline-text-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 id="{{ .RelPermalink }}" class="waline-visitor-count">

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