使用 statcounter 统计 Hexo 博客访问量

介绍

statcounter是一个提供网站访问统计服务的网站：

StatCounter is a simple but powerful real-time web analytics service that helps you track, analyse and understand your visitors so you can make good decisions ...

本文将介绍如何在hexo博客中配置statcounter服务，以material主题为例

准备工作

• 注册statcounter账号：https://statcounter.com
• 一个已经基本配置好的Hexo+Material博客

开始配置

1. 在 https://statcounter.com 中新建Project，项目名称建议与网站域名一致
2. 按照指示填写Recipients，Project URL
3. 选择自定义Visible Counter，然后选择Text Counter，Text Color和Background Color要根据你所放的位置以及你的主题进行选择
4. 按指示进入下一步：Insert the Code on Your Website，复制所给的HTML代码
5. 打开hexo主题文件夹中的“layout/_partial/”，可以看到这里有许多ejs文件，这些文件是hexo用来渲染HTML页面的模板，打开其中的footer.ejs
6. 把我们之前复制的代码粘贴到合适的地方，并进行修改，以使统计数据不那么突兀。如果你使用的是Material主题，可以参考我的配置：

   <div>
       <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
       <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
       <div class="footer-develop-div">Counter = <a href="https://statcounter.com/p12017931/summary/" target="_blank" class="footer-develop-a">
           <script type="text/javascript">
           var sc_project=你自己的信息; 
           var sc_invisible=0; 
           var sc_security="你自己的信息"; 
           var sc_text=5;
           var scJsHost = "https://";
           document.write("<sc"+"ript type='text/javascript' src='" +
           scJsHost+
           "statcounter.com/counter/counter.js'></"+"script>");
           </script>
           </a>           
       </div>
   </div>
   

7. 最终效果可于：https://songwonderful.github.io/ 查看