Hugo建站日常更新

2023-02-15 约 1086 字预计阅读 3 分钟

添加不蒜子网站计数

不蒜子是一个公开提供的网页计数脚本，只要在页面中引入busuanzi.js，就可以使用其返回的统计量，如busuanzi_container_site_pv。

Hugo将.md文件渲染为html，因此找到其footer的html模板，引入代码，设置好统计量的显示样式，即可在每个页面显示访问统计量。

要修改的html路径为：\layouts\partials\footer.html，如目录下无此文件，建议可从themes对应目录下复制一份使用。

打开\layouts\partials\footer.html，在<div class="footer-container">层级下添加以下代码：

1<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
2</script>
3<span id="busuanzi_container_site_pv">
4	本站访问量：<span id="busuanzi_value_site_pv"></span>
5</span> | 
6<span id="busuanzi_container_site_uv">
7	本站访问人次：<span id="busuanzi_value_site_uv"></span> 
8</span>

背景添加动态线条效果

和引入不蒜子同理，在\layouts\partials\header.html添加以下代码：

1<script type="text/javascript"
2	color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
3</script>

color：线条颜色RGB
opacity：线条透明度，范围0~1
count：线条数量
zIndex：用于控制所在层的位置

更改列表页模板

\layouts\_default中的html文件是特定种类页面的渲染模板，例如单个页面的single.html，列表页的list.html。如需修改可将目前在用theme的模板html复制到根目录下的相同路径。

Taxonomies（默认为Tags和Categories）也是一种列表，在没有terms.html时使用list.html渲染。以下为根据list.html代码新建的terms.html。

对于该Taxonomy，以h1显示标题{{ .Title }}，括号内显示其下Terms的个数{{ len .Data.Terms }}；

按照Terms下Pages的数量降序排列Terms{{ range .Data.Terms.ByCount }}；

以h3显示Terms的名称{{ .Term }}，括号内显示其下Pages的个数{{ .Count }}；

以list显示每个Term下的Pages名称并带链接。

 1{{ define "main" }}
 2<main class="main list" role="main">
 3	<header class="main__header">
 4		<h1 class="main__title">{{ .Title }} ({{ len .Data.Terms }})</h1>
 5	</header>
 6	<div class="content main__content clearfix">
 7		{{ range .Data.Terms.ByCount }}
 8		{{ $termLink := printf "/%s/%s/" $.Site.BaseURL . | urlize }}
 9		<h3>{{ .Term }} ({{ .Count }})</h3>
10		<ul>
11			{{ range .Pages }}
12			<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
13			{{ end }}
14		</ul>
15		{{ end }}
16	</div>
17</main>

在语言选项菜单显示当前语言名称

目前使用的LoveIt主题对于语言选项菜单仅显示一个fontawesome的globe符号。这个主题的语言选项放置在header.html中，修改符号为language并增加显示当前语言名称{{ site.Language.LanguageName }}

注意修改的是{{- /* Desktop header */ -}}还是{{- /* Mobile header */ -}}

1<a href="javascript:void(0);" class="menu-item language" title="{{ T "selectLanguage" }}">
2	<i class="fa-solid fa-language" aria-hidden="true"></i>
3	<span>{{ site.Language.LanguageName }}</span>                     
4	<select class="language-select" id="language-select-desktop" onchange="location = this.value;">
5	...
6	</select>
7</a>