Hugo主题配置记录
1.引入busuanzi插件进行字数、访问量统计
-
\layouts\partials\footer
footer文件中
增加以下代码
<!-- 卜算子统计信息 --> <section class="count_info"> <!-- 1运行时间 --> <div> {{ T "footer.runtime1" }} <span id="ds" class="running-days"></span> {{ T "footer.runtime2" }} <span id="hs" class="running-days"></span> {{ T "footer.runtime3" }} <span id="ms" class="running-days"></span> {{ T "footer.runtime4" }} </div> <!-- 2文章个数和字数 --> <div> {{ $scratch := newScratch }} {{ range (where .Site.Pages "Kind" "page") }} {{ $scratch.Add "total" .WordCount }} {{ end }} <!-- 转换为整数 --> {{ $total := $scratch.Get "total" | int }} <!-- 转换为浮点数 --> {{ $totalFloat := $total | float }} {{ T "footer.count1" }} {{ len (where .Site.RegularPages "Section" "post") }} {{ T "footer.count2" }} {{ div $totalFloat 1000.0 | lang.FormatNumber 2 }} k {{ T "footer.count3" }} </div> <!-- 3本站访问量 --> <div> <span id="busuanzi_container_site_pv">{{ T "footer.pv1" }}<span id="busuanzi_value_site_pv"></span>{{ T "footer.pv2" }}</span> </div> </section> <!-- 卜算子js脚本 --> <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
(1)运行时间
<!-- 1运行时间 -->
<div>
{{ T "footer.runtime1" }}
<span id="ds" class="running-days"></span>
{{ T "footer.runtime2" }}
<span id="hs" class="running-days"></span>
{{ T "footer.runtime3" }}
<span id="ms" class="running-days"></span>
{{ T "footer.runtime4" }}
</div>
(2)文章个数和字数
-
使用 Hugo 的Scratch 存储器计算总字数。range (where .Site.Pages “Kind” “page”)遍历所有页面类型为
page
的页面。 -
{{ $scratch.Add “total” .WordCount }} 将每个页面的字数累加到total。转化为整数和浮点数,
-
{{ len (where .Site.RegularPages “Section” “post”) }}计算文章数量。
-
{{ div $totalFloat 1000.0 | lang.FormatNumber 2 }} k将总字数除以 1000 格式化为两位小数。
-
Hugo 的T函数插入翻译文本
(3)本站访问量
使用js脚本
复制js代码即可。
2.删除网站语言切换
config.yaml中删除默认语言设置
主题最新的配置文件可以在 exampleSite/config.yaml
配置主题 | Hugo 主题 Stack (stack-docs.netlify.app)
<--删除自己的配置即可-->
3.更改社交图标样式、间距
-
\assets\scss\custom.scss
中修改即可
.menu-social{ gap: 15px; margin-top: 25px; }
4.增加返回顶部按钮、样式替换
-
\layouts\partials\widget
增加如下代码
{{ $topImg := resources.Get ("icons/back-to-top.svg") }}
<a id="back-to-top" href="#">
{{$topImg.Content | safeHTML}}
</a>
resources.Get获取svg文件到$topImg
a标签属性链接href="#"实现返回顶部,插入svg内容进行渲染。
- \assets\scss\custom.scss
$hover: 0.2s ease-in-out;
#back-to-top {
position: fixed;
margin-left: 150px;
bottom: 60px;
display: none;
border: 0;
transition: transform $hover;
&:hover {
transform: translateY(-10px);
}
}
ease-in-out过渡,#back-to-top 定义了 ID 为 back-to-top
的元素的样式规则。
- \assets\icons
iconfont-阿里巴巴矢量图标库
下载svg格式的图标,然后记住颜色代码,编辑搜索将颜色代码替换为currentColor就能实现颜色随暗色模式切换变化。