最近發現有些文章被一直刷閱讀量，使閱讀量異常的高。決定在文章頁面上新增文章訪客數的數據，文章訪客數記數原理與網站訪客數記數原理相同，加入用戶 IP 及瀏覽器 User-Agent 判斷避免重複，相對來說較有參考性。

方法尋找

大部分 Hexo 主題都是採用 Busuanzi 來進行記數，但是預設只提供網站瀏覽量、網站訪客數、文章瀏覽量三個數據，搜尋了一下也都沒有文章教學如何新增，於是自己嘗試找方法新增。

Github 上有許多第三方 Busuanzi 的專案，想避免架設伺服器的麻煩，直接找了一個已經部屬好供人直接使用的專案進行主題修改

Hexo Butterfly 修改

目前我使用的是 hexo-cli: 4.3.0 + Butterfly 3.6.2，主題預設只提供上述三個選項，因此想要文章訪客數的話需要自行新增
我使用的 hexo 及 Butterfly 的版本都較舊，但想法都差不多，依照自己的版本稍微修正一下應該就可以套用上去

  1. 新增 site_uv 設定: Butterfly 下的 _config.yml 文件
    方便後續開啟關閉，先於文件中新增 site_uv(文章訪客數) 的設定，在文件中找到這段程式碼

    1
    2
    3
    4
    5
    6
    # busuanzi count for PV / UV in site
    # 訪問人數
    busuanzi:
    site_pv: true
    page_uv: true
    page_pv: true

    新增一行 site_uv 如下

    1
    2
    3
    4
    5
    6
    7
    # busuanzi count for PV / UV in site
    # 訪問人數
    busuanzi:
    site_uv: true
    site_pv: true
    page_uv: true
    page_pv: true

  2. 引入專案作者提供的 javascript: Butterfly 下的 _config.yml 文件
    於文件中找到 Inject 的部分如下

    1
    2
    3
    4
    5
    6
    7
    8
    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
    head:
        # - <link rel="stylesheet" href="/xxx.css">
    bottom:
        # - <script src="xxxx"></script>

    如果你的跟我的看起來不同也沒關係，只要在 head 下面新增一行引入專案作者提供的 JS 即可，如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
    head:
        - <script defer src="https://busuanzi.9420.ltd/js"></script>
        # - <link rel="stylesheet" href="/xxx.css">
    bottom:
        # - <script src="xxxx"></script>

  3. 修改文章模板: butterfly/layout/includes/header/post-info.pug
    找到原本顯示文章瀏覽數的程式碼如下

    1
    2
    3
    4
    5
    6
    if theme.busuanzi.page_pv
        span.post-meta-separator |
        span.post-meta-pv-cv
            i.far.fa-eye.fa-fw.post-meta-icon
            span.post-meta-label=_p('post.page_pv') + ':'
            span#busuanzi_value_page_pv

    在其上面新增預顯示文章訪客數的程式碼

    1
    2
    3
    4
    5
    6
    if theme.busuanzi.page_uv
        span.post-meta-separator |
        span.post-meta-pv-cv
          i.far.fa-eye.fa-fw.post-meta-icon
          span.post-meta-label=_p('post.page_uv') + ':'
          span#busuanzi_page_uv

  4. 修改語言文件使其顯示文章訪客數的文字: butterfly/languages/zh-TW.yml
    找到 post 那段程式碼如下

    1
    2
    3
    4
    5
    6
    7
    8
    post:
        created: 發表於
        updated: 更新於
        wordcount: 字數總計
        min2read: 閱讀時長
        min2read_unit: 分鐘
        page_pv: 閱讀量
        ...

    新增 page_uv 及你想顯示的文字

    1
    2
    3
    4
    5
    6
    7
    8
    post:
        created: 發表於
        updated: 更新於
        wordcount: 字數總計
        min2read: 閱讀時長
        min2read_unit: 分鐘
        page_uv: 訪客數
        page_pv: 閱讀量

修改網站記數

完成以上步驟後，文章中應該就會出現訪客數了，但由於我的網站運行已經有一段時間，現在才加入文章訪客數使數據看起來非常不一致，心一橫決定全部重新記數，只需把原本記數引用的 JS function 改為新引入的 JS function 即可

  1. 修改文章瀏覽數引用的 JS function: butterfly/layout/includes/header/post-info.pug
    找到原本顯示文章瀏覽數的程式碼如下

    1
    2
    3
    4
    5
    6
    if theme.busuanzi.page_pv
        span.post-meta-separator |
        span.post-meta-pv-cv
            i.far.fa-eye.fa-fw.post-meta-icon
            span.post-meta-label=_p('post.page_pv') + ':'
            span#busuanzi_value_page_pv

    修改為

    1
    2
    3
    4
    5
    6
    7
    if theme.busuanzi.page_pv
        span.post-meta-separator |
        span.post-meta-pv-cv
            i.far.fa-eye.fa-fw.post-meta-icon
            span.post-meta-label=_p('post.page_pv') + ':'
            span#busuanzi_page_pv
            //- span#busuanzi_value_page_pv

  2. 修改網站訪客數與網站訪問量引用的 JS function: butterfly/layout/includes/widget/card_webinfo.pug
    找到下列程式碼

    1
    2
    3
    4
    5
    6
    7
    8
    if theme.busuanzi.site_uv 
        .webinfo-item
          .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
          .item-count#busuanzi_value_site_uv
      if theme.busuanzi.site_pv
        .webinfo-item
          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
          .item-count#busuanzi_value_site_pv

    修改為新引入的 JS function 如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if theme.busuanzi.site_uv 
        .webinfo-item
          .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
          .item-count#busuanzi_site_uv
          //- .item-count#busuanzi_value_site_uv
      if theme.busuanzi.site_pv
        .webinfo-item
          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
          .item-count#busuanzi_site_pv
          //- .item-count#busuanzi_value_site_pv

  3. 修改引入的 JS: Butterfly 下的 _config.yml 文件
    若你有仔細看應該可以發現目前網站會引入兩個 Busuanzi 的 JS，因此如果你跟我一樣想全部重新統計的話可以將原本的 JS 給拿掉加速網站載入
    先將原本上面於 Inject Head 中新增引入 JS 的程式碼移除
    並於文件中找到下列程式碼

    1
    2
    # count
    # busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

    更改為

    1
    2
    3
    # count
    # bsuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
    busanzi: //busuanzi.9420.ltd/js

完成到這步就大功告成了！