【Hugo】Stack主题自定义修改

TODO：bilibili视频，可能做，可能不做，内容比较杂，不太好做视频

1 修改字体

(1) 前往【100font】，下载自己想要的字体，这边演示缝合像素字体，字体文件为 fusion-pixel-10px-monospaced-zh_hans.ttf

(2) 把字体文件放入assets/font下(文件夹自己创建)

(3) 将以下代码修改并复制到layouts/partials/footer/custom.html文件中(文件不存在就自己创建)
- 字体名：给字体命名一个别名，随便填写就好，保持统一就行
- 字体文件名：字体文件的全名，带后缀名的，也就是 xxx.ttf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<style>
  @font-face {
    font-family: '字体名';
    src: url({{ (resources.Get "font/字体文件名").Permalink }}) format('truetype');
  }

  :root {
    --base-font-family: '字体名';
    --code-font-family: '字体名';
  }
</style>

(4) 这样博客字体就修改好了

2 修改鼠标样式

(1) 准备好鼠标样式图片(默认，指针，文本…)，图片大小建议控制在 32px 左右，将图片放入static/mouse文件夹下(文件夹自己创建)
- 演示鼠标来源：【B站up主】

(2) 修改assets/scss/custom.scss(文件不存在则自己创建)，将以下代码复制进去，根据主题按实际情况填写对应的css选择器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// 【鼠标样式常规写法】
body,
html {
  cursor: url(../mouse/默认光标图片名),
  auto !important;
}

css选择器 {
  cursor: url(../mouse/其他光标图片名),
  auto;
}

(3) 以下是我调试好的 stack 主题的鼠标样式，同样是stack主题的可以直接复制，修改对应的图片名即可

 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


// 【Stack主题鼠标样式写法】
// default光标图片
body,
html,
.article-content img {
  cursor: url(../mouse/默认光标图片名),
  auto !important;
}

// pointer光标图片
a:hover,
button:hover,
.copyCodeButton:hover,
#dark-mode-toggle {
  cursor: url(../mouse/指针光标图片名),
  auto;
}

// text光标图片
input:hover,
.site-description,
.article-subtitle,
.article-content span,
.article-content li,
.article-content p {
  cursor: url(../mouse/文本光标图片名),
  auto;
}

3 显示文章更新时间

(1) 在配置文件 hugo.yaml 中加入以下配置

1
2
3
4
5
6
7
8


# 更新时间：优先读取git时间 -> git时间不存在，就读取本地文件修改时间
frontmatter:
  lastmod:
    - :git
    - :fileModTime

# 允许获取Git信息		
enableGitInfo: true

(2) 修改github action文件.github/workflows/xxx.yaml，在运行 hugo -D 命令的step前加入以下配置

1
2
3
4
5
6
7
8
9


jobs:
  deploy:
    steps:
      - name: Git Configuration
        run: |
          git config --global core.quotePath false
          git config --global core.autocrlf false
          git config --global core.safecrlf true
          git config --global core.ignorecase false          

(3) 这样就提交代码时，就会去读取git时间，来更新文章的更新时间
- stack主题的文章更新时间在文章底部

(4) 若想在文章开头就显示更新时间，修改layouts/partials/article/components/details.html，在指定位置引入以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<div class="article-details">
    ...
    <footer class="article-time">
        ...
        <!-- 更新时间 -->
        {{- if ne .Lastmod .Date -}}
            <div class="article-lastmod">
                {{ partial "helper/icon" "clock" }}
                <time>
                    {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
                </time>
            </div>
        {{- end -}}
        ....
    </footer>
    ...
</div>

这样就会文章开头显示修改时间
- tips: 更新时间的格式去 hugo.yaml 中的 params.dateFormat.lastUpdated 进行修改

4 友链、归档多列显示

修改assets/scss/custom.scss文件(不存在则自行创建)，引入以下css样式代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


@media (min-width: 1024px) {
  .article-list--compact {
    display: grid;
    // 目前是两列，如需三列，则后面再加一个1fr，以此类推
    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;
      margin-right: 8px;
      border-radius: 16px;
    }
  }
}

5 文章目录折叠&展开

(1) 将以下代码复制到layouts/partials/footer/custom.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


<style>
    #TableOfContents > ul, ol {
        ul, ol {
            display: none;
        }
        .open {
            display: block;
        }
    }
</style>

<script>
    function initTocHide() {
        // 判断是否存在文章目录
        let toc = document.querySelector(".widget--toc");
        if (!toc) {
            return;
        }
        // 监听滚动
        window.addEventListener('scroll', function() {
            // 获取active-class
            let currentLi = document.querySelector(".active-class");
            if (!currentLi) {
                return
            }
            //清除class值
            let elementsByClassName = document.querySelectorAll(".open");
            if (elementsByClassName.length > 0) {
                elementsByClassName.forEach((ul) => {
                    ul.classList.remove("open")
                })
            }
            // 展示子ul
            if (currentLi.children.length > 1) {
                currentLi.children[1].classList.add("open")
            }
            // 展示父ul
            let ul = currentLi.parentElement;
            do {
                ul.classList.add("open");
                ul = ul.parentElement.parentElement
            } while (ul !== undefined && (ul.localName === 'ul' || ul.localName === 'ol'))
        });
    }
    initTocHide()
</script>

(2) 这样文章就会默认隐藏子目录，等滚动到对应的目录后，才会将子目录进行展示

6 添加’返回顶部’按钮

(1) 自行准备一张 返回顶部 的图片，放到assets/icons文件夹下(不存在则自行创建)

(2) 将以下代码复制到layouts/partials/footer/custom.html文件中(不存在则自行创建)，修改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


<style>
    #backTopBtn {
        display: none;
        position: fixed;
        bottom: 30px;
        z-index: 99;
        cursor: pointer;
        width: 30px;
        height: 30px;
        background-image: url({{ (resources.Get "icons/图片文件名").Permalink }});
    }
</style>

<script>
    /**
     * 滚动回顶部初始化
     */
    function initScrollTop() {
        let rightSideBar = document.querySelector(".right-sidebar");
        if (!rightSideBar) {
            return;
        }
        // 添加返回顶部按钮到右侧边栏
        let btn = document.createElement("div");
        btn.id = "backTopBtn";
        btn.onclick = backToTop
        rightSideBar.appendChild(btn)
        // 滚动监听
        window.onscroll = function() {
            // 当网页向下滑动 20px 出现"返回顶部" 按钮
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                btn.style.display = "block";
            } else {
                btn.style.display = "none";
            }
        };
    }

    /**
     * 返回顶部
     */
    function backToTop(){
        window.scrollTo({ top: 0, behavior: "smooth" })
    }

    initScrollTop();
</script>

(3) 这样当我们页面滚动到一定距离后，右下角会出现返回顶部的按钮，点击后可以平滑地返回顶部