通过 clustermaps 统计 Hexo 网站的访问地区和 IP

Posted on Edited on In Views: Word count in article: 571 Reading time ≈ 2 mins.

[toc]

前言

在 Website FAQ，实现了使用 "卜算子" 来统计网站访问人数，但是 "卜算子" 仅可以提供访问人数的统计，进一步的信息却无法提供。那么，如果想知道过往访客来自哪些国家和地区，显示网站访问实时动态的信息，应该怎么做呢？

多平台维护不易，本博客实时更新于 个人网站，请移步阅读最新内容。

clustermaps 是什么

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

  • 选择自己喜欢的插件格式，现在 Hexo 的 Next 两种主题都是支持的，但是自己比较喜欢 Map widget 的主题。

  • 点击选择后，拷贝网站出现的脚本 javascript 代码，粘贴到 Next 主题下某个位置。博主测试过如下两个位置，挑选一个配置即可以。推荐位置二，自定义程度高。

    • 位置一：将代码插入到 themes\_partials.swig 的最后。 

      1
      2
      3
      4
      5
      6
      7
        {% endif %}
      </nav>

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

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

    • 位置二：将代码插入到 \_macro.swig 文件的

      图层。 

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <aside class="sidebar">
        <div class="sidebar-inner">

          {%- set display_toc = page.toc.enable and display_toc %}

          <!-- Begin Insert clustrmaps.com -->
          <script type="text/javascript" id="clustrmaps" src="//clustrmaps.com/map_v2.js?d=iBmc9XXXXXX=a"></script>
          <!-- End Insert clustrmaps.com -->

          {%- if display_toc %}
            {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}

  • 重新部署网站，就可以在首页看到实时访客来源图，如我的网站首页所示。另外，点击地图，可以看到更详细的信息，包括访客的地图、浏览设备以及 IP。