When we write articles, we always want to know the popularity of our work. As a Hexo blogger, I tried several different visitor counter system and here, like the previous post, I will summarize two options for visitor counts to each articles. But this time, I have preference to a specific one. Guess which one?

• Option 1: LeanCloud Counter
• Option 2: Firestore Counter

## LeanCloud Counter

LeanCloud is a Chinese friendly system, and unfortunately it doesn’t have English version. Here I’ll try to make it as clear as possible. For those who’ve read the previous post, it is not hard for you to find out Valine Comment actually use LeanCloud system so if you already have Valine, you don’t need to create the account again.

### Vanilla Steps

1. Creat an account in LeanCloud.

2. Create new application in the console, and name it.

3. In the new Application you built, create a Class named Counter.
Note: the class name must be Counter based on the source code of NexT Theme.

4. Go to Apply Key section in the Setting, and you will get your APP ID/APP Key.

5. Paste App ID and App Key to theme config file _config.yml like this:

6. Go to Security Center to set your security domain that allows you to call the server resource through the JavaScript SDK under the domain name.

Congratulations! You are all settled!!!
Well, if you want more, continue reading!

1. Thanks to @Lawrence Ye for the contribution of this section. The Leancloud visitor counter plugin used in NexT has a big security bug, by which someone could change your visitor number easily and even add/delete records in your database. This bug is found by LEAFERx and confirmed by Ivan.Nginx. This bug could only be fixed manually.
Note: All NexT sites using Leancloud visitor counter that are not fixed and other sites integrated this function by similiar ways are considered unsecurity.
• Use Online Editor in the deploy section.

• After click Online Edit button, create function as showed below.

• In the pop up window, choose Hook, and then select beforeUpdate and Counter. In the code block paste the following code:

• Deploy the Hook Counter you just created.

• Click the Deploy button on the pop up window.

• After deploy completed, close the window.

1. Go to theme config file _config.yml, set leancloud_visitors: security to true:
• Due to the limitation of LeanCloud developer’s plan in requsted thread amount and running time, counter number could sometimes be loaded very slowly. The situation can be enhanced via setting betterPerformance: true. This that scenario, we need to install an extra plugin:

• Go to site config file _config.yml, add security config.

• Now the security config has been installed. Give a username and password(no need to be the same as leancloud account). They will be used in the hexo deploying.

• Then go to site config file _config.yml again, and put the username and password you just set.

• Add deployer in deploy section of site config file.

1. Return back to LeanCloud console. Go to _User section and check if your record is added.
• Set permission in the Counter section.

• In delete setting, select specific user and close the window.

Congratulations! Now the database can only be changed by you.

## Firestore Counter

Firestore for NexT blog article counter is a fairly new tool developed by @maple3142. It is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity.

### Steps

1. Create a project in Firebase.

2. Go to Database section create a database.

3. We first start in test mode (we will modify the security level later).

4. Go to the Project setting.

5. Get your projectid and apikey.

6. Go to your theme config file _config.yml, and set your firestore section value as below.

7. Go back to Firebase console, enter Rules in Database section and slightly modify the code, and then publish it.
Modify: Change document to article to constrain the collection.

8. Note: Hexo NexT theme version should be above v5.1.3, otherwise you may encounter the issue that count numbers appear on index page. Bug#1984 is fixed here.

Congratulations! Everything is settled now!

## Comparison & My Choice

If you read the whole rambling steps above, I bet you would go for Firestore Counter as I did. Actually I failed to make Firestore Counter work at first. So I went for LeanCloud Counter. It works well, but very soon I noticed a problem – the weboage loading is very slow!
Use alt+cmd+i to open the console

It is obvious that LeanCloud Counter gave me the trouble. One possible reason could be the system is not smooth enough for international users because most users located in China don’t have this problem. So I went for Firestore Counter again. This time I made it, and fix the bug as I mentioned in Step 8 of the previous section.

Apart from this, original LeanCloud Counter has a big security bug, by which someone could change your visitor number easily and even add/delete records in your database. So you need to do Advance Steps I added in Section 1.2.

I also notice for Firestore Counter, refreshing webpage won’t change the count number, while for LeanCloud Counter you can easily modify the record number via visit the same page for multiple times. Somehow Firestore Counter recording is closer to the truth.

In all, I vote for Firestore Counter based on the following merits:

• Non-repetitive counter number
• English support console
• Easier setting process
• Faster and smoother

0%