Hugo 目录结构

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

.

├── archetypes

│ └── default.md # hugo新建文章的默认模板

├── config.yaml # 网站配置文件

├── content # 站点内的内容都在这里

│ ├── categories # “分类”页面的首页

│ │ └── Test # “分类”页面下的一个具体分类页面

│ ├── page # 显示在网站主页左侧边栏菜单的选项（导航栏）

│ │ ├── about # 左侧边栏菜单中的“关于”页面

│ │ ├── archives # 左侧边栏菜单中的“归档”页面

│ │ ├── links # 左侧边栏菜单中的“链接”页面

│ │ └── search # 左侧边栏菜单中的“搜索”页面

│ └── post # 用户写的帖子都放在这里，每个子文件夹对应一个帖子

│ ├── 2024

│ ├── 09

│ ├── 文章目录

│ ├── .md

│ ├── .img

│ ├── 10

│ ├── 文章目录

│ ├── .md

├── data

├── layouts

├── LICENSE

├── README.md

├── resources

│ └── _gen

│ ├── assets

│ └── images

├── static # 放用户自定义字体、用户头像、网站小图标等

└── themes # 放各种主题

└── hugo-theme-stack # stack主题

├── archetypes

├── assets

├── config.yaml

├── data

├── debug.sh

├── exampleSite

├── go.mod

├── i18n

├── images

├── layouts

├── LICENSE

├── netlify.toml

├── README.md

└── theme.toml

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

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

baseurl: https://example.com/

languageCode: zh-cn

theme: hugo-theme-stack # 主题

title: 额，随便测试 # 这个没用

copyright: Wei Qi # 这个是在页脚显示的

TimeZone: Asia/Shanghai

DefaultContentLanguage: zh-cn # 中文支持

hasCJKLanguage: true # 如果是中文就设置为true，否则设置为false

languages: # 多语言支持

zh-cn:

languageName: 中文

title: 网站名称

weight: 2

params:

description: 网站描述

services: # 主题配置

disqus:

shortname: "hugo-theme-stack"

pagination:

pagerSize: 6 # 页面显示的文章数量

params:

mainSections:

- post # 首页显示的文章所在路径，即首页会显示 hugo/content/post/ 下的所有文章

featuredImageField: image

rssFullContent: true

favicon: /favicon.ico # 网站的图标，放到主题根目录下

footer:

since: 2024 # 页脚显示年份的开始年份

dateFormat: # 时间显示格式

published: 2006年1月2日 # Jan 02, 2006

lastUpdated: 2006年1月2日 15:04 # Jan 02, 2006 15:04 MST

sidebar:

emoji: 🍥

subtitle: Life is Passion ! # 头像下边的文字

avatar:

enabled: true

local: false # false 头像才显示本地的图片

src: /img/tx.png # 放到 hugo/static/img/ 下边，没有 img 则新建

article: # 文章页配置

math: false # 启用数学公式

toc: true # 文章显示目录

readingTime: true # 文字显示阅读时间

license:

enabled: true

default: Licensed under CC BY-NC-SA 4.0 # 默认的版权许可

comments: # 评论系统

enabled: false # 开评论则为 true，需要到网上搜索相关的配置

provider: disqus

widgets: # 右侧导航栏，即在页面右边显示：搜索、归档、标签，将对应的 type 注释掉则不显示

homepage:

- type: search # 首页搜索框

- type: archives # 首页归档

params:

limit: 5

- type: categories # 首页分类

params:

limit: 10

- type: tag-cloud # 首页标签云

params:

limit: 10

page:

- type: toc # 文章目录

colorScheme:

# Display toggle

toggle: true # 显示切换暗色模式按钮

# Available values: auto, light, dark

default: auto # 默认主题模式

imageProcessing:

cover:

enabled: true # 是否启用封面图

content:

enabled: true # 是否启用内容图片

menu: # 菜单、导航栏

main: [] # 这里不配置，配置菜单最好是在 hugo/content/page/ 下加 .md 文件

social: # 头像下边的社交链接

- identifier: github

name: GitHub

url: # https://github.com/CaiJimmy/hugo-theme-stack

params:

icon: brand-github

- identifier: twitter

name: Twitter

url: # https://twitter.com

params:

icon: brand-twitter

related: # 相关文章

includeNewer: true

threshold: 60

toLower: false

indices:

- name: tags

weight: 100

