Hugo adds Busuanzi site visit and reading statistics.

title: "Adding Busuanzi Site Visits and Read Count Statistics to Hugo"
date: 2022-07-02T15:06:51+08:00
tags: ["hugo", "tutorial"]
author: "KANIKIG"
draft: false
cover:
image: "https://pic.kanikig.xyz/images/2022/07/02/iShot2022-07-02-15.56.35.png"

Applicable to any Hugo theme, only need to make changes in 4 places, using the papermod theme as an example.

head#

Find the head.html file in the theme folder, for example, the path for papermod is themes/PaperModX/layouts/partials/head.html.

Add the following code:

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

It can be added after the google-site-verification section and before the Styles section for easy searching.

iShot2022-07-02 15.43.42

footer#

Display the total number of visits and visitors at the bottom of the site. Generally, it is in the same directory as head. Add the following code, making sure to add it within the <footer> code block.

<!-- busuanzi -->
{{ if .Site.Params.busuanzi.enable -}}
<div class="busuanzi-footer">
  <span id="busuanzi_container_site_pv">
    Total site visits: <span id="busuanzi_value_site_pv"></span>
  </span>
  <span id="busuanzi_container_site_uv">
    Total site visitors: <span id="busuanzi_value_site_uv"></span>
  </span>
</div>

iShot2022-07-02 15.43.22

single#

Used to display the read count for each article. Some themes have it in the same directory as the previous two, while others don't. Search for it yourself. For papermod, it is located at themes/PaperModX/layouts/_default/single.html. Make sure to add it within the <header> code block.

<!-- busuanzi -->
{{ if .Site.Params.busuanzi.enable -}}
  <span id="busuanzi_container_page_pv">Read count: <span id="busuanzi_value_page_pv"></span></span>
{{- end }}

Here, you need to make changes based on the specific theme. For papermod, it is added within the post-meta section. To match its color and format, it is wrapped in a <div> and a separator is added.

<!-- busuanzi -->
{{ if .Site.Params.busuanzi.enable -}}
<div  class="meta-item">&nbsp·&nbsp
  <span id="busuanzi_container_page_pv">Read count: <span id="busuanzi_value_page_pv"></span></span>
</div>
{{- end }}

iShot2022-07-02 15.44.16

config#

Go back to the root directory and edit config.yml. Add the following two lines within the params section:

params:  
    busuanzi:
        enable: true

If you don't want to display the statistics, change it to false.

If you are using a toml configuration file, make the necessary changes according to the format. The properties are the same.

Result#

Site-wide:

iShot2022-07-02 15.53.57

Single page:

iShot2022-07-02 15.54.52

The result is as shown above.