前言
Hugo Stack 主题很好看，但是还有一些细节地方有些粗糙，同时想增加一些自己喜欢的功能，于是写下这篇美化文章。
文件添加随机海报
寻找一个好看的封面图是一件费时间的事情，那么我们可以自动生成一张随机的封面图解决这个问题。
推荐在模板中设置，修改 archetypes/default.md（如果没有则新建一个即可）
1
2
3
4
5
| ---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
image: https://picsum.photos/800/600.webp?random={{ substr (md5 (.Date)) 4 8 }}
---
|
这里的重点是 image 这一行，即使用了 Lorem Picsum 的接口，然后就可以得到一张随机的图片，更多详情也可前往 Lorem Picsum 了解。
之后，我们通过 hugo new 命令时，新建的文章会随机匹配一张图片
增加加载进度条
在 layouts/partials/footer/custom.html 中增加以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script
src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/nprogress.min.js"
integrity="sha384-bHDlAEUFxsRI7JfULv3DTpL2IXbbgn4JHQJibgo5iiXSK6Iu8muwqHANhun74Cqg"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/css/nprogress.css"
integrity="sha384-KJyhr2syt5+4M9Pz5dipCvTrtvOmLk/olWVdfhAp858UCa64Ia5GFpTN7+G4BWpE"
crossorigin="anonymous"
/>
<script>
NProgress.start();
document.addEventListener("readystatechange", () => {
if (document.readyState === "interactive") NProgress.inc(0.8);
if (document.readyState === "complete") NProgress.done();
});
</script>
|
然后就可以看到网页上方会有一个加载进度的进度条了。
添加彩虹背景
layouts/partials/footer/custom.html 中增加以下内容:
1
2
3
4
5
6
7
8
9
| <script
src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/ribbon.min.js"
integrity="sha384-UEK8ZiP3VgFNP8KnKMKDmd4pAUAOJ59Y2Jo3ED2Z5qKQf6HLHovMxq7Beb9CLPUe"
crossorigin="anonymous"
size="300"
alpha="0.6"
zindex="-1"
defer
></script>
|
滚动条美化
默认的滚动条有点丑，但是我们可以优化一下。
assets/scss/custom.scss 添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| html{
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
}
|
选中文本样式美化
默认选中文本的样式是蓝底白字的，与博客风格显得比较突兀，所以也可以改一下。
assets/scss/custom.scss 添加以下内容：
1
2
3
4
| ::selection {
color: #ffff;
background: #557697;
}
|
主页右侧动画
搜索菜单动画
1
2
3
4
5
6
7
| .search-form.widget {
transition: transform 0.6s ease;
}
.search-form.widget:hover {
transform: scale(1.1, 1.1);
}
|
归档动画
1
2
3
4
5
6
7
| .widget.archives .widget-archive--list {
transition: transform .3s ease;
}
.widget.archives .widget-archive--list:hover {
transform: scale(1.05, 1.05);
}
|
标签动画
1
2
3
4
5
6
7
8
9
| .tagCloud .tagCloud-tags a {
border-radius: 10px;
font-size: 1.4rem;
transition: transform .3s ease;
}
.tagCloud .tagCloud-tags a:hover {
transform: scale(1.1, 1.1);
}
|
归档页面双栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| @media (min-width: 1024px) {
.article-list--compact {
display: grid;
grid-template-columns: 1fr 1fr;
background: none;
box-shadow: none;
gap: 1rem;
article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: 16px;
}
}
}
|
增加赞赏
添加赞赏二维码，比如微信、支付宝的二维码。
添加页面
对应目录新建 layouts\partials\reward.html 文件。
写入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div class="post-reward" data-html2canvas-ignore>
<input type="checkbox" name="reward" id="reward" hidden />
<label class="reward-button" for="reward">赞赏支持</label>
<div class="qr-code">
{{ if .Site.Params.Reward.wechat }}
<label class="qr-code-image" for="reward">
<img class="image" src="{{ .Site.Params.Reward.wechat }}">
<span>微信打赏</span>
</label>
{{ end }}
{{ if .Site.Params.Reward.alipay }}
<label class="qr-code-image" for="reward">
<img class="image" src="{{ .Site.Params.Reward.alipay }}">
<span>支付宝打赏</span>
</label>
{{ end }}
{{ if .Site.Params.Reward.paypal }}
<label class="qr-code-image" for="reward">
<img class="image" src="{{ .Site.Params.Reward.paypal }}">
<span>PayPal打赏</span>
</label>
{{ end }}
</div>
</div>
|
文章对应位置引入页面，一般在single.html中。
1
2
3
| {{ if .Site.Params.Reward.enable }}
{{ partial "reward.html" . }}
{{ end }}
|
添加样式
custom.css中添加样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| /* 打赏 */
.post-reward {
margin-top: 20px;
padding-top: 10px;
text-align: center;
border-top: 1px dashed #e6e6e6
}
.post-reward .reward-button {
margin: 15px 0;
padding: 3px 7px;
display: inline-block;
color: #c05b4d;
border: 1px solid #c05b4d;
border-radius: 5px;
cursor: pointer
}
.post-reward .reward-button:hover {
color: #fefefe;
background-color: #c05b4d;
transition: .5s
}
.post-reward #reward:checked~.qr-code {
display: block
}
.post-reward #reward:checked~.reward-button {
display: none
}
.post-reward .qr-code {
display: none
}
.post-reward .qr-code .qr-code-image {
display: inline-block;
min-width: 200px;
width: 40%;
margin-top: 15px
}
.post-reward .qr-code .qr-code-image span {
display: inline-block;
width: 100%;
margin: 8px 0
}
.post-reward .qr-code .image {
width: 200px;
height: 200px;
background-color: transparent;
}
|
增加配置
config.toml中加入：
1
2
3
4
5
| [params.reward]
enable = true # 是否启用
wechat = "xxxx.png" # 微信
alipay = "" # 支付宝
paypal = "" # paypal
|
为空不会显示。
总结
以上美化效果参考了不少大佬的文章。
目前的美化效果就暂时这样，后续再继续更新。
https://xrg.fj.cn/p/hugo-stack%E4%B8%BB%E9%A2%98%E6%9B%B4%E6%96%B0%E5%B0%8F%E8%AE%B0
使用 Hugo 对博客的重建与 Stack 主题优化记录 (oxidane-uni.github.io)
（3）Stack主题的自定义 (linsnow.cn)
Hugo-theme-Stack 魔改美化 | Naive Koala (xalaok.top)
『Hugo』Hugo Styles (echosec.top)