- name: categories

weight: 200

markup:

goldmark:

# 这里是 goldmark 渲染选项，默认即可

tableOfContents: # 文章目录（右边），层级

endLevel: 5 # 显示几层标题

ordered: true # 标题显示序号，false则无序

startLevel: 2 # 从第几级标题开始显示

highlight: # 代码块高亮

noClasses: false # 不启用特定css类高亮

codeFences: true # 启用代码块

guessSyntax: true # 自动识别语法

# lineNoStart: 1

lineNos: true # 启用行号

# lineNumbersInTable: true

# tabWidth: 4

style: github-dark # 代码块样式

frontmatter:

lastmod: :fileModTime # 文章末尾显示文章的更新时间

站点配置

网站图标

根据上边的 【hugo.yaml 配置文件】，把 .ico 文件放到主题的根目录下，然后修改

1

favicon: /favicon.ico

首页头像

根据上边的 【hugo.yaml 配置文件】，把 .png 放到 hugo/static/img/ 下，然后修改

1

2

3

4

5

6

7

sidebar:

emoji: 🍥

subtitle: 好好生活 # 头像下边的文字

avatar:

enabled: true

local: false # true 这里要改为 false 才生效

src: /img/tx.png # 头像

网站名称

根据上边的 【hugo.yaml 配置文件】，自己改改 languages

导航栏

根据上边的 【Hugo 目录结构】，将 hugo-theme-stack\exampleSite\content 的内容放到 hugo/content/ 下，其中 page 目录就是导航栏。

站点底部文字

底部文字在 hugo-theme-stack/layout/partials/footer/footer.html 里，相关的网安备案、ICP备案、使用Hugo构建、文章数量、访问人数等文字都写在这里。

更改“使用 Hugo 构建 主题Stack由Jimmy设计”等字样

hugo-theme-stack/layout/partials/footer/footer.html 注释掉原先的代码，注意是

里边

1

2

3

4

5

6

7

8

9

10

11

12

13

14

......

Hugo theme Stack designed by Jimmy

效果就如现在的网站一致。

[!CAUTION]

由于自己不会写相关的代码，所以这个操作是：

在网页上，F12控制台找到该相关元素，右键选择【编辑为 HTML 】，将这段 HTML 代码复制贴贴到 footer.html 里，然后再修改文字

添加备案

hugo-theme-stack/layout/partials/footer/footer.html 在

里边，自己调整代码的位置，看得舒服就行。

1

2

X ICP 备 2024XXXXXX 号

XX网安备 XXXXXXXXXX 号

统计站点文章数量和字数

参考：多语言 hugo 添加总字数统计和建站时间 - 滑翔闪’S BLOG (huaxiangshan.com)

hugo-theme-stack/layout/partials/footer/footer.html 在

里边，加入

1

2

3

4

5

6

7

{{ $articleCount := len .Site.RegularPages }}

{{ $totalWordCount := 0 }}

{{ range .Site.Pages }}

{{ $totalWordCount = add $totalWordCount .WordCount }}

{{ end }}

发布了 {{ $articleCount }} 篇文章 | 共 {{$totalWordCount}} 字

效果如下：

但是我觉得这个效果不好，用 k 来做单位会更直观一些。所以做如下修改：

1

2

3

4

5

{{ $totalWordCountInK := div $totalWordCount 100.0 }}

{{ $totalWordCountInKCeiling := math.Ceil $totalWordCountInK }}

{{ $totalWordCountInKFloat := div $totalWordCountInKCeiling 10.0 | printf "%.1f"}}

发布了 {{ $articleCount }} 篇文章 | 共 {{ $totalWordCountInKFloat }}K 字

效果如下：

站点访问人数统计

参考：Hugo+Stack主题集成Vercount统计网站访问信息 (farb.top)

1）在 hugo-theme-stack/layout/partials/footer/custom.html 加入

1

2）在 hugo-theme-stack/layout/partials/footer/footer.html 在

里边，加入（合适的位置，看着舒服就行）

1

总访客数: Loading | 总访问量: Loading

页面加载进度条显示

在 hugo-theme-stack/layout/partials/footer/custom.html 加入

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/nprogress.min.js"

integrity="sha384-bHDlAEUFxsRI7JfULv3DTpL2IXbbgn4JHQJibgo5iiXSK6Iu8muwqHANhun74Cqg"

