Hugo Stack theme beautification

Foreword

Hugo Stack theme is very nice, but there are still some details where it is a little rough, at the same time, want to add some of their favorite features, so I wrote this beautification article.

File Add Random Poster

Finding a good-looking cover image is a time-consuming task, so we can automatically generate a random cover image to solve this problem.

Recommended settings in the template, modify archetypes/default.md (if not then just create a new one)

1
2
3
4
5

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
image: https://picsum.photos/800/600.webp?random={{ substr (md5 (.Date)) 4 8 }}
---

The focus here is on the image line, which uses Lorem Picsum’s interface to get a randomized image, which can also be found at Lorem Picsum for more details.

After that, when we use the hugo new command, the new post will be matched with a random image

Add a loading progress bar

Add the following to 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>

Then you will see a progress bar at the top of the page with the loading progress.

Add a rainbow background

Add the following to 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>

Scrollbar beautification

The default scrollbar is a bit ugly, but we can optimize it.

assets/scss/custom.scss Add the following:

 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;
      }
}

Styling the selected text

The default style of the selected text is white text on a blue background, which looks rather abrupt with the blog style, so you can change it.

Add the following to assets/scss/custom.scss:

1
2
3
4

::selection {
    color: #fff;
    background: #557697;
}

Summary

The above beautification effect refers to a number of big brother’s article.

This is the current beautification effect for the time being, and we will continue to update it later.

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)