新站用了hugo框架的stack主题,还是比较养眼的,但是居然没有文章点击数字的统计,好在自己加一个倒是很简单,相对来说研究加在什么位置是让我比较花时间地方
stack主题加阅读数的位置
stack主题的模板大致如上图,其位于themes\hugo-theme-stack\layouts
内,我是用github子模块的方式直接挂载的hugo-theme-stack
所以可以复制一份layouts
目录到根目录下再进行修改,其优先级会高于themes
目录内的模板文件
经过一些测试发现其文章开头部分的标题,标签,时间和阅读时长之类的信息都在layouts\partials\article\components\details.html
文件中,但是这个details.html
模板在主页文章列表也会加载:
如果将依靠链接来获取阅读数据的相关代码直接放进details.html
来会出问题,所以将其添加进紧随其后的content.html
模板中,作为实质上所有正文部分的开头会稍微好一点
方案一:busuanzi阅读计数统计
写在前面:发现了ios设备下的缺陷,遂改用第二种方案
busuanzi文档:
https://busuanzi.ibruce.info/
按照安装指南,只需要引入js脚本,以及再加入一行<span>
即可
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
引入<script>
layouts\_default\baseof.html
的<head>
内加入
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
在合适的位置添加<span>
文章计数
所以我们在content.html
里添加<span>
部分,原因如开头所说,放这里比较保险一点
<!--250227页面访问数统计-->
{{ if ne .Section "page" }}
<div class="article-details" style="padding-top: 15px;padding-bottom: 0px;">
<footer class="article-time">
<div>
{{ partial "helper/icon" "eye" }}
<span title="阅读次数" id="busuanzi_container_page_pv" style="display: inline;font-size: 1.4rem;">阅读次数: <span class="article-time--reading" id="busuanzi_value_page_pv"></span>次
</span>
</div>
</footer>
</div>
{{ end }}
<!--以下为content.html原内容未有修改-->
<section class="article-content">
<!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
{{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
{{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
</section>
外面套的<footer>
和<div>
都只是css样式需要{{ if ne .Section "page" }}
是我不希望他在文章页面以外的地方显示(主要是针对page
目录下的links页面).Section
释义可见:
https://gohugo.io/methods/page/section/
整站点击数
layouts\partials\footer\footer.html
在其内的<footer>
添加
<div class="article-time">
<span class="post-meta-item" id="busuanzi_container_site_uv" style="display: inline;">
{{ partial "helper/icon" "users" }}
<span class="site-uv" title="总访客量">
<span id="busuanzi_value_site_uv"></span>
</span>
</span>
<span>|</span>
<span class="post-meta-item" id="busuanzi_container_site_pv" style="display: inline;">
{{ partial "helper/icon" "eye" }}
<span class="site-pv" title="总访问量">
<span id="busuanzi_value_site_pv"></span>
</span>
</span>
</div>
即可在博客页面底部实现:
好了,本来用得好好的,忽然发现在ios设备上的文章页面内的阅读数字不太对,所有文章(包括刚发布的)都是1000多,在windows下的chrome和eagle就没有这样的问题
据说可能和ios浏览器的cross-site tracking
相关:
https://github.com/jdhao/jdhao.github.io/issues/46
好在,我已经实装了waline评论系统,而它也带一个文章访问记数的功能,用的还是自己数据库内的数据
而整站底部的总浏览量数据busuanzi又没问题,所以保留吧..
方案二:waline的浏览量统计
waline文档参考:
https://waline.js.org/guide/features/pageview.html
waline是一个适用于静态博客的评论系统,本博客 md.winotmk.com 实装的即是,而它也支持持浏览量统计。
用stack主题的话,只需要在主题设置文件hugo.yaml
内的params.comments.waline
部分设置开启pageview: true
即可
在合适的位置添加<span>
和第一种方案同样,依然是在layouts\partials\article\components\content.html
内添加
{{ if ne .Section "page" }}
<div class="article-details" style="padding-top: 15px;padding-bottom: 0px;">
<footer class="article-time">
<div>
{{ partial "helper/icon" "eye" }}
<span title="阅读次数" style="display: inline;font-size: 1.4rem;">阅读次数: <span class="waline-pageview-count" data-path="{{ .RelPermalink }}" /></span>
</div>
</footer>
</div>
{{ end }}
因为waline文档的解释如下:
阅读量: <span class="waline-pageview-count" data-path="<Your/Path/Name>" />
而对于hugo来说"<Your/Path/Name>"
即是当前文章的链接"{{ .RelPermalink }}"
至此每篇文章的点击数在ios端也正常了!