Hugo | 第三篇Stack主题装修记录，堂堂再临！
前两期装修记录参见：
最近的主题修改攒攒又能写一篇了，之后的修改也都在这篇更新。
本文作者没有任何代码基础，所有说明性文字主要靠连蒙带猜兼灵光一现，参考时请务必注意，欢迎提出意见和给出建议~
修改鼠标选中颜色
修改/assets/scss/custom.scss
//修改选中颜色
::selection {
color: #fff;
background: #34495e;
}
调整布局，设置友情链接为双栏
前期工作参考：修改友链样式
参考将Hugo Stack主题友情链接改为双列显示修改/assets/scss/custom.scss
//友情链接双栏
@media (min-width: 1024px) {
.article-list--compact.links {
display: grid;
grid-template-columns: 1fr 1fr;
background: none;
box-shadow: none;
article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: 10px;
&:nth-child(odd) {
margin-right: 8px;
}
}
}
}
突然更新，删掉waline的虚线
不知道哪天开始Waline突然更新了两条难看的虚线，我删掉了底虚线，侧虚线找了半天不知道怎么删_(:з」∠)_
修改layouts\partials\comments\provider\waline.html
:root{
--waline-border-color:transparent;
}
增加头像下社交链接
这个其实是Stack主题本来有/后期更新的一个功能，记不清是之前觉得麻烦删了还是它后来才更新的，由于我的theme文件夹是采取本地下载的方式，不能直接拉取更新，所以是找到了它增加功能的那次提交照着改的。
修改assets/scss/partials/menu.scss
.social-menu {
list-style: none;
padding: 0%;
display: flex;
flex-direction: row;
gap: 10px;
justify-content: center; #设置居中
svg {
width: 24px;
height: 24px;
stroke: var(--body-text-color);
stroke-width: 1.33;
}
}
修改layouts/partials/sidebar/left.html，在一头一尾两行中间加入
<h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
#加入以下内容
{{- with .Site.Menus.social -}}
<ol class="social-menu">
{{ range . }}
<li>
<a
href='{{ .URL | relLangURL }}'
{{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
{{ with .Name }}title="{{ . }}"{{ end }}
>
{{ $icon := default "link" .Params.Icon }}
{{ with $icon }}
{{ partial "helper/icon" . }}
{{ end }}
</a>
</li>
{{ end }}
</ol>
{{- end -}}
#到这里结束
</header>
之后在config.yaml中加入以下段落，图标文件放置在assets/icons，svg格式
menu:
main:
social:
- identifier: 小球飞槎
name: 小球飞槎
weight: 4
url: https://ink.mantyke.icu
params:
icon: feicha
冬天来了，下点小雪人
圣诞节前在Mengru的空间看到的下雪小脚本，挺有意思的，本来想圣诞下两天雪，后来忙来忙去，今天才想起来加上
因为除了雪之外还想下点别的，所以把JS文件下载下来改改配置，在static/js里新建一个snow.js，复制以下内容：
;(function () {
const Config = {
snow: ['❄', '', '※', '⛄', '☃', '🎄', ], // 雪花的样式，可以放不同的雪花，或者任何 emoji，每次生成新雪花时会随机挑选其中一个
color: '#d9e2e7', // 雪的颜色
speed: 10, // 雪花从生成到落到最底端所经历的时间，单位是秒。数字越小落得越快
dom: document.getElementsByTagName('body')[0], // 下雪的区域，可以保持不变，这样就是全屏下雪
interval: 800 // 生成一片雪花的时间间隔，单位是毫秒
}
if (!Config.dom) {
throw Error('错误提示')
}
const $canvas = document.createElement('div')
useStyle($canvas, {
width: '100%',
height: '100%',
position: 'fixed',
top: 0,
left: 0,
pointerEvents: 'none',
zIndex: 100
})
setInterval(() => {
const $snow = document.createElement('div')
$snow.innerText = Config.snow[rand(0, Config.snow.length - 1)]
useStyle($snow, {
display: 'inline-block',
color: Config.color,
fontSize: rand(14, 25) + 'px',
position: 'absolute',
top: 0,
left: rand(0, 100) + '%',
transition: 'transform ' + Config.speed + 's linear' + ',opacity ' + Config.speed + 's linear',
transform: 'translateY(-100%)',
opacity: Math.random() + 0.3
})
setTimeout(() => {
useStyle($snow, {
transform: 'translate(0, ' + getComputedStyle($canvas).height + ') rotate(480deg)',
opacity: 0
})
$snow.addEventListener('transitionend', () => {
$snow.remove()
})
}, 100)
$canvas.appendChild($snow)
}, Config.interval)
function rand (from, to) {
return from + Math.floor(Math.random() * (to - from + 1))
}
function useStyle (dom, style) {
for (let sKey in style) {
dom.style[sKey] = style[sKey]
}
}
Config.dom.appendChild($canvas)
})()
之后在/layouts/partials/footer/custom.html中加入
<script src="/js/snow.js"></script>
……说起来，这个是不是好久前博客大巴年代玩儿的？搜了一下，发现2017年8月博客大巴因不可抗力停运了。
升级进化本站总字数显示
站点总字数超过十万了，原本的字数显示方式显得不太整洁，需要调整新的显示方式，从显示“共嘟嘟了 125126 字”，改为显示“共嘟嘟了12.5k字”
感谢南狐和沉目的好心帮助， 睡前在象上嘟嘟List了一下，聊着聊着竟然收获了一份作业可以抄！
首先来看之前的字数显示代码，两段代码都写在layouts\partials\footer\footer.html中
{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
根据Hugo的文档，.Scratch可以用来处理数据，scratch.Add用来将给定值添加到指定键的现有值，并且可以累计，.WordCount是Hugo提供的字数统计变量，这一段代码的意思是，循环遍历站点的所有类型为page的页面，将数值添加到total当中。
共嘟嘟了 {{$scratch.Get "total" }}字
scratch.Set用来获取total的值，这样就完成了站点总字数的统计。
所以，我们有三种达到目的的办法，假设总字数为 125126字。
-
根据文档，简单修改页尾，修改为
{{div ($scratch.Get "total") 1000}}（不显示小数）或者{{div ($scratch.Get "total") 1000.0}}（显示小数），加一个k。最终会显示125k字或者125.126k字。 -
125.126k字很难看，125k好像又有点不够活泼，折中一下，可以使用Hugo的
.FuzzyWordCount参数，模糊统计每篇文章的字数（超过一百的向上取整），配合{{div ($scratch.Get "total") 1000.0}}，就会显示带一位小数的总字数。缺点在于，模糊统计字数会随着文章篇数增加而越来越不准确，不是个很好的处理办法。 -
按照象友南狐给出的函数，对数值进行一些计算
{{$var := $scratch.Get "total"}} #将total的值给予var {{$var = div $var 100.0}} #将var的值除以100 {{$var = math.Ceil $var}} #数值向下取整 {{$var = div $var 10.0}} #再除以10，获得带一位小数点的数字共嘟嘟了 {{$scratch.Get "var" }}字最终显示效果为：共嘟嘟了125.1k字，完美！
完整代码如下（在原本字数统计代码的基础上修改）：
{{$var := $scratch.Get "total"}}{{$var = div $var 100.0}}{{$var = math.Ceil $var}}{{$var = div $var 10.0}}共嘟嘟了{{$var}}k字
补充： Zero补充说文档中还有一个更简单的方式来保留小数点。
它之所以把这个功能放到 lang 下面，是因为比如说中法双语的博客，切换到法语后小数点自动改成逗号：123.45 → 123,45
共嘟嘟了{{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}k字.
右侧栏新增分类小部件
有一天我到处乱逛，忽然发现小鱼博客右侧栏挂了一个分类小部件，很方便跳转，于是我跑去象上问她这个小部件是怎么做的。本意只是想问个作业思路，没想到过了一会小鱼发来一套完整作业，我大吃一惊，谢谢你小鱼！
周五晚上花了十分钟抄作业完毕，面对最终效果陷入沉思：用这种方法确实可以生成分类列表，但看不到每个分类的文章数量总归还是有点不尽如人意……左右闲来无事，干脆动手试试自己能不能做一个出来。
思路：抄，有目的地抄
想要实现的效果其实和Archives部件差不多：Archives部件是检索所有文章的发布时间，再显示每年的文章数量。我想做的分类部件则是检索文章分类，再显示每个分类下的文章数。既然差不多，不如直接在文档里找到要用的变量，再照葫芦画瓢套进去——想当然得厉害，当然惨烈大失败。
郁闷了五分钟，我洗心革面，再接再厉，沉思：这个诉求应该不少主题有做，只不过显示出来的效果不太一样，我去抄一抄别人怎么写的，再自己套一下Archives的CSS，应该也可以！立刻吭哧吭哧打开Hugo的Theme列表，果然找到一个主题做了右侧栏的分类部件，我直奔Layout文件夹，顺利找到以下这段代码：
<div class="widget">
<h3 class="widget-title"> {{ T "widget_categories" }}</h3>
<div class="widget-body">
<ul class="category-list">
{{- range $name, $taxonomy := $.Site.Taxonomies.categories }}
{{- with $.Site.GetPage (printf "/categories/%s" $name) }}
<li class="category-list-item"><a href="{{ .Permalink }}" class="category-list-link">{{ $name }}</a><span class="category-list-count">{{ $taxonomy.Count}}</span></li>
{{- end }}
{{- end }}
</ul>
</div>
</div>
行动：套，很迷茫地套
把以上代码放到首页上一看，顺利显示出了我要的内容。但显然毫无样式可言。于是我开始研究它怎么才能变成我想要的样子——我贫乏的前端知识告诉我，如果想要css成功修饰我想要的内容，这里需要用到类选择器，类选择器的话，需要类名相同。好！我只要把两边的类名改到对应，应该就可以成功让它显示成Archives部件的样子了！
——实际上哪儿有这么简单，遇到的问题一大堆，比如：原代码使用的是ul/li的序列列表，不知道是不是写错，总之一直无法成功对应样式，于是把ul/li都删掉，换成div/span的盒子装起来；研究了半天为什么category-list-link始终对应不上css样式；好不容易搞定了，发现数字部分一直坠在第二行，不愿意和分类名共处一室，解决办法是数字的部分放进<a></a>里包裹起来；好不容易劝得他们互相谅解，数字又非得跟着分类名黏黏糊糊，不愿意一个人住到右边儿去等等等等……
总之最后都解决了！
成果：獭獭大成功！
最终实现分类小部件的步骤如下：
在\layouts\partials\widget 中新建一个categories.html文件，填入以下内容：
{{- $query := first 1 (where .Site.Pages "Layout" "==" "archives") -}}
{{- if $query -}}
{{- $archivesPage := index $query 0 -}}
<section class="widget categories">
<div class="widget-icon">
{{ partial "helper/icon" "infinity" }}
</div>
<h2 class="widget-title section-title">Categories</h2>
<div class="widget-categories--list">
<div class="widget">
<h3 class="widget-title"> {{ T "widget_categories" }}</h3>
<div class="widget-body">
<div class="category-list">
{{- range $name, $taxonomy := $.Site.Taxonomies.categories }}
{{- with $.Site.GetPage (printf "/categories/%s" $name) }}
<div class="category-list-item"><a href="{{ .Permalink }}" class="category-list-link">{{ $name }}<span class="category-list-count">{{ $taxonomy.Count}}</a>
</span></div>
{{- end }}
{{- end }}
</div>
</div>
</div>
</div>
</section>
{{- else -}}
{{- warnf "Archives page not found. Create a page with layout: archives." -}}
{{- end -}}
在\assets\scss\partials\widgets.scss中添加样式：
/* categories widget */
.widget.categories {
.widget-categories--list {
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
background-color: var(--card-background);
}
.category-list-item {
&:not(:last-of-type) {
border-bottom: 1.4px solid var(--card-separator-color);
}
a {
font-size: 1.4rem;
padding: 18px 25px;
display: flex;
justify-content: space-between;
color: var(--card-text-color-main);
}
span.category-list-count {
color: var(--card-text-color-tertiary);
}
}
}
之后在config.yaml中添加部件即可：
widgets:
enabled:
- categories
问题解决掉一个长出新的，做完了小部件后开始琢磨：
- 小部件中分类的顺序可以改变吗？试过了在categories文件夹中指定weight不能生效，也没试出来排序规则是什么（肯定不是拼音）。
- 首页三个小部件有点多，想把tag-cloud去掉，但去掉之后右侧会变得非常窄，暂时还不知道如何修改。
- 增加分类小部件后，进入文章页面也有点臃肿，不知是否可以指定文章页中不显示某个小部件？看了看文章模板，也没什么思路……