Hexo 開啓統計功能

Hexo 博客統計服務, 基於 Redis 實現。使用 hyperloglog 統計 UV。

開源地址：https://github.com/stulzq/hexo-statistics

Demo: https://xcmaster.com/

文章 PV:

站點 PV 和 UV:

步驟

• 1.安裝並以單節點模式運行 Redis
• 2.運行 hexo-statistics
• 3.配置你的 hexo 博客模板

1.安裝 Redis

Ubuntu: apt-get install redis-server

Docker

mkdir -p /data/redis

docker run -p 6379:6379 \
  -v /data/redis/conf/redis.conf:/etc/redis/redis.conf \
  -v /data/redis/data:/data \
  --name hexo-stat-redis \
  -d redis:5.0 redis-server /etc/redis/redis.conf

其他下系統請自行探索

2.運行 Hexo Statistics

二進制運行

export hexo_version=v0.1.0

wget https://github.com/stulzq/hexo-statistics/releases/download/$hexo_version/hexo-statistics-$hexo_version-linux-amd64.tar.gz

tar -xzvf hexo-statistics-$hexo_version-linux-amd64.tar.gz

cd hexo-statistics-$hexo_version-linux-amd64

# 修改配置 conf/config.yml

chmod +x hexo-statistics
./hexo-statistics

Docker

mkdir -p /data/hexo-stat/conf

curl https://raw.githubusercontent.com/stulzq/hexo-statistics/main/conf/config.yml -o /data/hexo-stat/config.yml

# 修改配置 /data/hexo-stat/config.yml

docker run --name hexo-stat \
  -v /data/hexo-stat/conf:/app/conf \
  -v /data/hexo-stat/logs:/app/logs \
  -d stulzq/hexo-statistics:v0.1.0

3.配置模板

保存文件到 博客根目錄/source/js/hexo-stat.js

"use strict";

// 配置你的 hexo statistics 服務域名
var serverDomain = "https://<your_hexo_statistics_domain>"

function getData() {
    $.ajax({
        url: serverDomain + "/stat/get",
        type: "GET",
        dataType: "json",
        success: function (resp) {
            processResult(resp)
        },
    });
}

function processResult(data) {
    // set result
    // site pv -> data.sitePv
    // site uv -> data.siteUv
    // page pv -> data.pagePv

  	// 編寫 js 更新數據到你的博客界面
    // 實例：
    $(".statistics").append(`<span id="hexo_statistics_container_site_pv" style="display: inline;">Total PV <span id="hexo_statistics_value_site_pv">${data.sitePv}</span></span>`);
    $(".statistics").append(`<span id="hexo_statistics_container_site_uv" style="display: inline;">Total UV <span id="hexo_statistics_value_site_uv">${data.siteUv}</span></span>`);
    $("div .mt-1").append(
        `<span id="hexo_statistics_container_page_pv" style="display: inline;"><i class="iconfont icon-eye" aria-hidden="true"></i><span id="hexo_statistics_value_page_pv">PagePv: ${data.pagePv+1}</span></span>`
    );
}

getData();

注入 js 文件

保存文件到 博客根目錄/scripts/inject.js

hexo.extend.injector.register('body_end', '<script src="/js/hexo-stat.js"></script>', 'default');

// 配置你的 hexo statistics 服務域名
hexo.extend.injector.register('body_end', '<script src="https://<hexo_statistics_domain>/stat/counter"></script>', 'default');

4.配置文件

log:
  level: Debug

# allowed to use hexo statistics domain
statistics:
  site:
    - xcmaster.com
    - localhost:5000

# cors domains
cors:
  origins:
    - https://xcmaster.com
    - http://localhost:4000
  methods:
    - GET
    - POST

# redis config
redis:
  address: 127.0.0.1:6379
  password:
  timeout: 3000 # timeout in milliseconds

需要自行設置 statistics.site 只有這裏面的域名才允許使用統計。

通過 cors.origins 配置允許跨域訪問的博客地址