crossorigin="anonymous"

>

rel="stylesheet"

href="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/css/nprogress.css"

integrity="sha384-KJyhr2syt5+4M9Pz5dipCvTrtvOmLk/olWVdfhAp858UCa64Ia5GFpTN7+G4BWpE"

crossorigin="anonymous"

/>

首页设置

首页全局配置

在 hugo-theme-stack/assets/scss/custom.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

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

/*---------------全局设置-------------*/

:root {

--card-border-radius: 20px; //小卡片圆角

--article-font-size: 1.7rem; // 全局字体大小

//--card-background: #ffffff;//小卡片背景颜色

//--body-text-color: rgba(171, 169, 169, 0.58);//字体颜色

}

/*选中文字颜色*/

::selection {

color: #fff;

background: #557697;

}

/*滚动条样式*/

html {

::-webkit-scrollbar {

width: 18px;

//display: none; //隐藏滚动条

}

::-webkit-scrollbar-track {

//background-color: #fff; //滚动条背景颜色

}

::-webkit-scrollbar-thumb {

//鼠标移动上去前的滚动条颜色

background-color: rgba(111, 114, 115, 0.65);

border-radius: 20px;

border: 6px solid transparent;

background-clip: content-box;

}

::-webkit-scrollbar-thumb:hover {

//鼠标移动上去时的滚动条颜色

background-color: #232525;

}

}

首页欢迎栏

1）在 hugo-theme-stack/layouts/index.html 里加入

1

2

3

4

5

6

7

8

9

10

11

👋

Welcome

To

Wei Qi

Blog

位置如下：

2）在 hugo-theme-stack/assets/scss/custom.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

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

//首页欢迎板块样式

.welcome {

color: var(--card-text-color-main);

background: var(--card-background);

box-shadow: var(--shadow-l2);

border-radius: 30px;

display: inline-block;

}

// 👋emoji实现摆动效果

.shake {

display: inline-block;

animation: shake 1s;

animation-duration: 1s;

animation-timing-function: ease;

animation-delay: 0s;

animation-iteration-count: 1;

animation-direction: normal;

animation-fill-mode: none;

animation-play-state: running;

animation-name: shake;

animation-timeline: auto;

animation-range-start: normal;

animation-range-end: normal;

animation-delay: 2s;

@keyframes shake {

0% {

transform: rotate(0);

}

25% {

transform: rotate(45deg) scale(1.2);

}

50% {

transform: rotate(0) scale(1.2);

}

75% {

transform: rotate(45deg) scale(1.2);

}

100% {

transform: rotate(0);

}

}

}

// 实现字符跳动动画

.jump-text1 {

display: inline-block;

animation: jump 0.5s 1;

}

.jump-text2 {

display: inline-block;

animation: jump 0.5s 1;

animation-delay: 0.1s;

}

.jump-text3 {

display: inline-block;

animation: jump 0.5s 1;

animation-delay: 0.2s;

}

.jump-text4 {

display: inline-block;

animation: jump 0.5s 1;

animation-delay: 0.3s;

}

.jump-text5 {

display: inline-block;

animation: jump 0.5s 1;

animation-delay: 0.4s;

}

.jump-text6 {

display: inline-block;

animation: jump 0.5s 1;

animation-delay: 0.5s;

}

.jump-text7 {

display: inline-block;

animation: jump 0.5s 1;

animation-delay: 0.6s;

}

.jump-text8 {

display: inline-block;

animation: jump 0.5s 1;

animation-delay: 0.7s;

}

.jump-text9 {

display: inline-block;

animation: jump 0.5s 1;

animation-delay: 0.9s;

}

@keyframes jump {

0% {

transform: translateY(0);

}

50% {

transform: translateY(-20px);

}

100% {

transform: translateY(0);

}

}

首页文章布局

在 hugo-theme-stack/assets/scss/custom.scss 加入

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/*主页布局间距调整*/

.main-container {

gap: 50px; //文章宽度

@include respond(md) {

padding: 0 30px;

gap: 40px; //中等屏幕时的文章宽度

}

}

.related-contents {

overflow-x: visible; //显示隐藏的图标

padding-bottom: 15px;

}

首页文章样式

在 hugo-theme-stack/assets/scss/custom.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

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

/*主页文章图片样式*/

$image-scale: 1.2;

