hugo stack 主题美化

发布日期:2026-07-30 05:56:12 分类:365500 浏览:3097

修改字体

这里使用了Shimoko的鸿蒙字体CDN

在博客根目录/layouts/partials/head/custom.html文件内写入如下内容

没有该文件夹的话直接将主题目录下的layouts文件夹复制过来即可(为了方便后期维护,不建议直接在主题目录下修改)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

效果对比

2025 年 3 月 6 日更新

由于 CDN 费用等问题,shimoko 大佬对相关内容做了防盗链,在此就对大佬造成的困扰道歉!私密马赛!

博客字体修改为 LxgwWenKai,感谢lxgw开源大佬!!

cdn:https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css

双排友链

在博客根目录/assets/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;

}

}

}

}

效果对比

添加站点统计信息与i18n

期望展示格式:

中文:

本博客已稳定运行 x 天 y 小时 z 分钟

共发表 x 篇文章 · 总计 y k 字

本站总访问量x次

英文:

This blog has been running stably for x day, y hours and z minutes

Published x articles in total · totaling y k words

The total number of visits to this site is x times

其中访问量使用不蒜子实现

在根目录/layouts/partials/footer/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

34

35

36

37

{{ T "footer.runtime1" }}

{{ T "footer.runtime2" }}

{{ T "footer.runtime3" }}

{{ T "footer.runtime4" }}

{{$scratch := newScratch}}

{{ range (where .Site.Pages "Kind" "page" )}}

{{$scratch.Add "total" .WordCount}}

{{ end }}

{{ T "footer.count1" }} {{ len (where .Site.RegularPages "Section" "post") }} {{ T "footer.count2" }} {{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }} k {{ T "footer.count3" }}

{{ T "footer.pv1" }}{{ T "footer.pv2" }}

在主题目录/i18n下找到对应语言的文件,在属性footer下添加相应字段,结果如下

zh-cn.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

footer:

# 本博客已稳定运行1天2小时3分钟

runtime1:

other: 本博客已稳定运行

runtime2:

other: 天

runtime3:

other: 小时

runtime4:

other: 分钟

# 共发表x篇文章,总计y k字

count1:

other: 共发表

count2:

other: 篇文章 · 总计

count3:

other: 字

# 本站总访问量X次

pv1:

other: 本站总访问量

pv2:

other: 次

en.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

footer:

# This blog has been running stably for 1 day, 2 hours and 3 minutes

runtime1:

other: This blog has been running stably for

runtime2:

other: day,

runtime3:

other: hours and

runtime4:

other: minutes

# Published x articles in total, totaling y words

count1:

other: Published

count2:

other: articles in total · totaling

count3:

other: words

# The total number of visits to this site is X times

pv1:

other: The total number of visits to this site is

pv2:

other: times

其他语言同理

效果展示

添加访客地图

使用clustrmaps实现

在根目录/layouts/partials/sidebar/right.html内添加script即可,添加后完整代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

{{- $scope := default "homepage" .Scope -}}

{{- $context := .Context -}}

{{- with (index .Context.Site.Params.widgets $scope) -}}

{{ end }}

效果展示