TL;DR
你将会看到如下功能的更新：
- 样式微调与页面美化，包括字数统计、链接双栏显示、引用块颜色修改、浏览量统计、页脚修改等。
- 增加QQ音乐外链样式
- 基于waline和vercel的评论系统
1. 样式微调与页面美化
我完全不懂前端，这部分内容基本都是抄的/照猫画虎，记录的价值在于留一些索引、痕迹方便日后查找。
1.1 字数统计
底部字数统计抄了B1ain的博客，但实际用起来发现有点问题，报错信息是：
1
|
hugo-stack-site | ERROR Rebuild failed: render: failed to render pages: render of "/404" failed: ".../themes/stack/layouts/404.html:...": execute of template failed at <partialCached "footer/footer" .>: error calling partialCached: ".../themes/stack/layouts/partials/footer/footer.html:...": execute of template failed at <div ($scratch.Get "total") 1000.0>: error calling div: can’t apply the operator to the values
|
我对这个不熟，只能看到报错内容是出自 div 函数的用法不对，即下面这段：
1
|
{{ div ($scratch.Get "total") 1000.0 }}
|
先单独测试了下($scratch.Get “total”)和 div（math.Div的alias）都能正常工作，这个语句在语法上看不出什么问题，那就有一个很直接的猜测：变量类型不对。
而 div 这个函数是出自hugo的function，于是查了下hugo function的文档，
发现 div 函数的入参是多个Number。
1
2
3
|
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
|
这里面page.Page对象的.WordCount方法理应返回一个int；理论上没啥问题，但既然报错了，就改一下试试。
没找到hugo里查看变量类型的方法或函数，不过找到了强制类型转换（从string到int）的函数：int。放进去，解决了。
最终在 footer.html 里的内容：
1
2
3
4
5
6
7
8
|
<!-- Add total page and word count time -->
<section class="totalcount">
{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
发表了{{ len (where .Site.RegularPages "Section" "post") }}篇文章，总计{{div (int ($scratch.Get "total")) 1000.0 | lang.FormatNumber 2 }}k字
</section>
|
因为这玩意儿太DSL了没啥复盘的价值，所以列几个猜测：
- 可能是现在用的主题里有一些特殊设置/我用法不对（这是最有可能的）；
- 可能hugo版本更新后这里有一点修改（修改math.Div这种基础的功能很蠢，几乎不可能）。
1.2 浏览量统计
浏览量从这儿抄的：莱特雷的博客
不过这个浏览量功能有点问题，比如我自己重复看也算次数。后续有时间精力再仔细修改。
1.3 链接双栏展示
双栏抄了失迹的博客
感谢失迹大佬，很多地方都参考了失迹的博客内容。
1.4 引用块颜色修改
让DeepSeek帮忙研究，最后研究出来应该改 <proj>/themes/stack/assets/scss/variables.scss 文件。改动的内容主要是（仅放了被修改的内容）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/*
* Card style
*/
:root {
--card-separator-color: rgba(218, 218, 218, 0.812);
}
/* 省略一些内容 */
/*
* Article content style
*/
:root {
--blockquote-background-color: rgb(150, 150, 150);
&[data-scheme="dark"] {
--blockquote-background-color: rgb(95, 95, 95);
}
}
|
1.5 页脚美化
我自己琢磨能行，照猫画虎的。在页脚的copyright这一行加上了协议；并且给页脚加了个“motto”，以便我方法加粗。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<footer class="site-footer">
<section class="copyright">
...
{{ with .Site.Params.footer.license }}
· {{ . | safeHTML }} · 转载请注明出处
{{ end }}
</section>
<section class="motto">
{{ with .Site.Params.footer.motto }}
{{ . | safeHTML }} <br/>
{{ end }}
</section>
|
使用的时候在 hugo.yaml 里加俩参数：
1
2
3
4
|
params:
footer:
motto: 不要消解那无慰藉的忠诚 # self-defined
license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> # self-defined
|
2. QQ音乐外链
我不喜欢网易云音乐，大约17年时因为某位前女友的缘故，短暂的用了一年多网易云音乐（充了两年VIP/黑胶），后来也没再用过了。
不喜欢的原因有二：
- （最大的原因）缺歌，尤其是2018年前后，欧美歌下架了一堆、周杰伦的歌全数下架，受损最严重的一个歌单有超过半数的歌曲是灰的。
- 没读过几本书的文艺装逼犯太多，我自认也是半个文艺装逼男，所以觉得其他同类都是煞笔，同类水火不容。
此外绝大多数时间我都在用apple music和QQ音乐，前者国区也挺缺歌的，尤其是anisong，所以我最近几年一直在用QQ音乐。
言归正传，这个地方很简单，我是直接模仿着 bilibili 的shortcode写的，新建 <proj>/themes/stack/layouts/shortcodes/qqmusic.html 文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{{ $songid := (.Get 0) }}
{{ $width := default "330" (.Get 1) }}
{{ $height := default "110" (.Get 2) }}
<div class="music-wrapper">
<iframe src="https://i.y.qq.com/n2/m/outchain/player/index.html?songid={{ $songid | safeURL }}"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width="{{ $width }}"
height="{{ $height }}"
>
</iframe>
</div>
|
在正文中使用的方式（这里的songid要生成QQ音乐的分享链接，然后在分享链接里能看到，转义斜杠自行删去）：
1
|
{{\< qqmusic "songid" "330" "110"\>}}
|
3. 基于waline和vercel的评论
这没啥可说的，直接按waline官方教程做吧。我本来不想用vercel，想自己部署，但转念一想今晚还有事，不能无止境的摸鱼。对于vercel、leancloud，我的心里只有感激。
除了这个教程内容外，我做的主要调整是加了个文章反应（reactions），也就是最下方的“本文对你有帮助吗？”，这里的表情包来自walinejs/emojis仓库，非常感谢。
对客户端的stack模板做了一些调整，抄的失迹的博客。这篇博客里还有很多内容我没抄，一部分是个人审美，一部分之后有时间再折腾。
Others
我还加了个TODO页面，那就更没什么可说的了。
衷心希望这是我的倒数第二篇装修笔记（最后一篇计划在一年后），不要在细枝末节上花太多时间，专心搞搞内容才是正事。