.article-list article .article-image img {

width: 100%;

height: 150px;

object-fit: cover;

//不同显示器（手机，小屏幕电脑，大屏幕电脑）显示的图片高度大小

@include respond(sm) {

height: 305px;

}

@include respond(md) {

height: 305px;

}

@include respond(xl) {

height: 325px;

}

}

/*主页文章图片圆角*/

.article-list article {

--card-border-radius: 24px;

}

/*文章标签圆角*/

.article-category a, .article-tags a {

border-radius: 11px;

}

/*鼠标移动到文章图片放大*/

.article-list article .article-image {

position: relative;

overflow: hidden; //不显示超出的部分

}

.article-list article .article-image img:hover {

transform: scale($image-scale); //放大尺寸

}

.article-list article .article-image img {

transition: transform 0.85s ease-in-out;//持续时间

}

文章内部图片样式

在 hugo-theme-stack/assets/scss/custom.scss 加入

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/*文章内部-页脚-相关文章图片圆角*/

.article-list--compact article .article-image img {

border-radius: 17%;

}

/*文章内部-页脚-相关文章图片放大动画*/

.article-list--compact article > a {

transition: .6s ease;

}

.article-list--compact article > a:hover {

transform: scale(1.03, 1.03);

overflow: visible;

}

首页右侧导航栏美化

在 hugo-theme-stack/assets/scss/custom.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

25

26

27

28

29

30

31

/*------------------右侧导航栏--------------*/

/*搜索菜单动画*/

.search-form.widget {

transition: transform 0.6s ease;

}

.search-form.widget:hover {

transform: scale(1.1, 1.1);

}

/*归档小图标放大动画*/

.widget.archives .widget-archive--list {

transition: transform .3s ease;

}

.widget.archives .widget-archive--list:hover {

transform: scale(1.05, 1.05);

}

/*右侧标签放大动画*/

.tagCloud .tagCloud-tags a {

border-radius: 10px;

font-size: 1.4rem;

transition: transform .3s ease;

}

.tagCloud .tagCloud-tags a:hover {

transform: scale(1.1, 1.1);

}

首页左侧导航栏美化

在 hugo-theme-stack/assets/scss/custom.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

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

/*--------------------左侧导航栏---------------*/

.left-sidebar {

--sidebar-avatar-size: 115px; //左侧头像大小

--sidebar-element-separation: 15px; //头像下方间距

--emoji-size: 40px; //emoji容器大小

--emoji-font-size: 25px; //emoji字体大小

}

/*头像旋转动画*/

.sidebar header .site-avatar .site-logo {

transition: transform 1.65s ease-in-out; //旋转时间

}

.sidebar header .site-avatar .site-logo:hover {

transform: rotate(360deg); //旋转角度为360度

}

/*社交菜单居中*/

.social-menu svg {

gap: 15px;

justify-content: center;

width: 30px;

height: 30px; //社交菜单大小

stroke: var(--body-text-color);

stroke-width: 1.33;

}

/*暗色模式按钮距离上边按钮边距调整*/

.menu .menu-bottom-section {

margin-top: 70px;

}

// #dark-mode-toggle {

// gap: 30px; //暗色模式横向长度

// }

/*下拉菜单美化*/

.menu {

list-style: none;

flex-direction: column;

overflow-x: hidden;

overflow-y: scroll; //搭配菜单滚动条美化使用

flex-grow: 1;

font-size: 1.7rem;

// background-color: rgb(252, 252, 252);

box-shadow: var(--shadow-l2); //改个阴影

display: none;

margin: 0; //改为0

// border-radius: 20px; //加个圆角 这个圆角看起来怪怪的，不适合，注释掉

padding: 30px 30px;

@include respond(xl) {

padding: 15px 0;

}

&,

.menu-bottom-section {

gap: 30px;

@include respond(xl) {

gap: 25px;

}

}

&.show {

display: flex;

}

@include respond(md) {

align-items: flex-end;

display: flex;

background-color: transparent;

padding: 0;

box-shadow: none;

margin: 0;

}

li {

position: relative;

vertical-align: middle;

padding: 0;

@include respond(md) {

width: 100%;

}

svg {

stroke-width: 1.33;

width: 20px;

height: 20px;

}

a {

height: 100%;

display: inline-flex;

align-items: center;

color: var(--body-text-color);

gap: var(--menu-icon-separation);

}

span {

flex: 1;

}

&.current {

a {

color: var(--accent-color);

font-weight: bold;

}

}

}

}

