修改站点背景颜色
- 在"assets/scss/variables.scss"中找到
1
|
--body-background: #f6f6f6;
|
- 或在"assets/scss/customs.scss"中找到
1
|
--body-background: #f6f6f6;
|
参考自：Hugo | Hugo-stack-theme 主题魔改版
友链的添加
- 在"content/page/links"的 index.md 中有详细解释，图标可通过图床或者本地渲染，模仿格式即可，或可直接把文件内容换为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
---
title: 友情链接
links:
- title: 爱吃鱼的小林 - linsk
description: 一个大三程序员,博客讲述了hugo中许多美化stack的主题的教程、前端领域知识以及其他
website: https://linsk27.github.io/
image: fish.png
menu:
main:
weight: -50
params:
icon: link
comments: false
---
|
显示文章更新时间
手动添加更新时间
- hugo 默认位置为 archetypes/default.md 或者主题下目录下 xx 主题/archetypes/posts.md，加
lastmod字段，在创建文章模板里添加以下一行，创建时会以主题目录下的模板来创建。
- 添加
lastmod，有个好处就是可自由修改这个字段的时间。
- 在 “config.toml/yaml/json/” 中写明调整这里顺序即可
1
|
frontmatter: lastmod = [":git", "lastmod", ":fileModTime", ":defalut"]
|
自动添加更新时间
- 记得在"config.toml/yaml/json"开启 gitinfo
1
2
|
#获取git信息
enableGitInfo = true #设为true
|
- 这样就提交代码时，就会去读取
git 时间，来更新文章的更新时间!
但是后面我发现了一个问题：每次重新 git push 之后所有文件最近更新时间 mtime 都变成推送的时刻，这是 git 的一个部署配置问题,因此我搜索了许多博客，终于在hugo github action|vecel 部署后文章更新时间异常修复这篇文章找到了解决方法，总的来说：
- 在 “.github/workflows/xx.yml”,新增以下配置，主要是
quotePath，默认情况下，文件名包含中文时，git 会使用引号吧文件名括起来，这会导致 action 中无法读取:GitInfo 变量，所以要设置Disable quotePath
1
2
3
4
5
6
|
- 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
|
- 使用
checkout的话 fetch-depth 需要设为 0，depth默认是为 1，默认只拉取分支最近一次 commit，可能会导致一些文章的 GitInfo 变量无法获取，设为 0 代表拉去所有分支所有提交。
1
2
3
|
uses: actions/checkout@v4
with:
fetch-depth: 0 #设为0
|
以下是我的最终的 yml 配置文件,大家可以参考
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
|
name: deploy
# 代码提交到main分支时触发github action
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
env:
TZ: Asia/Shanghai # 添加正确的时区
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0
- 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
- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
with:
hugo-version: "latest"
extended: true
- name: Build Web
run: hugo -D
- name: Deploy Web
uses: peaceiris/actions-gh-pages@v4
with:
PERSONAL_TOKEN: ${{ secrets.TOKEN }}
EXTERNAL_REPOSITORY: linsk27/linsk27.github.io
PUBLISH_BRANCH: main
PUBLISH_DIR: ./public
commit_message: auto deploy
|
更新时间显示在卡片
- stack 主题的文章更新时间在文章底部
- 若想在文章开头就显示更新时间，修改 “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>
|
- 这样就会文章开头显示修改时间
显示文章字数统计
- 在"config.toml/yaml/json"的
.params.article中，添加
1
|
wordCount: true #打开字数统计
|
- 注意的是默认 WordCount 是不统计中文字数的，你需要在"config.toml/yaml/json"中添加
- 在"layouts/partials/article/components/details.html"中的
<footer class="article-time">内，打开本地 hugo 静态调试，按照位置添加
1
2
|
<i class="fa fa-regular fa-message" style="color: #ff8e2d;"></i>
本文有 {{ .WordCount }} 个字
|
- 效果如图
修改分类标签的颜色
- 在"content/categories"创建与分类同名的文件夹，并且在文件夹中创建"_index.md"文件并添加下面的内容,文件内会有一个 Test 的例子，可以模仿 Test 文件夹里面的内容
1
2
3
4
5
6
7
8
|
----
title: 这里写分类名称
description: 分类简介，不需要可以删了
image: "categories.png" // 分类的题图
style:
background: "#80aba9" //分类标签底色
color: "#fff"
----
|
背景脚本放置位置
dev\themes\hugo-theme-stack\layouts\partials\footer
