觀看人數

Busuanzi

#

非常簡單，不需要註冊，在layout/partials/comments.html 加入以下js code:

<div class="text-sm mt-2">
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_page_pv">
        本文總觀看次數：<span id="busuanzi_value_page_pv"></span> 次
    </span>
</div>

但他無法導出數據。
另外，到config/params.html的article下加上showComments

[article]
  ...
  showComments=true

GoatCounter

#

開源，可以像GA一樣看到數據，但不會被google追蹤。

• 去 GoatCounter 註冊一個免費帳號。
• params.toml裡面加入:

  [analytics.goatcounter]
  code = "你的帳號名"

• 在comments.html下加入下面codes，才能在頁面顯示
  JS in comments.html

  <div class="text-sm mt-4 mb-2 opacity-70">
    <i class="fas fa-eye"></i> <span id="stats-views">正在載入觀看次數...</span> 次瀏覽
  </div>
  
  <script>
    // 這裡的 '你的帳號名' 請替換成你在 GoatCounter 註冊的子網域名稱
    // 例如你的後台網址是 https://cychen.goatcounter.com，就填 "cychen"
    var code = "你的帳號名";
    
    // 取得當前頁面的路徑 (例如 /posts/concert-1/)
    var path = window.location.pathname;
  
    // 呼叫 GoatCounter API
    var r = new XMLHttpRequest();
    r.addEventListener('load', function() {
        try {
            var data = JSON.parse(this.responseText);
            // data.count 是累積觀看次數
            document.getElementById('stats-views').innerText = data.count || 0;
        } catch (e) {
            document.getElementById('stats-views').innerText = "-";
        }
    });
    // 使用 count.json 接口取得數據
    r.open('GET', 'https://' + code + '.goatcounter.com/counter/' + encodeURIComponent(path) + '.json');
    r.send();
  </script>

• GoatCounter的Settings，找到CORS或API相關設定，確定網頁有被列在允許的名單中，或者是允許所有來源

Google Analytics

#

適合後台查看，無法顯示在頁面。

• 需要註冊，但有google帳號就可以了
• 設定Account，我是用自己的名子
• 設定Property，可以取網站名
• 填入網頁url
• 查看代碼說明->手動安裝，你可以得到一段script，copy後貼到layout/partials/head.html (最下方)