title: 使用statcounter统计Hexo博客访问量
date: 2019-05-30 20:55:29
tags: 配置
---

介绍

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主题，可以参考我的配置：
   html <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/ 查看