/*手机模式下的菜单滚动条美化*/

.menu::-webkit-scrollbar {

display: none; //防止大屏幕时出现滚动条

}

.sidebar header .site-name {

margin: 8px;

font-size: 2rem; //字体大小

}

// --------------------------------

// 菜单栏样式

// 下拉菜单改圆角样式

.menu {

padding-left: 0;

list-style: none;

flex-direction: column;

overflow-x: hidden;

overflow-y: scroll;

flex-grow: 1;

font-size: 1.6rem;

background-color: var(--card-background);

box-shadow: var(--shadow-l2); //改个阴影

display: none;

margin: 0; //改为0

border-radius: 10px; //加个圆角

padding: 30px 30px;

@include respond(xl) {

padding: 15px 0;

}

&,

.menu-bottom-section {

gap: 30px;

@include respond(xl) {

gap: 25px;

}

}

&.show {

display: flex;

}

@include respond(md) {

align-items: flex-end;

display: flex;

background-color: transparent;

padding: 0;

box-shadow: none;

margin: 0;

}

li {

position: relative;

vertical-align: middle;

padding: 0;

@include respond(md) {

width: 100%;

}

svg {

stroke-width: 1.33;

width: 20px;

height: 20px;

}

a {

height: 100%;

display: inline-flex;

align-items: center;

color: var(--body-text-color);

gap: var(--menu-icon-separation);

}

span {

flex: 1;

}

&.current {

a {

color: var(--accent-color);

font-weight: bold;

}

}

}

}

归档页面双栏样式

在 hugo-theme-stack/assets/scss/custom.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

25

26

27

28

/*----------------归档页面---------------*/

/*归档页面卡片缩放*/

.article-list--tile article {

transition: .6s ease;

}

.article-list--tile article:hover {

transform: scale(1.03, 1.03);

}

/* 归档页面两栏 */

@media (min-width: 1024px) {

.article-list--compact {

display: grid;

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;

border-radius: 16px;

}

}

}

链接页面三栏样式

在 hugo-theme-stack/assets/scss/custom.scss 加入

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

/*--------------*-链接页面-----------------*/

/*友情链接设置成三栏样式*/

@media (min-width: 1024px) {

.article-list--compact.links {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

background: none;

box-shadow: none;

gap: 1rem;

article {

background: var(--card-background);

border: none;

box-shadow: var(--shadow-l2);

margin-bottom: 8px;

border-radius: var(--card-border-radius);

&:nth-child(odd) {

margin-right: 8px;

}

}

}

}

首页显示文章

根据 【hugo.yaml 配置文件详解】，修改参数 mainSections

1

2

3

params:

mainSections:

- post # hugo/content/post/ 下的所有文章都能显示，不然首页不显示文章

单页文章数量设置

根据 【hugo.yaml 配置文件详解】，修改参数 pagerSize

1

2

pagination:

pagerSize: 8 # 改这个

文章设置

文章生成模板

修改 hugo/archetypes/default.md

1

2

3

4

5

6

7

title = '{{ replace .File.ContentBaseName "-" " " | title }}'

date = {{ .Date }}

draft = false

categories = ["Category"]

tags = ["Tag"]

description = ["描述"]

keywords = ["关键词"]

然后使用 hugo new content/post/xxxx.md 命令时，生成的 .md 文件，就是根据这个模块生成的。

文章目录层级显示问题

如果我们在文章时，标题前喜欢带个数字，例如：

1

2

3

1.标题

1.1 标题

1.1.1 标题

如果 hugo.yaml 中，ordered: true

1

2

3

4

tableOfContents: # 侧边栏目录（右边），层级

endLevel: 5

ordered: true

startLevel: 2

网页渲染时，会变成这样

1

2

3

1 1.标题

1.1 1.1 标题

1.1.1 1.1.1 标题

1）一种是文章里自带数字标题，则 ordered: false

2）另一种是文章里标题不带数字，则 ordered: true

文章图片不显示问题

参考：图片类型 - 文档 - Hugo 图片模块 | HugoMods

我用的 Typora，其他应用写的 md 大概也是这样

做法：

1）我在 hugo/content/post/2024/10/ 创建一个文章目录：HugoStack主题美化

2）然后到里边，hugo/content/post/2024/10/HugoStack主题美化/ 创建 index.md （名字一定要叫 index ）

