Hugo Stack 主题美化

前言

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)