RTheme配置边缘服务

一只鬆 Lv2

本文写于2023-09,适用于RThemeV3主题,请注意你的主题版本

配置Twikoo评论服务

这里其实作者文档写的并不算很难,只要你有一个Twikoo都能很快理解他写的意思。

没有Twikoo的请参考官方文档 搭建一个

主题默认情况下,Twikoo处于开启状态。

要使用Twikoo,只需要在/asstes/js/display.js中,修改函数loadComment()的定义,将其中包含的envId: ''(大概在第304行左右)修改为envId: '这里填写你的envId'

上面函数的定义还是比较好找的,在主题文件目录下/assets/js/display.js,找到大概在下面这片区域(大约在304行左右)的代码,在这个envId: ''的单引号里面填写你的Twikoo后端服务的网址就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 评论初始化
function initComment() {
twikoo
.init({
// 这里填写你的envId
envId: '',
el: '#tcomment',
onCommentLoaded: function () {
addMessageBarQueue(
'<a>评论已加载 <span class="i ri:chat-check-line"></span></a>',
1000,
);
},
})
}

Umami统计配置

这里发Post请求(Umami官方文档获取token)难了我一下,不过其实还算能办。

首先我们要获取你的token,我们来看一下Umami的官方文档
关于发请求获取“你的token”,这里我个人的建议方案是找一个网页模拟请求服务

然后Umami官方文档中用的是Json来发送的请求,所以我们在这个网站要把模式切成Raw,格式是json(application/json),然后我们看一下Umami官方文档写的:

First you need to get a token in order to make API requests. You need to make a POST request to the /api/auth/login endpoint with the following data

翻译过来是:

首先,您需要获取令牌才能发出 API 请求。您需要使用以下数据向 /api/auth/login 终端节点发出 POST 请求

这里首先先解释一下:你要发送到的节点地址其实就是https://(Umami后端地址)/api/auth/login,我们把这个链接填到网页工具上面的URL填写框里面。

下面Json填写

1
2
3
4
{
"username": "你的登录用户名",
"password": "你的登录密码"
}

填完以后点下“提交”,耐心等待一下,下面应该就BalaBala的出了数据,差不多应该是下面这个样子:

1
2
3
4
5
6
7
8
9
{
"token": "asA5dIfE...Pm5y7YXeT53rKnWZZEPoKbQ5N8Sx2a99NuR7s/BWiqLOVA==(类似这样的token)",
"user": {
"id": "41680....e2b10c264(用户ID)",
"username": "你的登录用户名",
"role": "admin",
"createdAt": "一串时间"
}
}

这个"token":右边冒号里的内容就是你的token,是不是学废了?

先别废,如果你这里就废了,那接下来更完蛋。

接下来要获取你的“共享token”,你需要一个能打开F12控制台的浏览器,我使用的是Chrome。
首先我们得打开你的Umami,然后找到站点设置里的“共享链接”,打开这个功能后,你会在下面得到一个链接,把这个链接复制到浏览器地址栏里然后打开它(建议用无痕式标签页模式),按下你键盘上的F12打开你的浏览器控制台,找到网络选项,这里应该会有一个文件列表(没有的话按一下Ctrl+R刷新页面),然后会有一个令人头疼的问题是:你去哪里找这个Token?
我个人给的办法是:

1
2
3
1. 切换筛选类型为`Fetch/XHR`,
2. 然后随便点开里面一个文件,找到`标头`信息
3. 翻到最下面,然后你就应该可以看到这个`x-umami-share-token`了,复制它的值(没有换一个文件看看)

这样,你就得到了这个“共享Token”

如果你照着上面的教程都得到了,恭喜你!(鼓掌👏)你完成了关键的一步操作。

接下来主题作者说:

之后,你需要部署你的路由转发服务来隐藏你的Token。

你需要一个Vercel账号,还有一个域名(Vercel默认二级域名在中国大陆已被墙)

Umami API路由转发服务的Github仓库

我们部署它,并且把你之前得到的个人Token填进环境变量里,然后给它绑一个域名(如果你的域名是顶级域名,建议你给它绑到三级减少被搜索引擎拉取的情况,安全性也更高)

然后,你就完成了这些准备工作,恭喜!

然后,在/assets/js/analysis.js中,取消注释函数initAnalytics()中的// umamiAnalytics();,然后修改getRealTimeVisitors()中的token值为你的共享token,并取消位于定义最上方的return false,之后修改函数getPageVisitors()的定义,删除其最上方的内容,并将下方的apiURL中的https://analytics.api.ravelloh.top修改为你自己的路由转发API地址。
最后,转到/assets/js/script.js,修改refreshInfo()的定义(大概在790行),将定义最下方的包含接入Umami字样的注释取消即可。
都修改完成后,所有功能应该正常工作。

