如何統計 Hexo 網站的訪問地區和IP

前言

在 Website FAQ，實現了使用"卜算子"來統計網站訪問人數，但是"卜算子"僅可以提供訪問人數的統計，進一步的信息卻無法提供。那么，如果想知道過往訪客來自哪些國家和地區，顯示網站訪問實時動態的信息，應該怎么做呢？

FYI 本博客實時更新於 個人網站 - 統計Hexo網站的訪問地區和IP，請移步閱讀最新內容。

clustrmaps.com 是美國的一家數據網站，能夠匯總公共記錄來分析美國城市的社會人口和商業環境。

Add the ClustrMaps hit tracker to your site or blog and see a real-time map of your visitors from around the world! Proudly show and grow your hidden community of interest.

網址提供了生成訪問者地址分布圖的代碼，可以嵌入到網站或博客中，來顯示來自世界各地訪問者的實時地圖，有助於發展您隱藏的興趣社區。最重要的是，這個功能是免費的，能夠滿足個人網站的需求，如下圖所示。

配置 clustrmaps

• 網站注冊后，訪問 Enter your website address 添加自己的網站地址，選擇免費的服務。

• 選擇自己喜歡的插件格式，現在 Hexo 的 Next 兩種主題都是支持的，但是自己比較喜歡 Map widget 的主題。

• 點擊選擇后，拷貝網站出現的腳本 javascript代碼，粘貼到Next主題下某個位置。博主測試過如下兩個位置，挑選一個配置即可以。推薦位置二，自定義程度高。
  • 位置一：將代碼插入到 themes\next\layout\_partials\header.swig 的最后。

  {% endif %}
</nav>

<!-- Insert clustrmaps.com -->
<script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/map_v2.js?XXX'></script>

{% include '../_custom/header.swig' %}

• 位置二：將代碼插入到 \themes\next\layout\_macro\sidebar.swig 文件的
  圖層。

  <aside id="sidebar" class="sidebar">
    {% if theme.sidebar.onmobile %}
      <div id="sidebar-dimmer"></div>
    {% endif %}
    <div class="sidebar-inner">

      {% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}

<!-- Insert clustrmaps.com -->
<script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/map_v2.js?

cl=ffffff&w=a&t=n&d=4sW93oXXX0e8'></script>

      {% if display_toc and toc(page.content).length > 1 %}

• 重新部署網站，就可以在首頁看到實時訪客來源圖，如我的網站首頁所示。另外，點擊地圖，可以看到更詳細的信息，包括訪客的地圖、瀏覽設備以及IP。