RThemeV3配置边缘服务

2023 年 9 月 18 日 星期一(已编辑)
/ ,
12
1
这篇文章上次修改于 2023 年 12 月 25 日 星期一,可能部分内容已经不适用,如有疑问可询问作者。

RThemeV3配置边缘服务

配置Twikoo评论服务

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

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

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

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

// 评论初始化
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填写

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

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

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

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

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

接下来主题作者说:

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

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

我们部署它,并且把你之前得到的个人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仓库的文档写的很全,我这里不做详述。

之后,转到/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行),把它里面你已经配置的功能打开它,保证主题侧边栏设置里能够正常显示这些相关设置。

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'],
    ];
}
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...