介绍

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主题为例

准备工作

开始配置

  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/ 查看

使用 statcounter 统计 Hexo 博客访问量的更多相关文章

  1. hexo博客的优化与配置——加入统计代码

    今天看着csdn博客的訪客数,就想给hexo博客也加入统计訪客的插件,上次折腾了个pacman主题,中间自带的是goole的统计,easy被墙,所以就想换一个统计工具,看了好多人用的都是cnzz的站长 ...

  2. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  3. hexo博客yilia主题深度设置

    转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...

  4. Hexo博客主题优化

    Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...

  5. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  6. hexo博客相关

    https://www.cnblogs.com/sulishibaobei/p/6428241.html 利用hexo+github+nodejs搭建自我博客的一天 http://www.sulish ...

  7. hexo博客yili主题个性化自定义教程（1） ——借鉴中学习，初认yili主题

    文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...

  8. Termux搭建hexo博客并部署到GitHub

    Termux搭建hexo博客并部署到GitHub 安装 termux-change-repo apt update apt install git && nodejs &&am ...

  9. 基于 Github Actions 自动部署 Hexo 博客

    前言 前不久使用了 Hexo 搭建独立博客,我是部署在我的腾讯云轻量应用服务器上的,每次都需要 hexo deploy 然后打包.上传.解压和刷新 CDN,非常麻烦.我的服务器配置也不高 2C2G 无 ...

随机推荐

  1. Kylin配置Spark并构建Cube

    HDP版本:2.6.4.0 Kylin版本:2.5.1 机器:三台 CentOS-7,8G 内存 Kylin 的计算引擎除了 MapReduce ,还有速度更快的 Spark ,本文就以 Kylin ...

  2. centos7防火墙命令

    https://blog.csdn.net/achang21/article/details/52538049

  3. 导出wordpress数据库Fatal error: Cannot 'break' 2 levels

    今天我打算备份一下我在Linux下用宝塔面板搭建的phpmyadmin导出wordpress数据库.选择数据库后给我一个Fatal error: Cannot 'break' 2 levels in ...

  4. mapper操作数据的同时返回操作后的值

    <insert id="insertSelective" parameterType="com.test.entity.business" keyProp ...

  5. 使用Thymeleaf给前端绑定值

    1.pom依赖 <!-- thymeleaf --> <dependency> <groupId>org.springframework.boot</grou ...

  6. 阿里云服务器CentOS6.9安装Ant

    下载地址:http://mirrors.hust.edu.cn/apache/ant/binaries/ 1.下载 2.上传到服务器(非root用户下) 3.解压移动目录(root用户下) tar - ...

  7. Flask基础(06)-->视图常用逻辑

    Flask基础(06)-->视图常用逻辑 返回json 重定向:url_for 自定义状态码 返回json:在使用 Flask 写一个接口时候需要给客户端返回 JSON 数据,在 Flask 中 ...

  8. MongoDB 学习笔记之 检测存储引擎

    检测存储引擎: db.serverStatus().storageEngine db.serverStatus().wiredTiger (转)WiredTiger测试结果 单纯写的测试结果 结论:W ...

  9. Laravel 5 中文文档 CHM 版

    使用 Microsoft HTML Help Workshop 做了一个 Laravel 5.4 中文文档的 CHM 版本. 百度网盘下载地址:http://pan.baidu.com/s/1dFN2 ...

  10. centos7.x 将普通用户加入sudoers中，获取sudo执行权限

    centos7.x 将普通用户加入sudoers中,获取sudo执行权限 0 问题由来   你在提起兴致学习的时候,兴冲冲地往黑洞洞的文本窗口输入下一行: [pan@localhost ~]$ sud ...