【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) 这样就提交代码时，就会去读取git时间，来更新文章的更新时间
- stack主题的文章更新时间在文章底部

(3) 若想在文章开头就显示更新时间，修改layouts/partials/article/components/detail.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;
    }
  }
}