漫长的告别

0%

Hexo: Adding PV/UV counters to NexT theme

Posted on Edited on In , , Views: Valine:
Symbols count in article: 2.4k Reading time ≈ 2 mins.

Site PV/UV

NexT supports integration with different metrics/analytics services, which you can check on their website. To track the PV/UV for the whole site, we choose busuanzi, since it supports displaying those information on your webpage.

Install busuanzi.js

NexT already integrates busuanzi, but based on their website, busuanzi has to change their host name for some reasons and the old one is not compatibale anymore, we have to fix this problem by ourselves. To fix it, simply navigate to themes/next/layout/_third-party/analytics/busuanzi-counter.swig and change

1
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

to

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

Congifure NexT

To enable busuanzi in NexT, we need to configure _config.yml under themes/next. Search for busuanzi_count and modify based on your requirement

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

The above configuration only enables site_uv and site_pv, you can also customize the header and footer to make it more expressive. I disabled the page_pv since it only supports displaying visitors in the artical page, which means you can’t see it in home page, and we have a better replacement for it.
Update the settings and run hexo s, you will see the data in the footer:

It currently displays all the counts to http://localhost:4000, once you deploy it, you will see the actual data of your website.

Page PV

To implement page pv counter, we need the corresponding backend service. Here, we choose LeanCloud which is well supported by NexT.

Setup LeanCloud

Create a LeanCloud account and then create a new application with the name you want

Click the application and create a new class with name Counter and set the ACL permission to be unlimited

This creates a new DB table to store the page view counter information for each of your article, the key is the combination of you title and create time. You can also manually modify each data entry to change the actually number.

Configure NexT

Open _config.yml under themes/next and search for leancloud

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: **your_app_id**
  app_key: **your_app_key**

You can find the app_id and app_key under settings in you LeanCloud application

Once you deploy the change, you will see the new page visitor counter in your articles.