字体
字体文件放在assets/fonts下，然后在layouts/partials/footer/costom.html(没有就创建)中引入,格式如下
1
2
3
4
5
6
7
8
9
10
11
|
<style>
@font-face {
font-family: 'MapleMono2';
src: url('{{ (resources.Get "font/MapleMono2.ttf").Permalink }}') format('truetype');
}
:root {
--base-font-family: 'MapleMono2';
--code-font-family: 'MapleMono2';
}
</style>
|
自定义分类页面样式
我不喜欢原本默认的归档页面，想把归档和分类分成两个页面，具体操作写在了我的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
|
<div id="particles-js"></div>
<script src="{{ (resources.Get "background/particles.min.js").RelPermalink }}"></script>
<script>
particlesJS.load('particles-js', '{{ (resources.Get "background/particlesjs-config.json").RelPermalink }}', function() {
console.log('particles.js loaded - callback');
});
</script>
<style>
#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
|
