526互联

RThemeV3主题介绍与边缘服务配置

发布时间 2023-09-09 21:01:53作者: 一只鬆

前言

本博客园文章并非主题原作者所发布，部分内容转载自原文章链接，如有侵权请联系删除。

RTheme是我最近给我个人站点换的一个很不错的站点主题，他的启动难度并不算很高。

但我在给站点配置一些边缘服务时（详见#配置边缘服务）
因为我个人技术也不算很高，所以遇到了一些问题，虽然后面得以顺利解决，但我决定写下了这篇文章。
希望那些想用本主题建站的像我这样的半小白们能够更快的上手这方面的配置，本文也是用一些小白式方案来解决配置服务时的问题

主题Demo

一只鬆的小站：https://sotkg.cn
Ravelloh's Blog： https://ravelloh.top

主题特点

部分内容转载自主题作者对主题的介绍：原文章链接
Github - RavelloH/RTheme

高性能

得益于重新设计的主题框架，主题现在在性能方面已经登峰造极，在Google PageSpeed Insights测试中取得了400/400的满分成绩。
Google PageSpeed 检测结果截图
Google PageSpeed 检测结果
在实际体验中，RTheme使用Web Worker异步处理高负载任务，异步加载/执行渲染，避免阻塞页面；其主动预加载也降低了页面的加载延迟。 在v3版本的全面升级中，主题已经改造为单页应用程序，加之顺畅的内容过渡，流畅性大大提升。

自动化

RTheme使用Github Actions在云端自动部署，无需本地干预，即可自动完成索引更新、自动订阅更新、站点地图更新、文章旁路推荐等功能。
此外，RTheme优化了自身的架构，使得其编写文章十分简单----仅需要了解HTML语法即可。你也可以选择使用Markdown编辑。之后，其组件将在渲染时自动无感添加。
Github Actions运行效果

响应式

主题使用响应式设计，基准元素均使用flex/grid布局，在各尺寸屏幕上表现出色。
在更多尺寸屏幕上的模拟效果
Fiex布局显示效果

功能丰富

主题功能丰富，内置设置/分享/在线音乐播放/多站点测速/自动全站搜索/文章自定义排序/文章标签&分类自动索引/站点地图/RSS/Atom自动生成/文章自动推荐/内置高级下载器/主动型预加载/用户登录接口/外链截图API等等一系列功能，创造出属于极客的极致主题框架。

函数化

主题中除了用于管控初始化加载的loading.js，其余脚本均将各功能包装为函数，以保证其可复用性及可免依赖乱序加载。
函数化效果
这使得二次开发十分简单，可直接复用主题框架中的功能。

SEO友好

主题自动根据页面内容生成两种格式的sitemap，优化搜索引擎抓取。

全站搜索

主题与可持续集成的RPageSearch深度集成，以提供静态站的全站高级搜索功能。 详见RavelloH/RPageSearch。高性能/实时搜索/正则语法支持/异步/web worker/自动持续构建/可拓展数据格式，提供丰富的搜索功能。
RPageSearch的使用效果

自动订阅更新

主题基于页面内容自动生成RSS、Atom、JSON Feed三种格式的订阅信息。

高兼容性

主题最早支持到Chrome58(2017年4月19日),Firefox52(2017年3月7日),Opera45(2017年5月10日)，Safari，能够提供兼容性的保障。
注：IE已死，不支持IE。

单页应用程序

主题使用PJAX技术进行页面加载，并在页面加载切换之间加入过渡动画。
另外，主题也会在页面加载时更新左下角的进度条，以展示正在加载/加载超时/加载完成/加载失败等不同场景。
页面加载失败时，加载进度条变红

原生音乐播放器

主题内置原生音乐播放器，支持播放/切换/跳转/循环等功能，且可进行在线搜索以使用在线资源。
在线搜索音乐的效果

过渡自然

主题内置顺滑的元素切换函数switchElementContext()，以保证元素切换的顺滑自然。

轻量化&原生实现

主题本体大小小于600KB，无任何框架，保证了其高速的加载性能。
网络请求的总览截图

代码高亮

主题使用highlight.js代码高亮，并在其基础上使用Web Worker并行加载，防止页面阻塞。
代码高亮的显示效果

标签&分类自动索引

主题能自动根据文章信息索引具有相应标签/分类的文章，无需干预。

语言自定义

主题的语言文件包单独成文件，你可以根据自己的需要更改模板，也可实现其国际化。
i18n.js中的语言模板

设置自定义

主题可进行各式设置，以提供个性化体验。
设置项使用cookie存储，并且使用列表快速创建，保证其易用性。
部分设置项的截图

自动目录索引

主题可根据文章内标题自动生成目录，并高亮阅读项，以提高阅读体验。

文章旁路推荐

文章结尾自动推荐上一篇/下一篇文章，无需手动设置。效果见上方图片。

内置高级下载器

主题内置下载器，提高整体感。你可以在文章中使用。
详阅#箱式下载盒
下载器的运行截图

小白式配置边缘配置

配置Twikoo评论服务

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

没有Twikoo的请参考官方文档：https://twikoo.js.org，来搭建一个。

那么我们再来看一下主题作者的原话：

默认情况下，Twikoo处于开启状态。

要使用Twikoo，只需要在/asstes/js/display.js（作者这里打错了，应该是assets）中，修改函数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”，这里我个人的建议方案是找一个网页模拟请求服务（我用的是http://coolaf.com/tool/post），然后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。

这里作者原话是：

获取你的共享token(创建你的站点的贡献链接（共享链接），访问并用开发者工具查看网络信息，复制任意一个含有x-umami-share-token的请求头的网络请求的x-umami-share-token值)。

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

我之前曾尝试过直接搜索x-umami-share-token，然后搜不到，最后我个人给的办法是：

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

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

如果你照着上面的教程都得到了，恭喜你！（鼓掌?）你完成了关键的一步操作。

接下来主题作者说：

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

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

作者给的仓库是：https://github.com/RavelloH/umami-api-route

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

API转发项目GitHub仓库地址：https://github.com/RavelloH/uptime-api-route

然后作者说：

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

按照他说的修改即可，都做完了之后。

我是真的恭喜你，你已经完成了这些配置。

关于作者没有写出的

实际上，作者少写了点东西，我们需要找到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'],
    ];
}