文章

增加阅读浏览量功能

发表于 更新于
作者 echoCourage 4 分钟阅读 阅读次数:

常见浏览量接口

1. LeanCloud

LeanCloud官网

1
2
3
4

 优点:
	 很多人推荐
缺点:
	注册的时候告诉要实名认证，排除

**注意: 有国际版，不需要实名认证，但是功能受限: **

LeanCloud国际版

jekll 配置(未测试):

jekyll使用LeanCloud记录文章的访问次数

2. 不蒜子

不蒜子官网

1
2
3
4
5
6
7
8

优点: 
	简单易操作
	无需注册
	
缺点: 
	初始化无法自己操作
	数据修改无法自己操作
	数据不在本地

网站如何引入:

配置手册

3. Google Analytics

Google Analysis官网

1
2
3
4
5
6
7
8
9

优点: 
	支持个人数据重置清理
	功能强大: 活跃用户、新用户、国家(地域)
	支持自定义动作捕捉
	操作简单，支持 jekyll等各类
	
缺点:
	需要外网访问，插入网站总会拖慢网站访问进度

添加数据收集入口

Image

jekyll+不蒜子

当前主题以: jekyll-theme-chirpy 为例

1. 安装脚本(必需)

1

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

将脚本放到 网站header 部分

文件: _layouts/default.html

1
2
3
4
5
6
7
8
9
10
11

...
...

   {% include head.html %} 
   
   <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
   
   <body>...</body>

...
...

2. 显示总访问量

算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量

1
2
3

<span id="busuanzi_container_site_pv">
   本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数

1
2
3

<span id="busuanzi_container_site_uv">
   本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>


使用案例:

目标: 在网站最下方显示总访问量，将脚本放到 网站底部(页脚) 部分

文件: _includes/footer.html

根据需要将下面代码加入footer.html 适合位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

...
...

<p>
  <!-- pv的方式，单个用户连续点击n篇文章，记录n次访问量-->
  <span id="busuanzi_container_site_pv" class="post-meta-item" style="display: inline;">
      <span class="post-meta-item-icon">                                                                               
          <i class="fa fa-eye"></i>
      </span>
      <span class="post-meta-item-text" title="网站总访问量">
          <span id="busuanzi_value_site_pv"></span>
      </span> 
  </span>
</p>
...
...

效果如图所示:

Image

3. 显示单页面访问量

算法：pv的方式，单个用户点击1篇文章，本篇文章记录1次阅读量

1
2
3

<span id="busuanzi_container_page_pv">
   本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>


使用案例:

目标: 将脚本放到 网站博客页面 部分

文件: _layouts/post.html

根据需要将下面代码加入 post.html 适合位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="d-flex justify-content-between">
...
...

  <!-- read time -->
  {% include read-time.html content=content prompt=true lang=lang %} 

  <!-- read times -->
  <span id="busuanzi_container_page_pv" title="本文阅读次数" class="post-meta-item" style="display: inline;">
     <span class="post-meta-item-icon">
         <i class="fa fa-eye"></i>
     </span>
     <span class="post-meta-item-text">阅读次数: 
         <span id="busuanzi_value_page_pv" style="font-weight: bold;"></span>
     </span>
  </span>
</div>

...
...

效果如图所示:

Image

项目部署, jekyll
项目部署 jekyll
本文由作者按照 CC BY 4.0 进行授权