好,这些应该都不难办,注释取消就是把类似//接入Umami删掉,我相信你能够理解的。

BetterStack的Uptime服务

这个还算简单,先去BetterStack那里注册一个账号,登录以后加上你的站点,获取API地址,关于获取这些作者API转发项目GitHub仓库的文档写的很全,我这里不做详述。

Uptime API转发项目的GitHub仓库

之后,转到/assets/js/analysis.js,修改loadUptime的定义,将site的值修改为你的路由转发API地址。
接着,转到/assets/js/i18n.js,将其中structureInfobarInfo()的定义的返回值中最后几行的包含需要先配置Uptime字样的注释取消,
最后,转到/assets/js/script.js,修改refreshInfo()的定义(大概在790行),将定义最下方的包含接入Uptime模块字样的注释取消即可。

都修改完成后,所有功能应该正常工作。

配置i18n.js

我们需要找到assets/js/i18n.js文件,在其中找到这一些(大约在第179行),把它里面你已经配置的功能打开它,保证主题侧边栏设置里能够正常显示这些相关设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function valueSettingItems() {
return [
['启用PJAX加载模式', '允许进行非刷新式页面请求,启用单页应用程序模式', 'EnablePjaxLoad'],
['启用PJAX Debug模式', '允许输出更多调试信息', 'EnablePjaxDebug', ''],
['启用instant.page预加载', '启动被动式预加载,提高响应速率', 'EnableInstantPage'],
['启用API预检查', '允许预先请求API地址,以预先选择响应速度更快的API', 'EnableApiPrecheck'],
/*
[
'启用BaiduStatistics分析器',
'允许将部分访问情况提交至统计服务器,以帮助分析页面',
'EnableBaiduTongji',
'',
],
*/

[
'启用Umami Analytics分析器',
'允许与自建Umami服务通信,以统计页面访问情况',
'EnableUmamiAnalytics',
],
['启用Umami 数据缓存', '允许使用会话存储以优化部分性能', 'EnableUmamiCache', ''],
[
'启用Umami 事件统计',
'允许提交部分UI交互情况统计。会造成额外的网络请求',
'EnableUmamiEvents',
],
['启用Umami API', '允许从Umami服务获取实时访客量等信息', 'EnableUmamiAPI'],


['启用Twikoo评论', '允许与评论服务器通信,以实现评论操作', 'EnableComment'],

[
'接管下载事件',
'允许使用主题框架下载管理器替代浏览器下载,显示更多信息',
'EnableDownloadFunction',
],
[
'使用Fetch下载模式',
'使用fetch代替XMLHttpRequest下载,将无法显示进度',
'UseFetchDownload',
'',
],
[
'启用音乐状态保存',
'允许将当前音乐播放列表保存至Cookie中,在页面重载后载入',
'EnableMusicStateStorage',
],
['启用自动登录', '允许在访问时自动以登录身份重新刷新令牌', 'EnableAutoLogin'],

['启用站点状态显示', '允许访问Uptime服务以显示站点服务状态', 'EnableUptime'],

['启用目录高亮', '在显示目录时自动高亮正在阅读的位置', 'EnableMenuHighlight'],
['启用高级超链接', '允许渲染部分高级形式超链接', 'EnableAdvanceLink'],
['启用标题重组', '在页面加载时自动重组标题,以提供高级锚点功能', 'EnableUpdateMenu'],
['启用图片预加载', '允许在页面加载时自动触发后文图片预加载', 'EnableImgPrefetch'],
['启用图片重组', '在页面加载时自动重组图片,以提供描述功能', 'EnableImgReset'],
['启用生成页面模型', '允许生成页面模型,以进行文章筛选、排序等功能', 'EnablePageModel'],
['启用锚点识别', '在锚点改变时运行调用相关事件,以进行索引筛选', 'EnableHashCheck'],
['启用导航栏高亮', '允许在页面路径变化时高亮导航栏', 'EnableNavHighlight'],
['启用图片放大', '允许在单击图片时放大图片', 'EnableImgZoom'],
['启用消息队列', '启用右下方消息队列以显示更多信息', 'EnableMessage'],
['启用索引数据拉取', '允许使用索引数据以进行搜索', 'EnableSearchDataGet'],
['跳过模型验证', '跳过本地与云端数据模型匹配', 'EnableSkipModelTest', ''],
['启用文章旁路推荐', '允许在文章结尾链接至上一篇/下一篇文章', 'EnableArticlesRecommand'],
];
}
  • 标题: RTheme配置边缘服务
  • 作者: 一只鬆
  • 创建于 : 2023-09-09 06:15:14
  • 更新于 : 2023-12-07 19:32:37
  • 链接: https://blog.sotkg.cn/posts/aaea8e9b.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
 评论