Hexo Fluid 主题添加 Umami 统计

前言

本文主要讲如何将 Umami 应用于 Hexo 主题 Fluid 中，主要是利用主题自带的 注入 功能来添加 Umami ^[1]。因为我的 Umami 是部署在 Vercel 上的，但是因为 Vercel 到国内访问太慢了，所以把 Umami 的 js 资源套了 CDN。

Umami 部分

统计代码

首先要保证你的 Umami 已经成功部署，并且已经在 Umami 添加了网站的统计，获取到了网站的 Tracking Code。

统计代码内容如下：

<script async src="https://example.com/script.js" data-website-id="example-4def-45f8-8d42-example"></script>

套 CDN

只要把 https://example.com/script.js 中的 script.js 放到 CDN 中即可，并且记录对应的链接。

Hexo 部分

新增注入文件

新建 js，命名随意，我的命名是 _injects_fluid_analytics_umami.js 存放路径是 blogROOT/scripts/randomNAME.js 目录结构如下：

.
├── README.md
├── _config.fluid.yml
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── scripts
│   └── _injects_fluid_analytics_umami.js
├── source
├── themes
│   └── fluid

然后文件的内容如下：

hexo.extend.filter.register('theme_inject', function(injects) {
  injects.header.file('analytics', 'source/_inject/header.ejs', { key: 'value' }, -1);
});

懒得解释文件了，具体的是内容解析可以参考脚注 ^[1] 的链接。文件内容直接参考的就是 CangLan 的 Fluid -23- 添加 Umami 统计 。

实现效果是把位于 blogROOT/source/_inject/header.ejs 的 ejs 文件注入到 header 中并被加载。

配置 js 文件

在 blogROOT/source/_inject/ 中新建一个名为 header.ejs 的文件，文件内容如下：

<script async defer src="link-to-js-source" data-website-id="example-4def-45f8-8d42-example" data-host-url="https://example.com/"></script>

其实仔细看这段 html 代码的内容，和上面的 Umami 原本提供的内容没有太多的区别，核心区别是两个：

1. 指定了 js 的 CDN 链接；
2. 增加了 data-host-url 部分，这个就是 Umami 所对应的链接；

这部分是参考了 ROYWANG 的 使用 CDN 加速 Umami 静态资源，部分。

至此，Fluid 就完成了 Umami 的添加，同时也加速了资源文件的加载速度。

1. Fluid 注入代码 ↩