Hexo Fluid访问统计：使用自建Umami实现

本教程适用与fluid版本1.9.8

在发稿前2周，Umami更新了api格式，导致1.9.8的Umami配置无法使用，需要手动进行调整。经过一整天的折腾，总算是搞定了。

修改Fluid的Umami-view.js

参考这个，我们需要修改umami-vieew.js
（位于本地的 ./node_modules/hexo-theme-fluid/source/js 中）

▶

js文件全内容，可以前往github直接查看

// 从配置文件中获取 umami 的配置
const website_id = CONFIG.web_analytics.umami.website_id;
// 拼接请求地址
// 第一处修改
// const request_url = `${CONFIG.web_analytics.umami.api_server}/websites/${website_id}/stats`;
const request_url = `${CONFIG.web_analytics.umami.api_server}/api/websites/${website_id}/stats`;

const start_time = new Date(CONFIG.web_analytics.umami.start_time).getTime();
const end_time = new Date().getTime();
const token = CONFIG.web_analytics.umami.token;

// 检查配置是否为空
if (!website_id) {
  throw new Error("Umami website_id is empty");
}
if (!request_url) {
  throw new Error("Umami request_url is empty");
}
if (!start_time) {
  throw new Error("Umami start_time is empty");
}
if (!token) {
  throw new Error("Umami token is empty");
}

// 构造请求参数
const params = new URLSearchParams({
  startAt: start_time,
  endAt: end_time,
});
// 构造请求头
const request_header = {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    // 第二处修改
    // "x-umami-api-key": "oZKCH3msvqt10VlXKwoJvHclmaS4bVx0",
    "Authorization": "Bearer " + token,
  },
};

// 获取站点统计数据
async function siteStats() {
  try {
    const response = await fetch(`${request_url}?${params}`, request_header);
    const data = await response.json();
    // 第三处修改
    // const uniqueVisitors = data.uniques.value; 
    const uniqueVisitors = data.visitors.value; // 获取独立访客数
    const pageViews = data.pageviews.value; // 获取页面浏览量

    let pvCtn = document.querySelector("#umami-site-pv-container");
    if (pvCtn) {
      let ele = document.querySelector("#umami-site-pv");
      if (ele) {
        ele.textContent = pageViews; // 设置页面浏览量
        pvCtn.style.display = "inline"; // 将元素显示出来
      }
    }

    let uvCtn = document.querySelector("#umami-site-uv-container");
    if (uvCtn) {
      let ele = document.querySelector("#umami-site-uv");
      if (ele) {
        ele.textContent = uniqueVisitors;
        uvCtn.style.display = "inline";
      }
    }
  } catch (error) {
    console.error(error);
    return "-1";
  }
}

// 获取页面浏览量
async function pageStats(path) {
  try {
    const response = await fetch(`${request_url}?${params}&url=${path}`, request_header);
    const data = await response.json();
    const pageViews = data.pageviews.value;

    let viewCtn = document.querySelector("#umami-page-views-container");
    if (viewCtn) {
      let ele = document.querySelector("#umami-page-views");
      if (ele) {
        ele.textContent = pageViews;
        viewCtn.style.display = "inline";
      }
    }
  } catch (error) {
    console.error(error);
    return "-1";
  }
}

siteStats();

// 获取页面容器
let viewCtn = document.querySelector("#umami-page-views-container");
// 如果页面容器存在，则获取页面浏览量
if (viewCtn) {
  let path = window.location.pathname;
  let target = decodeURI(path.replace(/\/*(index.html)?$/, "/"));
  pageStats(target);
}

部署umami并添加网站

docker compose 部署

git clone https://github.com/umami-software/umami.git
cd umami
docker-compose up -d

此时umami运行在ip:3000上，直接访问即可进入控制面板。接下来可以配置nginx反向代理等，在此不赘述。

登录admin并添加新用户和网站

登录umami控制面板，默认账号密码是

username: admin
password: umami

建议进入控制面板后立刻修改密码以保证安全。

登入后，点击设置->用户->创建用户，然后创建一个用户权限的新用户，密码用户名自定。

用无痕模式（或者另外一个浏览器）登录这个新用户，点击添加网站，将自己的网站填写下去。在网站的编辑界面查看跟踪代码，其中有我们需要的js文件地址和website id。

退出这个账户，切回admin，将这个账户的权限改成仅浏览，umami部分基本大功告成。

完成主题配置

按照注释完成配置，其中js文件地址和website id就是我们刚才获取的。

token获取需要在Hoppscotch获取

如下图，输入umami的地址，点击body，选择Content Type为application/json，然后填入（权限为仅浏览的）用户名和密码，再点击send，就能获取到token了。

完成配置后，再进行

hexo c
hexo g
hexo d

不出意外即可成功应用啦

参考文献：

1. 前端调用 Umami API 数据 -by 林木木
2. umami官方文档
3. 修复不能正确获取Umami统计信息的问题 -committed by OrdChaos