该插件集成了三种常见的站点统计工具:谷歌分析 (Google Analytics)、百度统计 (Baidu Analytics) 和 Umami Analytics,让你可以轻松地在 VitePress 网站中集成并管理这些分析工具。无论是谷歌分析的强大功能,还是百度统计对中国市场的适配,或者是 Umami 的隐私友好型方案,都可以通过这个插件快速集成并使用。
谷歌分析
ts
// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { googleAnalytics } from '@theojs/lumen'
export default {
...DefaultTheme,
enhanceApp: ({ app }) => {
googleAnalytics({ id: 'G-******' })
}
}
获取 Google Analytics ID
- 访问 Google Analytics 网站。
- 登录到你的 Google Analytics 帐号。
- 创建一个新的 Google Analytics 账户,或者选择已有的账户。
- 在左下角点击
Admin
(管理)。 - 在
Account
(账户)列下,选择你的账户。 - 在
Property
(属性)列下,选择你的站点,或者创建一个新的站点。 - 在
Property Settings
(属性设置)中,找到Tracking Info
(跟踪信息)。 - 点击
Tracking Code
(跟踪代码),你会看到类似G-XXXXXXX
的 ID。
百度统计
ts
// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { baiduAnalytics, trackPageview } from '@theojs/lumen'
export default {
...DefaultTheme,
enhanceApp: ({ app }) => {
baiduAnalytics({ baiduId: '******' })
if (typeof window !== 'undefined') {
trackPageview('******', window.location.href)
}
...
}
}
获取 Baidu Analytics ID
- 访问 百度统计 网站。
- 使用百度账号登录或注册一个新账号。
- 登录后,点击页面上方的
我的报告
-使用设置
-网站列表
。 - 输入你的网站 URL,选择适当的分类,然后点击
保存
- 保存后,点击获取代码。会看到类似于
https://hm.baidu.com/hm.js?******
的内容 - 复制链接中
******
部分
参考链接: 百度统计官方文档
Umami
ts
// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { umamiAnalytics } from '@theojs/lumen'
export default {
...DefaultTheme,
enhanceApp: ({ app }) => {
umamiAnalytics({ id: '***-***-***-***', src: 'https://*******' })
}
}
获取 Umami Analytics ID
自建 Umami
- 首先,你需要搭建 Umami 服务器。你可以参考 Umami 文档 来进行安装。
- 在你搭建好的 Umami 实例中,登录到 Umami 仪表盘。
- 创建一个新的站点,并为其生成一个站点 ID。
- 获取该站点的 ID 后,就可以在你的网站代码中使用它进行跟踪。
使用公共 Umami 服务
- 你也可以使用公共的 Umami 服务提供商。例如,Umami 提供了一些第三方的 Umami 实例,允许用户直接使用。
- 获取到公共实例的 Umami ID 后,可以直接在代码中配置使用。
你的 Umami ID 应该类似于:123abc456def
参考链接: