Adding Busuanzi Site Traffic Statistics to Hugo

This article describes how to add Busuanzi site visit and reading statistics to Hugo.

Steps

Hugo officially recommends copying theme-related files to the site root directory when making site adjustments, so that the configuration in the root directory is applied first through the override order. This article does the same.

Copy and modify the following files separately.

Copy extend_head.html

1

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

Add:

1
2
3
4
5

<!-- Busuanzi site traffic statistics -->
{{- 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 -}}

Copy extend_footer.html

1

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

Add:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- Busuanzi site traffic statistics: show total page views and visitor count at the bottom of the site -->
{{ 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;">
    Total page views: <span id="busuanzi_value_site_pv" style="font-weight: 500;">0</span>
  </span>
  <span id="busuanzi_container_site_uv" style="font-size: 0.85em;">
    Total visitors: <span id="busuanzi_value_site_uv" style="font-weight: 500;">0</span>
  </span>
</div>
{{- end -}}

Copy single.html

1

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

Add it at the following location:

 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 site traffic statistics -->
      {{ if .Site.Params.busuanzi.enable -}}
      <div class="meta-busuanzi">&nbsp·&nbsp
        <span id="busuanzi_container_page_pv">Reads: <span id="busuanzi_value_page_pv">0</span></span>
      </div>
      {{- end }}
    </div>
    {{- end }}

1
2
3
4
5
6

      <!-- Busuanzi site traffic statistics -->
      {{ if .Site.Params.busuanzi.enable -}}
      <div class="meta-busuanzi">&nbsp·&nbsp
        <span id="busuanzi_container_page_pv">Reads: <span id="busuanzi_value_page_pv">0</span></span>
      </div>
      {{- end }}

Enable it in config.yml

1
2
3

params:  
    busuanzi:
        enable: true # Enable Busuanzi site traffic statistics

References