Mika Pikazo
447 字
2 分钟
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 原本提供的内容没有太多的区别，核心区别是两个：
- 指定了 js 的 CDN 链接；
- 增加了
data-host-url部分，这个就是 Umami 所对应的链接；
这部分是参考了 ROYWANG 的 使用 CDN 加速 Umami 静态资源，部分。
至此，Fluid 就完成了 Umami 的添加，同时也加速了资源文件的加载速度。
Footnotes
Hexo Fluid 主题添加 Umami 统计
https://www.saru.im/posts/16095/