3）.md 里对图片进行设置，这样直接把图片贴进去就行了。

4）如果不是 Typora，则需要在 index.md 的同级目录创建一个目录，例如 hugo/content/post/2024/10/HugoStack主题美化/img/ ，图片放到 img 目录下，然后引用：

1

![图片描述可忽略](img/1727420925875.png)

[!NOTE]

Hugo 好像是只渲染 index.md 的图片，如果 .md 文件名不是 index ，则里边的图片是不显示的。

文章代码块样式

代码块高亮

在 hugo.yaml 中，添加 highlight 参数，我文章里的代码块配置是这样子的：

1

2

3

4

5

6

7

8

9

10

markup:

highlight:

noClasses: false

codeFences: true

guessSyntax: true

# lineNoStart: 1

lineNos: true

# lineNumbersInTable: true

# tabWidth: 4

style: github-dark

代码块样式

在 hugo-theme-stack/assets/scss/custom.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

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

//为代码块顶部添加macos样式

.article-content {

.highlight:before {

content: "";

display: block;

background: #fc625d;

border-radius: 50%;

box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;

height: 12px;

width: 12px;

margin-bottom: 5px;

}

}

// 代码块基础样式修改

.highlight {

max-width: 102% !important;

background-color: var(--pre-background-color);

padding: var(--card-padding);

position: relative;

border-radius: 20px;

margin-left: -7px !important;

margin-right: -12px;

box-shadow: var(--shadow-l1) !important;

&:hover {

.copyCodeButton {

opacity: 1;

}

}

// keep Codeblocks LTR

[dir="rtl"] & {

direction: ltr;

}

pre {

margin: initial;

padding: 0;

margin: 0;

width: auto;

// background-color: #282c34 !important;

}

}

// light模式下的代码块样式调整

[data-scheme="light"] .article-content .highlight {

background-color: #fff9f3;

}

[data-scheme="light"] .chroma {

color: #ff6f00;

background-color: #fff9f3cc;

}

文章统计字数

参考：为 Hugo 博客添加字数统计 - Mogeko’s Blog

1）在 hugo-theme-stack/layouts/paritals/article/components/details.html 加入

1

2

3

4

5

6

7

8

9

10

11

12

13

14

...

{{ if .WordCount }}

{{ partial "helper/字数.svg" }}

{{ T "article.wordCount" .WordCount }}

{{ end }}

...

注意：{{ partial "helper/字数.svg" }} 这里是把 .svg 图片放到 hugo-theme-stack/layouts/paritals/helper/字数.svg ，这里看代码前边的显示阅读时间引用了 helper 里的内容，所以我这里也放到这里。不用图片的话可以删掉。

2）在 hugo-theme-stack/i18n/zh-cn.yaml 中的 article 下，加入

1

2

wordCount:

other: "字数: {{ .Count }}"

3）这个时候，预览会发现，字数的字体相当大，与日期、阅读时间不协调，所以得更改它们的样式，保持统一。在 hugo-theme-stack/assets/scss/custom.scss 加入

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// 阅读时间、字数样式

.article-time {

display: flex;

align-items: center;

font-size: 14px;

color: #666;

}

.article-time div {

margin-right: 10px;

}

.article-time--count {

font-size: 14px;

color: #666;

}

效果：

如果需要在字数前边加个小图标，则需要把小图标放到这里 hugo-theme-stack/layouts/partials/helper/xxx.svg 下，然后需要把 .svg 文件里的前缀给删掉，这个前缀删掉才可以：

1

效果：

致谢

美化过程中，参考了很多优秀的博主博客：

博客切换到STACK 主题 (skfwe.cn)

Hugo博客 | stack主题修改第一站 (munlelee.github.io)

Hugo-theme-Stack 魔改美化 | Naive Koala (xalaok.top)

基于 Hugo 的网站搭建日志 02 (lovir.cn)

不是从零开始的 Hugo 建站笔记 (fourxiajiao.github.io)

Hugo | Hugo-stack-theme 主题魔改版 (qjwhz.top)

（3）Stack主题的自定义 (linsnow.cn)

使用 Hugo 对博客的重建与 Stack 主题优化记录 (oxidane-uni.github.io)

HUGO+Stack 下的美化修改 (shimoko.com)

时隔半年，博客又有了那些新变化？！ (irithys.com)

END