Hugo添加站点流量统计

本文介绍Hugo如何添加不蒜子Busuanzi站点访问量与阅读量统计。

步骤

Hugo官方对于网站调整，推荐将主题相关文件复制到网站根目录，通过覆盖顺序优先应用根目录下的效果配置，本文亦如此。

分别复制并修改如下文件。

复制extend_head.html

1

cp themes/PaperMod/layouts/partials/extend_head.html layouts/partials/

添加：

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

复制extend_footer.html

1

cp themes/PaperMod/layouts/partials/extend_footer.html layouts/partials/

添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 不蒜子Busuanzi流量统计，站点底部显示总访问量与访客数 -->
{{ if .Site.Params.busuanzi.enable -}}
<div class="busuanzi-footer" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; padding: 4px 0; color: #999;">
  <span id="busuanzi_container_site_pv" style="margin-right: 8px; font-size: 0.85em;">
    本站总访问量<span id="busuanzi_value_site_pv" style="font-weight: 500;">0</span>次
  </span>
  <span id="busuanzi_container_site_uv" style="font-size: 0.85em;">
    本站访客数<span id="busuanzi_value_site_uv" style="font-weight: 500;">0</span>人次
  </span>
</div>
{{- end -}}

复制single.html

1

cp themes/PaperMod/layouts/_default/single.html layouts/_default/

在如下位置添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    {{- if not (.Param "hideMeta") }}
    <div class="post-meta">
      {{- partial "post_meta.html" . -}}
      {{- partial "translation_list.html" . -}}
      {{- partial "edit_post.html" . -}}
      {{- partial "post_canonical.html" . -}}
      <!-- 不蒜子Busuanzi流量统计 -->
      {{ if .Site.Params.busuanzi.enable -}}
      <div class="meta-busuanzi">&nbsp·&nbsp
        <span id="busuanzi_container_page_pv">本文阅读量<span id="busuanzi_value_page_pv">0</span>次</span>
      </div>
      {{- end }}
    </div>
    {{- end }}

1
2
3
4
5
6

      <!-- 不蒜子Busuanzi流量统计 -->
      {{ if .Site.Params.busuanzi.enable -}}
      <div class="meta-busuanzi">&nbsp·&nbsp
        <span id="busuanzi_container_page_pv">本文阅读量<span id="busuanzi_value_page_pv">0</span>次</span>
      </div>
      {{- end }}

在config.yml启用

1
2
3

params:  
    busuanzi:
        enable: true # 启用不蒜子Busuanzi流量统计

引用