前言

Hugo添加不蒜子Busuanzi页面浏览次数与阅读数据统计

一、Busuanzi是什么？

Busuanzi是一个用于统计网站访问量的工具。它通常嵌入到网页中，可以追踪页面的浏览次数，方可数量积极其他一些基本的访问数据。这个工具可以帮助网站管理员了解他们的网站受欢迎程度和流量情况。

二、使用步骤

在head.html，footer.html，single.html，config.yml进行修改

head.html

我的papermod的路径为themes/Hugo-PaperMod/layouts/partials/head.html

添加以下代码

<!-- 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 -}}

1.png

footer.html

用于在站点底部显示总访问量与访客数

我的PaperMod路径为themes/Hugo-PaperMod/layouts/partials/footer.html

添加以下代码，注意添加在<footer>代码块里

<!-- busuanzi -->
{{ if .Site.Params.busuanzi.enable -}}
<div class="busuanzi-footer">
  <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>
</div>
{{- end -}}

2.png

single.html

用于显示每篇文章阅读量

我的papermod路径为themes/Hugo-PaperMod/layouts/_default/single.html

添加以下代码，加在<header>代码块内

<!-- busuanzi -->
{{ if .Site.Params.busuanzi.enable -}}
<div  class="meta-item">&nbsp·&nbsp
  <span id="busuanzi_container_page_pv">本文阅读量<span id="busuanzi_value_page_pv"></span>次</span>
</div>
{{- end }}

3.png

config.yml

回到根目录的config.yml，在params里加上busuanzi:功能

显示统计即为true

params:  
    busuanzi:
        enable: true

不想显示统计即为false

params:  
    busuanzi:
        enable: false

总结

本文简单介绍了Hugo添加不蒜子Busuanzi站点访问量与阅读量统计的操作步骤和方法。