添加访问量模块
效果如上图所示，需要修改下面几个文件。这些文件（除了hugo.yaml之外）都是在themes\your theme folder下面找到的。但是我为了避免之后更新主题方便，我都在外面建了相应的文件夹/文件。据我所知，hugo的文件是如果主文件夹下有同名的文件，会优先使用主文件夹下的文件，如果没有，才会使用themes文件夹里面的文件。
1
2
3
4
|
# hugo.yaml 博客的配置文件
params:
busuanzi:
enable: ture
|
layouts/partials/footer/footer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!-- 在这的后面</section> 与 </footer> 之间-->
<!-- busuanzi -->
{{ if .Site.Params.busuanzi.enable -}}
<section class="busuanzi">
<span id="busuanzi_container_site_pv">
本站总访问量 <span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_site_uv">
本站访客数 <span id="busuanzi_value_site_uv"></span>人次
</span>
</section>
{{- end -}}
|
layout/partials/head/custom.html
1
2
3
4
5
|
<!-- busuanzi -->
{{- if .Site.Params.busuanzi.enable -}}
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<meta name="referrer" content="no-referrer-when-downgrade">
{{- end -}}
|
assets/scss/partials/footer.scss修改文字格式
1
2
3
4
5
6
7
8
|
.busuanzi {
color: var(--body-text-color);
font-weight: normal;
font-size: 1.2rem;
#busuanzi_container_site_uv {
padding-left: 10px;
}
}
|
添加评论系统
评论系统使用的是giscus, 优点：利用github的discussion功能，不需要额外的搞其他东西；缺点：评论时需要登陆github。
我所使用的stack主题支持许多系统，只需要简单的配置一下hugo.yaml即可。
第一步 建一个公开仓库
名字无所谓，需要把discussion功能打开，如下图所示。
第二步 安装giscus
使用链接giscus install
点击绿色按钮install，选用第二项Only select repositories，
选择你刚刚创建的仓库。
第三步 获取配置信息
使用链接giscus zh-CN,点进去，按照配置里面的选项选择
仓库填写刚才创建并安装giscus的仓库，之后全选第一个，会得到一个<script>
第四步 修改yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
comments:
enabled: true
provider: giscus
giscus:
repo: "对应data-同名文件"
repoID:
category:
categoryID:
mapping:
lightTheme: "light"
darkTheme: "dark"
reactionsEnabled: 1
emitMetadata: 0
|
修改中间文章栏的宽度
因为平时使用的都是2k屏幕，但是默认的文章宽度特别窄，我看着老难受的，所以查了很久怎么改这部分。对scss了解不深，主要是中间的@include respond(xx)代码块比较重要。
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
这上面的参数在themes/your theme floder/assets/scss/breakpoints.scss里面,调整他们的比例主要是里面的三个参数：
- max-width: 最大宽度（左边栏+中间+右边栏）这是有个范围的
比方说在respond(lg)里，就是从lg-xl的宽度范围内的比例。
- left-sidebar-max-width/right-sidebar-max-width: 站最大宽度的百分比。
下面是我调整的参数。
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
|
.container {
margin-left: auto;
margin-right: auto;
&.extended {
@include respond(lg) {
max-width: 1280px;
--left-sidebar-max-width: 15%;
--right-sidebar-max-width: 20%;
}
@include respond(xl) {
max-width: 1536px;
--left-sidebar-max-width: 15%;
--right-sidebar-max-width: 20%;
}
@include respond(2xl) {
max-width: 1980px;
--left-sidebar-max-width: 10%;
--right-sidebar-max-width: 15%;
}
}
}
|
至此，评论系统+访问量统计+页面调整，大功告成~~
不过我发现了新的问题，就是代码行号会出现这种情况：
后续在改进吧。
