Hugo 安装和简单使用请查看上篇文档
主题特色
Stack 主题具有以下特色功能：
现代化设计
- 响应式布局，完美支持移动端
- 暗色/亮色主题切换
- 优雅的卡片式设计
丰富功能
- 文章目录自动生成
- 阅读时间估算
- 文章字数统计
- 代码高亮
- 表情支持
- 图片画廊
社交集成
性能优化
多语言支持
安装配置
添加 Stack 主题
在个人站点目录，执行如下命令以 git 子模块的模式来添加 Stack：
1
2
3
4
5
6
7
8
| # 添加主题
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
# 更新主题
git submodule update --remote
# 查看主题版本号
git show
|
拉取完毕后，打开博客文件夹内的 theme/hugo-theme-stack/exampleSite，将文件夹内的 hugo.yaml 复制到站点根目录下，同时删除原有的 hugo.toml。
为了打造更符合自己心意的站点，需要将主题的资源复制到个人站点：
1
2
3
4
5
6
7
8
9
10
11
12
13
| # Windows 系统使用以下命令
xcopy themes\hugo-theme-stack\archetypes archetypes\ /E /I
xcopy themes\hugo-theme-stack\assets assets\ /E /I
xcopy themes\hugo-theme-stack\data data\ /E /I
xcopy themes\hugo-theme-stack\i18n i18n\ /E /I
xcopy themes\hugo-theme-stack\layouts layouts\ /E /I
# Linux/macOS 系统使用以下命令
cp -r themes/hugo-theme-stack/archetypes/* archetypes/
cp -r themes/hugo-theme-stack/assets/* assets/
cp -r themes/hugo-theme-stack/data/* data/
cp -r themes/hugo-theme-stack/i18n/* i18n/
cp -r themes/hugo-theme-stack/layouts/* layouts/
|
配置说明
hugo.yaml 主要配置项说明：
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| # 基础配置
baseurl: "https://example.com" # 博客的 URL
languageCode: "zh-cn" # 语言代码
theme: "hugo-theme-stack" # 主题名称
paginate: 10 # 每页显示的文章数量
title: "我的博客" # 网站名称
copyright: "© 2024" # 网站底部的版权信息
# 语言设置
DefaultContentLanguage: "zh-cn" # 默认显示的语言
hasCJKLanguage: true # 中文字数统计
# 多语言设置
languages:
zh-cn:
languageName: "简体中文"
weight: 1
title: "我的博客"
[languageContentDir]: "content/zh-cn"
[languageMenuName]: "简体中文"
# 服务配置
services:
googleAnalytics: "UA-XXXXXXXX-X" # Google 分析代码
disqus: "your-disqus-shortname" # Disqus 评论系统
utterances: "your-repo" # GitHub 评论系统
# 参数配置
params:
favicon: "/img/favicon.ico" # 站点图标
footer:
since: 2024 # 创建博客的年份
dateFormat:
published: "2006-01-02" # 发布时间格式
lastUpdated: "2006-01-02 15:04 MST" # 最后更新时间格式
sidebar:
emoji: "🍀" # 头像右下角的 emoji
subtitle: "热爱生活" # 头像下方的副标题
avatar:
src: "/img/avatar.png" # 头像图片位置
menu:
- identifier: "home"
name: "首页"
url: "/"
params:
newTab: false
- identifier: "about"
name: "关于"
url: "/about"
params:
newTab: false
# 文章配置
article:
math: false # 数学公式支持
toc: true # 目录显示
readingTime: true # 阅读时间
license:
enabled: false # 版权信息
default: Licensed under CC BY-NC-SA 4.0
edit:
enabled: true # GitHub 编辑
wordCount: true # 字数统计
# 菜单配置
menu:
social:
- identifier: "github"
name: "GitHub"
url: "https://github.com/yourusername"
params:
newTab: true
- identifier: "twitter"
name: "Twitter"
url: "https://twitter.com/yourusername"
params:
newTab: true
|
功能使用
使用表情
Stack 主题已开启表情支持，可以在表情仓库查找需要的表情。
使用示例：
1
| :smile: :heart: :rocket:
|
使用本地图片
Hugo 会根据内容文件的路径以及 permalinks 配置来生成 URL 和文件夹结构。
目录结构示例：
1
2
3
4
5
6
| content/
├── post
│ └── blog
│ └── images
│ └── test.png
│ └── first.md
|
编译后的结构：
1
2
3
4
5
6
7
8
| public/
├── p
│ └── first
│ └── index.html
└── post
└── blog
└── images
└── test.png
|
在 first.md 中引用图片：
1
| 
|
个性化设置
自定义小图标
- 访问 Tabler Icons
- 搜索想要的图标
- 设置图标参数：
- 点击图标复制 SVG 代码
- 在网站根目录的
assets/icons/ 文件夹创建 .svg 文件 - 在配置中使用图标
文章底部添加 GitHub 编辑链接
- 复制主题文件：
1
| cp themes/hugo-theme-stack/assets/layouts/partials/article/components/footer.html layouts/partials/article/components/
|
- 修改
footer.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
| <footer class="article-footer">
{{ partial "article/components/tags" . }}
{{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
<section class="article-copyright">
{{ partial "helper/icon" "copyright" }}
<span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span>
</section>
{{ end }}
<!-- GitHub 编辑链接 -->
{{ if and (.Site.Params.article.edit.enabled) (not (eq .Params.edit false)) }}
<section class="article-edit">
{{ partial "helper/icon" "brand-github" }}
<span>
<a href="https://github.com/yourusername/yourusername.github.io/edit/main/content/{{ replace .File.Path "\\" "/" }}"
target="_blank"
rel="noopener noreferrer">
在 GitHub 上编辑此页
</a>
</span>
</section>
{{ end }}
{{- if ne .Lastmod .Date -}}
<section class="article-lastmod">
{{ partial "helper/icon" "clock" }}
<span>
{{ T "article.lastUpdatedOn" }} {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
</span>
</section>
{{- end -}}
</footer>
|
- 在
hugo.yaml 中启用编辑功能：
1
2
3
4
5
6
7
8
9
| article:
math: false
toc: true
readingTime: true
license:
enabled: false
default: Licensed under CC BY-NC-SA 4.0
edit:
enabled: true # 启用编辑功能
|
自动更新文章最后修改时间
在 hugo.yaml 中添加以下配置：
1
2
3
4
5
6
7
8
9
10
| frontmatter:
# 按优先级排序：
# :git - 文件提交修改时间
# lastmod - 文章里 lastmod 字段
# :fileModTime - 文件修改时间
# :default - 默认时间
lastmod: [":git", "lastmod", ":fileModTime", ":default"]
enableGitInfo: true
gitRepo: "https://github.com/yourusername/yourusername.github.io"
|
文章字数统计
- 修改
layouts/partials/article/components/details.html：
1
2
3
4
5
6
7
8
| {{ if .Site.Params.article.wordCount }}
<div>
{{ partial "helper/icon" "pencil" }}
<time class="article-words">
{{ .WordCount }} 字
</time>
</div>
{{ end }}
|
- 在
hugo.yaml 中启用字数统计：
1
2
| article:
wordCount: true
|
站点总字数统计
- 修改
layouts/partials/footer/footer.html：
1
2
3
4
5
6
7
8
9
10
| {{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
<section class="wordcount">
<p>{{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}k 字
<br>{{ len (where .Site.RegularPages "Section" "post") }}篇文章
</p>
</section>
|
- 修改
assets/scss/partials/footer.scss：
1
2
3
4
| .wordcount {
color: var(--accent-color);
margin-bottom: 5px;
}
|
界面优化
缩小归档页的分类卡片尺寸
修改 assets/scss/partials/layout/list.scss：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| .subsection-list {
overflow-x: auto;
.article-list--tile {
display: flex;
padding-bottom: 0px;
article {
width: 150px;
height: 90px;
margin-right: 5px;
flex-shrink: 0;
.article-title {
margin: 0;
font-size: 1.8rem;
}
.article-details {
padding: 20px;
}
}
}
}
|
在首页文件列表显示内容简介
- 修改
assets/layouts/partials/article-list/default.html：
1
2
3
4
5
6
7
| {{ with .Params.description }}
<div class="article-subtitle-wrapper">
<h3 class="article-subtitle">
{{ . }}
</h3>
</div>
{{ end }}
|
- 修改
assets/scss/custom.scss：
1
2
3
4
5
6
7
8
9
| .article-subtitle-wrapper {
padding-left: var(--card-padding);
padding-right: var(--card-padding);
padding-bottom: var(--card-padding);
}
.article-time {
padding-top: 5px;
}
|
- 删除
layouts/partials/article/components/details.html 中的 article-subtitle
在归档列表显示内容简介
修改 assets/layouts/partials/article-list/compact.html：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="article-details">
<h2 class="article-title">
{{- .Title -}}
</h2>
{{ with .Params.description }}
<div class="article-subtitle">
{{ . }}
</div>
{{ end }}
<footer class="article-time">
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
{{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
</time>
</footer>
</div>
|
代码块样式优化
修改 assets/scss/partials/layout/article.scss：
1
2
3
4
5
6
7
8
9
10
11
| .highlight {
margin-left: 0;
margin-right: 0;
width: calc(100%);
border-radius: var(--card-border-radius);
}
.copyCodeButton {
top: 5px;
right: 5px;
}
|