【Hugo】美化&优化(stack主题)

分类: 365beat怎么下载 发布时间: 2026-07-30 05:56:09
作者: admin 阅读: 8102 | 点赞: 832
【Hugo】美化&优化(stack主题)

字体

字体文件放在assets/fonts下,然后在layouts/partials/footer/costom.html(没有就创建)中引入,格式如下

1

2

3

4

5

6

7

8

9

10

11

注意: 字体文件路径src要有后缀

自定义分类页面样式

我不喜欢原本默认的归档页面,想把归档和分类分成两个页面,具体操作写在了我的Hugo配置博客Hugo配置(stack主题)

后续想添加对应的页面样式,就在 layouts 添加对应的 html 文件,比如 layouts/page/category.html ,然后在 contents/page/category.md 中添加 layout: "category" ,这样就会使用 layouts/page/category.html 的样式了

评论功能

这里使用的giscus配置

先在 github page 上打开 discussion 功能

点击setting,向下滑找到discussion,勾选discussion

下载 giscus

giscus app

选择仓库地址

配置 hugo

进入giscus官网 giscus

按照步骤配置,最后复制代码

五个重要参数:

data-repo

data-repo-id

data-category

data-category-id

data-mapping

添加到配置文件中:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

comments:

enabled: true

provider: giscus

giscus:

repo: serenNan/serenNan.github.io

repoID:

category: Announcements

categoryID:

mapping: pathname

lightTheme: light

darkTheme: dark

reactionsEnabled: 1

emitMetadata: 0

inputPosition: bottom

lang: zh-CN

博客背景

我这里用的是particles动态粒子背景

配置:

进入网站自定义配置:particles

唯一需要注意的是有个选项改成window

配置好后下载文件

将particles.min.js 和 particlesjs-config.json放在assets/background文件夹下

在layouts/partials/footer/custom.html中添加以下代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19