安装hugo并使用Stack主题
安装
安装文档: https://gohugo.io/installation/
Mac安装： brew install hugo
创建网站
hugo new site myblog
下载Stack主题
文档：https://stack.jimmycai.com/
cd myblog
git clone https://hub.nuaa.cf/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
将主题应用到网站
cp -r themes/hugo-theme-stack/exampleSite/content ./
cp -r themes/hugo-theme-stack/exampleSite/config.yaml ./
rm config.toml
修改错误文件
移除国内不支持的youtube，twitter， vimeo
vim ./content/post/rich-content/index.md
本地启动
hugo server
修改文章模版 & 新增文章
vim ./archetypes/default.md
1
2
3
4
5
6
7
8
9
|
---
title: "{{ replace .Name "-" " " | title }}"
description:
date: {{ .Date }}
image:
categories:
tags:
draft: false
---
|
hugo new post/eSir/index.md or new post/eSir.md
发布网站
默认发布到./public
hugo
指定发布到文件夹
hugo -d ./public
定制自己的Hugo和优化Stack主题
修改网站标题
修改./config.yaml文件中的title
如果是多语言:
- 修改英文
languages > en > title 和 languages > en > parms > description
- 修改中文
languages > zh-cn > title 和 languages > zh-cn > parms > description
修改网站头像
修改./config.yaml文件中的params > sidebar > avatar > src为img/**.jpg, 把自己的头像复制到 ./assets/img/文件夹下
修改网站图标
修改./config.yaml文件中的params > favicon为/favicon.ico,将自己的favicon.ico复制到./static文件夹中, 可能需要重启几次才会显示出来
修改默认语言
修改./config.yaml文件中的DefaultContentLanguage, 想要中文就改成 zh-cn
多语言默认是中文时，网站会在./content文件夹中先找对应语言的文章如 **/index.zh-cn.md来显示，如果没有则显示**/index.md的
修改左侧主菜单
如果想移除archives/links/search菜单，则去移除./content/page/about/index.**.md文件中的menu字段
修改右侧插件菜单
eg: 移除右侧的档案块
修改./config.yaml文件，移除params > widgets > homepage > archives
修改友情链接单行为双行
在文件./assets/scss/custom.scss中增加样式, custom.scss文件中的样式会覆盖原来的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/* 友情链接改为双列显示 */
@media (min-width: 1024px) {
.article-list--compact.links {
display: grid;
grid-template-columns: 1fr 1fr;
background: none;
box-shadow: none;
article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: 10px;
&:nth-child(odd) {
margin-right: 8px;
}
}
}
}
|
文章页显示最后修改时间 & 增加Icon
修改./config.yaml文件，增加一个lastmod
1
2
|
frontmatter:
lastmod: [":fileModTime", "lastmod"]
|
这样就会在文章页尾显示最后修改时间
修改 最后修改时间 的图标为 edit样式：
- 去tabler[https://tabler.io/icons]下载edit的图标到
./assets/icons/edit.svg
- 修改
themes/hugo-theme-stack/layouts/partials/article/components/footer.html文件line13的 {{ partial "helper/icon" "clock" }} 为 {{ partial "helper/icon" "edit" }}
附上我的config.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
|
baseurl: http://ifelse01.top
languageCode: en-us
theme: hugo-theme-stack
paginate: 5
title: Full Stack Blog
copyright: ifelse01
frontmatter:
lastmod: [":fileModTime", "lastmod"]
languages:
en:
languageName: English
title: Full Stack Blog
weight: 1
params:
description: Just so so..
zh-cn:
languageName: 中文
title: 技术栈碎记
weight: 2
params:
description: Just so so..
# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack
# GA Tracking ID
googleAnalytics:
# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: zh-cn
# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true
permalinks:
post: /p/:slug/
page: /:slug/
params:
mainSections:
- post
featuredImageField: image
rssFullContent: true
favicon: /favicon.ico # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)
footer:
since: 2023
customText: '<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank"><p style=" height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">粤ICP备 2023154696号</p></a>'
dateFormat:
published: Jan 02, 2006
lastUpdated: Jan 02, 2006 15:04 MST
sidebar:
emoji: ❤️
subtitle: Just so so..
avatar:
enabled: true
local: true
src: img/avatar.jpg
article:
math: false
toc: true
readingTime: true
license:
enabled: false
default: Licensed under CC BY-NC-SA 4.0
comments:
enabled: true
provider: disqus
disqusjs:
shortname:
apiUrl:
apiKey:
admin:
adminLabel:
utterances:
repo:
issueTerm: pathname
label:
remark42:
host:
site:
locale:
vssue:
platform:
owner:
repo:
clientId:
clientSecret:
autoCreateIssue: false
# Waline client configuration see: https://waline.js.org/en/reference/component.html
waline:
serverURL:
lang:
pageview:
emoji:
- https://unpkg.com/@waline/emojis@1.0.1/weibo
requiredMeta:
- name
- email
- url
locale:
admin: Admin
placeholder:
twikoo:
envId:
region:
path:
lang:
# See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
cactus:
defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
serverName: "cactus.chat"
siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)
giscus:
repo:
repoID:
category:
categoryID:
mapping:
lightTheme:
darkTheme:
reactionsEnabled: 1
emitMetadata: 0
gitalk:
owner:
admin:
repo:
clientID:
clientSecret:
cusdis:
host:
id:
widgets:
homepage:
- type: search
#- type: archives
# params:
# limit: 5
- type: categories
params:
limit: 10
- type: tag-cloud
params:
limit: 10
page:
- type: toc
opengraph:
twitter:
# Your Twitter username
site:
# Available values: summary, summary_large_image
card: summary_large_image
defaultImage:
opengraph:
enabled: false
local: false
src:
colorScheme:
# Display toggle
toggle: true
# Available values: auto, light, dark
default: auto
imageProcessing:
cover:
enabled: true
content:
enabled: true
### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
main: []
related:
includeNewer: true
threshold: 60
toLower: false
indices:
- name: tags
weight: 100
- name: categories
weight: 200
markup:
goldmark:
renderer:
## Set to true if you have HTML content inside Markdown
unsafe: true
tableOfContents:
endLevel: 4
ordered: true
startLevel: 2
highlight:
noClasses: false
codeFences: true
guessSyntax: true
lineNoStart: 1
lineNos: true
lineNumbersInTable: true
tabWidth: 4
|
参考
Exnadio’s Blog：https://oxidane-uni.github.io/p/%E4%BD%BF%E7%94%A8-hugo-%E5%AF%B9%E5%8D%9A%E5%AE%A2%E7%9A%84%E9%87%8D%E5%BB%BA%E4%B8%8E-stack-%E4%B8%BB%E9%A2%98%E4%BC%98%E5%8C%96%E8%AE%B0%E5%BD%95/
