叶泯希·杂七杂八的🐕窝

海的那边，真的是自由吗？

2026-04-29T07:12:56.000Z

海的那边有啥我不知道，未知的事才最值得期待，期待预料之外的惊喜，不管结果是惊是喜，享受过程吧！

🌏摄于：广东 2022-02-05

叶泯希

已同步至相册集

放学打球

2026-03-25T12:54:39.000Z

以前职高的时候，放学老是去打球，现在都没打过了，那时候作业少，疫情也早放学，也不回家就跟兄弟们一起去球场打，每天都玩到天黑才回家，周五甚至是玩完回去吃完饭接着来完，那时候精力根本花不完，现在不及之前的百分之一。把兄弟的鞋子放在蓝框上，也用来投篮。单挑谁输了抬他去磨灯柱。有时候聚在一起八卦学校里的事情，某个谁谁跟谁谈恋爱，某个老师家里干嘛的开的什么车，还有初中或者小学的趣事。美好总是短暂的，天下没有不散场的宴席，但各自都在向美好的生活奋进。时间好快啊，一眨眼就是四年后，想打球了，但凑不到人了。
人无法同时拥有青春和青春的感受。

🌏摄于：广东 2022-03-01

叶泯希

已同步至相册集

因 LeanCloud 停止对外服务，对数据迁移至 Vercel 。

2026-03-25T12:53:35.000Z

前言

LeanCloud 团队

关于 LeanCloud 停止对外提供服务的通知

相信大家都知道了，LeanCloud 将于 2027 年 1 月 12 日停止对外提供服务，本站有俩个服务依赖着 LeanCloud 服务，今天有空把它们都迁移一下。

一. Do you like me 小组将

1. 部署

单击此处一键部署 Deploy with Vercel。
项目地址https://github.com/5ime/likeMe
成功后去仪表盘，切换至 Storage 创建数据库并连接。
连接成功去检查环境变量，选择项目的 Project Settings 找到 Environment Variables 检查环境变量是否存在 POSTGRES_URL 。
重新部署。

检验是否数据库连接成功。

最简单的方式：访问一次接口触发建表，然后再看是否能正常返回。

GET /healthz：服务是否存活（返回 ok）
GET /info：会读取数据库并返回当前点赞数
如果数据库连不上，你通常会在 Vercel 的 Logs 里看到与连接/鉴权相关的报错（例如环境变量缺失、连接串无效等）。

本项目会在首次请求时自动建表（like_count / like_user），无需手动建表。

至此部署部分就应该结束了，以下是我的示例 Demo 。

叶泯希
Demo
用法请参考之前的文章。

叶泯希
侧边栏——Solitude主题

叶泯希
给自己的网站加上Do you like me 小组件

题外话，这里为了适配主题的 pjax 我对 likeme.js 进行修改，以便切换页面时失效。

const likeMe=(()=>{let instance;let initialCallOptions=null;let retryCount=0;const MAX_RETRIES=20;const RETRY_INTERVAL=50;function tryInitializeInstance(options){const targetElement=document.querySelector(options.el);if(targetElement){instance=new LikeMeSingleton(options);instance.reinitialize(options.el);initialCallOptions=null;retryCount=0}else if(retryCount<MAX_RETRIES){console.warn(`LikeMe: Target element ${options.el} not found yet. Retrying in ${RETRY_INTERVAL}ms (attempt ${retryCount+1}/${MAX_RETRIES}).`);retryCount++;setTimeout(()=>tryInitializeInstance(options),RETRY_INTERVAL)}else{console.error(`LikeMe: Target element ${options.el} not found after ${MAX_RETRIES} retries. Initialization failed.`);initialCallOptions=null;retryCount=0}}return options=>{if(!instance){if(!initialCallOptions){initialCallOptions=options};tryInitializeInstance(initialCallOptions)}else{instance.url=options.serverURL||instance.url;instance.color=options.color||instance.color;instance.reinitialize(options.el)}return instance}})();class LikeMeSingleton{constructor({el,serverURL,color='#ff9797'}){Object.assign(this,{el,url:serverURL,color});this.isLiking=false}async reinitialize(newEl=this.el){this.el=newEl;const currentElement=document.querySelector(this.el);if(currentElement){currentElement.innerHTML=''}else{console.warn(`LikeMe target element ${this.el} not found during reinitialization. Skipping render.`);return}try{await this.renderUI();this.attachEvents();this.updateCount()}catch(error){console.error('LikeMe reinitialize error:',error)}}async init(){return this.reinitialize(this.el)}async renderUI(){try{const response=await fetch(this.url);const html=await response.text();const element=document.querySelector(this.el);if(element){const parser=new DOMParser();const doc=parser.parseFromString(html,'text/html');element.innerHTML=doc.body.innerHTML;const card=element.querySelector('.likeCard');if(card){card.style.setProperty('background-color',this.color)}}}catch(error){console.error('Render UI error:',error)}}attachEvents(){const card=document.querySelector(`${this.el} .likeCard`);if(card){card.addEventListener('click',()=>this.handleLike())}}async updateCount(){try{const response=await fetch(`${this.url}/info`);const data=await response.json().catch(()=>null);if(response.ok&&data){const count=data.data?.count||0;const textElement=document.querySelector(`${this.el} .likeCard-text`);if(textElement){textElement.textContent=`❤ ${count}`}}}catch(error){console.error('Update count error:',error)}}setUIState(isLoading,text,isSuccess=false){const card=document.querySelector(`${this.el} .likeCard`);const textElement=document.querySelector(`${this.el} .likeCard-text`);if(card&&textElement){card.classList.remove('loading','success');if(isLoading){card.classList.add('loading')}else if(isSuccess){card.classList.add('success')}textElement.textContent=text}}async handleLike(){if(this.isLiking)return;this.isLiking=true;this.setUIState(true,'❤ 爱意传递中...');try{const response=await fetch(`${this.url}/like`);const payload=await response.json().catch(()=>null);if(!payload){this.setUIState(false,'❤ 网络错误');setTimeout(()=>{this.updateCount()},1500);return}const{code,data={},msg}=payload;const count=data.count||0;if(response.ok&&code==='200'){this.setUIState(false,'❤ 传递成功~',true);setTimeout(()=>{this.setUIState(false,`❤ ${count}`)},500);return}this.setUIState(false,msg||'❤ 传递失败~');setTimeout(()=>{this.updateCount()},1500)}catch(error){console.error('Handle like error:',error);this.setUIState(false,'❤ 网络错误');setTimeout(()=>{this.updateCount()},1500)}finally{this.isLiking=false}}}

2. 数据迁移

导出数据。
连接数据库（我这里以 Navicat 为例），你也可以用Neon自带的进行操作。
打开 likeCount 这个表来修改数据，这个数据从刚刚导出的文件中 likeCount.0.jsonl 查看，修改成一样的数值。

进阶，把之前的ip地址和时间也直接导入。

首先，先了解一下数据的结构。

LeanCloud

1	{"ACL":{"*":{"read":true}},"ip":"0.0.0.0","createdAt":"2024-11-06T05:24:53.869Z","updatedAt":"2024-11-06T05:24:53.869Z","objectId":"672afda5ff1aa61512697fa9"}

这是用ai生产的一个转换成sql语句的脚本。

const fs = require('fs');
const readline = require('readline');

// 定义输入和输出文件
const inputFilePath = 'likeUser.0.jsonl';
const outputFilePath = 'insert_like_user.sql';

// 创建可读流和可写流
const readStream = fs.createReadStream(inputFilePath);
const writeStream = fs.createWriteStream(outputFilePath);

const rl = readline.createInterface({
    input: readStream,
    crlfDelay: Infinity // 检测所有CRLF行尾
});


let lineNumber = 0;

rl.on('line', (line) => {
    lineNumber++;
    // 跳过文件头注释行和空行
    if (line.startsWith('#') || line.trim() === '') {
        return;
    }

    try {
        const data = JSON.parse(line);

        const ip = data.ip;
        const createdAt = data.createdAt; // e.g., "2024-11-06T05:24:53.869Z"

        // 从 createdAt 中提取日期部分作为 'day'
        const dateObj = new Date(createdAt);
        const day = dateObj.toISOString().split('T')[0]; // YYYY-MM-DD

        // 构建 SQL INSERT 语句，使用 ON CONFLICT DO NOTHING
        const sql = `INSERT INTO "public"."like_user" ("ip", "day", "created_at") VALUES ('${ip}', '${day}', '${createdAt}') ON CONFLICT ("ip", "day") DO NOTHING;\n`;
        writeStream.write(sql);

    } catch (error) {
        console.error(`Error parsing JSON on line ${lineNumber}: ${line}`);
        console.error(error);
    }
});

rl.on('close', () => {
    console.log(`Conversion complete. SQL INSERT statements (ignoring duplicates) written to ${outputFilePath}`);
    writeStream.end(); // 关闭输出文件流
});

readStream.on('error', (err) => {
    console.error(`Error reading input file: ${err.message}`);
});

writeStream.on('error', (err) => {
    console.error(`Error writing output file: ${err.message}`);
});

将脚本的生产出来的文件打开，复制所有到新建查询里并运行，你也可以用Neon自带的进行操作。
至此，完成所有数据迁移

二. Waline 评论

去Waline的管理后台将所有数据导出。
叶泯希
Waline管理后台
按照官方文档进行重新部署。
Waline
Vercel 部署
导入刚刚导出来的数据。
最后，记得将之前的项目中的环境变量全部移至新项目中，可以使用命令更快。

结尾

至此，教程结束。希望对你有所帮助，有任何问题请在下方留言。可以关注我的公众号以及订阅我的文章，感谢你的支持，是对我最大的动力，当然了，更多的是因为热爱。

本文参考

I Am I

为你的网站添加 Do you like me 小组件

yuang01

侧边栏

2025:得与失

2026-01-28T19:00:00.000Z

摘句

1	悟已往之不谏，知来者之可追；实迷途其未远，觉今是而昨非。

始言

新建文件的时候还下意识的以2025开头，没发现如今已经2026了，这一年发生了很多，失去了很多，得到了很多，幸运的是，自己身体健康，家人无大病，虽然没什么钱，日子还算过的去，胸无大志，总为一日三餐而奔波。家里一直催着找工作，去工作，结婚生子，我也知道老人家盼着抱曾孙，可很多事情不能按部就班的，不是没有计划，只是时候未到，一步一个脚印，脚踏实地。

回顾2025年

1月

这个时候应该在跟她在武汉跨年吧，很开心！好不舍啊。
相聚的时光总是短暂的，还得把单子完成，我不要工作/(ㄒoㄒ)/~~
过年前大扫除，发现了小学的书套、画册、光盘、闹钟、玩具，初中的试卷、作文、奖旗。
小时候真好没有烦恼o(￣▽￣)ブ
哈哈，13年的说说：我要飞的更高~……。好可惜没有做到，飞机都没坐上。说多了都是泪。
除夕夜的兄弟聚会，在一起聊了很多，小时候琐事，未来展望开饭店。未来可期啊。
过年了，放烟花，又完成小时候未曾圆的梦，可惜啊不在对的年纪啊！
很不幸的是，年初又感冒了，似曾相识，上一年好像也是，o不我不想生病(≧﹏ ≦)
在家呆着好有愧疚感，有手有脚的，还养活不了自己。加油！

2月

继续为单子而努力，过年还得工作。好想去玩啊！
帮他弟买手机，分期到现在都还没还完/(ㄒoㄒ)/~~她弟比我大该怎么叫到时候(●ˇ∀ˇ●)
这个月好像无事发生，天天被家里说，在家的难处。不敢吱声……

3月

家里没人了，自力更生，研究黑暗料理。还跑进来一只哈基咪~o( =∩ω∩= )m
每天就是睡觉打游戏吃饭。就是下一顿犯愁(；′⌒`)
折腾博客，数据备份整理。

4月

最近的天空好美啊！每天嘎嘎嘎拍(●ˇ∀ˇ●)
接到单子了，下一顿有着落了。o(￣▽￣)ブ
她生日，犯愁不知道送什么。最后送了马面裙w(ﾟДﾟ)w
好兄弟请我吃坤，好兄弟在心中，有事电话打不通。在学校我俩老一起吃坤🐔
bushi《王者荣耀》这游戏到底谁在赢啊！？

5月

端午安康。
天空依旧绽放它的魅力，拍！
天气变热了，还得弄单子。加油！
王者荣耀我** 你**

6月

六一快乐，长不大的小孩子(#`O′)
宿舍一起去KTV自助。今年第一聚！
天空怎么看都看不厌啊。可惜我的脚趾头发脓了≧ ﹏ ≦
小强误入，瓶子里干活。
她找到工作了，海底捞服务员。真好！
光遇6周年。小陈你就送这点东西？

7月

夏天来了，天空异象好多。外星人申请童话(#`O′)
我的脚趾头怎么还没好！别是甲沟炎啊/(ㄒoㄒ)/~~
兄弟们聚餐，讨论去哪找工作。呃，我吃吃(╹ڡ╹ )
去阿姨里聚餐，吃小龙虾。好高级我不会吃(；′⌒`)
台风跟随着基孔肯雅热而来~Σ(っ °Д °;)っ
我喜欢外卖大战！！！(╹ڡ╹ )

8月

酷暑肯定得和烧烤搭配~
奶奶生日宴，82了厉害吧。
家里换冰箱了，之前的好像也四五年了。
种的火龙果开花了，但枯萎了。就好像我一样。
好大的雨，快上船！落汤鸡被淋成。

9月

看阅兵！吃月饼。
天空依旧美丽，就是台风太猛了，停工停课了。
她给我买了面包和零食。貌似也有点似曾相识。
外卖大战别停啊，奶茶全看你们了(╹ڡ╹ )

10月

雨过天晴，还拍到心形的云了。好幸运。
开单了，开单了！
中秋快乐！团团圆圆。

11月

火龙果终究还是死了。天空都不美丽了(T_T)
买了手机看小说o(￣▽￣)ブ
就是被坑了，一定要验明正身啊！

12月

好兄弟生日，吃宵夜。碳水爆炸，就是好冷啊。
跟好兄弟们去参加婚礼。吃席，啥时候才轮到我。
跟好兄弟们跨年，甚至忘了她了，完了完了(；′⌒`).

总结2025年

得到了时间，能做好多没做过的事，还是总感觉时间不够用。
失去了很多，说不上来失去了什么，2026能不能对我好一点。
好好生活，好好生活就是好好吃饭，好好吃饭，就是好好生活。
我们不是不幸福，而是缺少一点点感知幸福的能力，幸福不在别处，当下就是全部。

最后

新的一年祝大家平安喜乐!

世事无常，珍惜眼前

2025-12-16T09:15:54.000Z

我不知道意外和明天哪个先来，我只知道当下就是最好的，所以我开始频繁的记录，试图想留下些什么。

🌏摄于：广东 2022-06-06

叶泯希

已同步至相册集

“花怎么会落呢”

2025-11-15T07:20:27.000Z

续侄溥赏酴醾劝酒二首·其一
宋代：陈著
花有重开日，人无再少年。
相逢拌酩酊，何必备芳鲜。

花谢了还有再开放的一天，人老了之后再无少年之时。
朋友相见尽管推杯换盏，喝个酩酊大醉，只要有酒无需备办美食。

🌏摄于：广东 2022-06-23

叶泯希

已同步至相册集

“世界充满分歧，所以要学会尊重别人”

2025-10-16T07:20:27.000Z

尊重是必要的，你不尊重别人，别人也不会尊重你。
有些事情你理解不了的话，那就尊重，也不要恶言相加。
古人云：恶言不出于口，忿言不反于身。《礼记·祭义》
不说伤人的话，别人就不会用忿怒的话回击。
此句提醒人们避免恶言伤人，人际交往中，友好、理智和尊重是维系良好关系的基础。

🌏摄于：广东 2022-07-01

叶泯希

已同步至相册集

“死亡不是永别，遗忘才是”

2025-09-20T13:20:27.000Z

死亡是来的猝不及防的，根本没有任何时间让自己反应过来，这怕是人的过激保护机制吧。
反应过来之后才发现原来死亡离我那么近，上一秒还有说有笑，下一秒就阴阳永隔。
但死亡真的是永别吗？《小王子》里说：只要你还记得我，我就会一直留在你身边。
所以我觉得死亡就不是永别，遗忘才是。
前段时间我老豆带我回老家扫墓，带我见了好多先祖，听说他们的往事。
知道他们在哪，还有人记得他们。
以后我也会带着我的儿女来认认他们，让他们知道我们从哪里来，从哪里去，这也是一种传承。

🌏摄于：广东 2022-07-17

叶泯希

已同步至相册集

2024-07-28 “爱就像蓝天白云晴空万里突然暴风雨”

2025-08-23T07:53:27.000Z

🌏摄于：广东 2022-07-21

叶泯希

已同步至相册集

“小雨天气”

2025-07-13T09:30:00.000Z

🌏摄于：广东 2022-07-06

叶泯希

已同步至相册集

快下雨，别打雷了，赶紧的，热！

2025-06-14T09:30:00.000Z

🌏摄于：广东 2022-08-16

叶泯希

已同步至相册集

寄博客一周年

2025-05-11T16:00:00.000Z

不知不觉中，就已经一年了，仿佛一切还在昨天。已经迭代三个主题了。

叶泯希

建站历史

主题示例	主题作者
一代主题	Candinya
二代主题	yuang01
三代主题	everfu

你问我怎么接触到Hexo的？ open

我也不知道欸，就是做完毕设之后闲得发慌，也不想去面试、找工作。然后就莫名其妙接触上了，可能是缘分吧～ (｡･∀･)ﾉﾞ✨

你最开始建站的原因是为了什么？ open

我说想为女朋友建个站，记录一下生活，你信吗？(⁄ ⁄•⁄ω⁄•⁄ ⁄)💖

接触到Hexo你得到了什么？ open

我得到了很多，学了一堆前端知识、Git命令、网站部署啥的，还加入了好多组织，认识了很多大佬们！(ง •̀_•́)ง✨

为什么会重一代换到二代的？ open

别说了，我刚接触就开始改主题，发现自己改得太麻烦了，结果阴差阳错找到了二代。二代的功能正好是我想要的，大概也折腾了半年吧～ (￣▽￣)ノ

二代那么好，为什么会换到三代呢？ open

嗯……可能是因为三代一直有更新吧。而且一代作者也重新更新了。再加上有点跟风的原因，最主要的还是对二代审美疲劳了吧～ (´･ω･`)💭

就算处于互联网边缘，还会继续坚持吗？ open

我只能说，大善人CloudFlare、Vercel不倒，我也不倒！(●ˇ∀ˇ●)✊

你为什么在水文？ open

呃，其实我也不知道写什么好啦～ (￣▽￣;)💦

你接下来有什么规划吗？ open

重拾一代主题，并保持更新吧，一代命非常短，得续一下命～ (ง •̀_•́)ง💪
想改一下即刻短文成懒加载模式，点击加载才会加载～ 🌀
把我断更很久的毕业设计续上并完结！✍️🎓

今天就这样。相信你过得也很好吧？期待下次与你再会😊。

出门不要摔跤容易烫伤

2025-05-04T15:30:00.000Z

🌏摄于：广东 2022-08-24

叶泯希

已同步至相册集

Windows 安装 Docker 部署 Immich

2025-04-08T07:20:08.000Z

前言

我有挺多图片的，想搭建个图片管理工具奈何没有服务器，也没有 Nas ，干脆就笔记本电脑上。
打算用 Windows 装个 Docker 再在里面装个 Immich 。
给位佬友们有什么好推荐的吗，最好就能放在托管平台上面的，但是我不想花钱' 。
别问为什么没有图片，懒得截。

环境

Windows 11

准备工作

开启电脑的功能 Hyper-V 和 适用于 Linux 的 Windows 子系统和虚拟机平台
1. 打开控制面板 -> 程序 -> 程序和功能 -> 启用或关闭 Windows 功能
2. Hyper-V 和适用于 Linux 的 Windows 子系统和虚拟机平台（勾选）
去官网下载 Docker并安装（速度有点慢自行想办法）
1. 无脑点 OK 然后等
2. 安装完成点 Close
3. 在桌面找到蓝色小鲸鱼打开它
4. Accept（同意） 一些协议
5. 提示需要登陆，感觉没必要可以点右上角 Skip（跳过）
6. 调查问卷 Skip（跳过） 就行
7. 更改 Docker 语言
  1. 点击这里去下载汉化包
  2. 关闭Docker Desktop
  3. 在Docker安装目录找到app.asar文件并将其备份，防止出现意外。
    - Windows下默认为C:\Program Files\Docker\Docker\frontend\resources
    - Macos下默认为/Applications/Docker.app/Contents/MacOS/Docker Desktop.app/Contents/Resources
    - Ubuntu/Debian下默认为/opt/docker-desktop/resources
  4. 将下载的asar文件改名为app.asar后替换原文件
8. 打开终端CMD输入 docker –version
  1
  2
  PS C:\Users\59974> docker --version
  Docker version 28.0.4, build b8034c0
9. 安装成功

安装 Immich

新建 F:/web/immich 文件夹（全英文路径）

下载最新的配置文件，我写了个脚本双击运行即可 updatedownload.bat

F:/web/immich/updatedownload.bat

@echo off

REM 设置基地址
set BASE_URL=https://github.com/immich-app/immich/releases/latest/download/

REM 下载 docker-compose.yml 文件
echo 正在下载 docker-compose.yml ...
powershell -Command "Invoke-WebRequest -Uri '%BASE_URL%docker-compose.yml' -OutFile 'docker-compose.yml'"
if %ERRORLEVEL% neq 0 (
    echo 下载 docker-compose.yml 失败！
    pause
    exit /b %ERRORLEVEL%
)

REM 下载 .env 文件
echo 正在下载 .env 文件 ...
powershell -Command "Invoke-WebRequest -Uri '%BASE_URL%example.env' -OutFile '.env'"
if %ERRORLEVEL% neq 0 (
    echo 下载 .env 失败！
    pause
    exit /b %ERRORLEVEL%
)

REM 下载 hwaccel.ml.yml 文件
echo 正在下载 hwaccel.ml.yml ...
powershell -Command "Invoke-WebRequest -Uri '%BASE_URL%hwaccel.ml.yml' -OutFile 'hwaccel.ml.yml'"
if %ERRORLEVEL% neq 0 (
    echo 下载 hwaccel.ml.yml 失败！
    pause
    exit /b %ERRORLEVEL%
)

REM 下载 hwaccel.transcoding.yml 文件
echo 正在下载 hwaccel.transcoding.yml ...
powershell -Command "Invoke-WebRequest -Uri '%BASE_URL%hwaccel.transcoding.yml' -OutFile 'hwaccel.transcoding.yml'"
if %ERRORLEVEL% neq 0 (
    echo 下载 hwaccel.transcoding.yml 失败！
    pause
    exit /b %ERRORLEVEL%
)

REM 下载 prometheus.yml 文件
echo 正在下载 prometheus.yml ...
powershell -Command "Invoke-WebRequest -Uri '%BASE_URL%prometheus.yml' -OutFile 'prometheus.yml'"
if %ERRORLEVEL% neq 0 (
    echo 下载 prometheus.yml 失败！
    pause
    exit /b %ERRORLEVEL%
)

echo 所有文件下载完成！
pause

修改 F:/web/immich/.env 文件（你不想改数据库密码可跳过）

F:/web/immich/.env

  # To set a timezone, uncomment the next line and change Etc/UTC to a TZ identifier from this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
- # TZ=Etc/UTC
+ TZ=Asia/Shanghai
  # Connection secret for postgres. You should change it to a random password
  # Please use only the characters `A-Za-z0-9`, without special characters or spaces
- DB_PASSWORD=postgres
+ DB_PASSWORD=密码

运行安装代码
1
docker compose up -d
打开 http://127.0.0.1:2283（本机IP地址），显示 欢迎使用 Immich 界面即部署成功。

进阶操作

1. 更改模型，及文件路径

映射外部相册文件夹，更改模型

F:/web/immich/docker-compose.yml

services:
    immich-server:
    container_name: immich_server
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
-    # extends:
-    #   file: hwaccel.transcoding.yml
-    #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
+      extends:
+      file: hwaccel.transcoding.yml
+      service: nvenc # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
    volumes:
        # Do not edit the next line. If you want to change the media storage location on your system, edit the value of UPLOAD_LOCATION in the .env file
        - ${UPLOAD_LOCATION}:/usr/src/app/upload
        - /etc/localtime:/etc/localtime:ro
+      - F:/together:/mnt/media:ro
    immich-machine-learning:
    container_name: immich_machine_learning
    # For hardware acceleration, add one of -[armnn, cuda, rocm, openvino, rknn] to the image tag.
    # Example tag: ${IMMICH_VERSION:-release}-cuda
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}
-    # extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/ml-hardware-acceleration
-    #   file: hwaccel.ml.yml
-    #   service: cpu # set to one of [armnn, cuda, rocm, openvino, openvino-wsl, rknn] for accelerated inference - use the `-wsl` version for WSL2 where applicable
+    extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/ml-hardware-acceleration
+      file: hwaccel.ml.yml
+      service: cuda # set to one of [armnn, cuda, rocm, openvino, openvino-wsl, rknn] for accelerated inference - use the `-wsl` version for WSL2 where applicable
    volumes:
+      - F:/web/model-cache:/cache

下载模型（自行配置SSH）

git clone https://huggingface.co/immich-app/buffalo_l
git clone https://huggingface.co/immich-app/XLM-Roberta-Large-Vit-B-16Plus
# 国内镜像
git clone https://hf-mirror.com/immich-app/buffalo_l
git clone https://hf-mirror.com/immich-app/XLM-Roberta-Large-Vit-B-16Plus

移动文件夹，树状图如下

F:/web/model-cache

model-cache
├─clip
│  └─XLM-Roberta-Large-Vit-B-16Plus
│      ├─textual
│      └─visual
└─facial-recognition
    └─buffalo_l

跟之前一样，运行安装代码等待部署即可
1
docker compose up -d

2. 内网穿透

自己琢磨吧

3. 效果

叶泯希

结尾

本文参考

保持默认

win11部署immich相册，打造属于自己的相册管理工具

绅士喵

自建照片/视频管理方案（Immich 的部署和使用）

主题魔改——Solitude主题

2025-03-24T16:20:00.000Z

前言

这几天有时间就把主题升级一下，顺便总结一下修改和添加内容。我很蠢，但是蠢人有蠢人的办法，一样能实现功能就好了。

更新记录 open

2026-04-29

2025-11-15

2025-09-21

2025-05-16

2025-05-11

2025-04-07

2025-04-05

2025-03-30

2025-03-29

2025-03-28

2025-03-27

2025-03-26

2025-03-25

首稿，solitude版本 v3.0.19

修改了什么

修改内容 open

1. 加载动画

切换页面时展现。

修改 themes/solitude/source/css/_layout/fullpage.styl 文件：

// ...
    .loading-bg
      display flex
      width 100%
      height 100%
      position fixed
      background var(--loading-bg)  // 修改这一行
// ...
    .loading-img
      width 100px
      height 100px
      margin auto
      animation-duration 0.5s // 修改这一行，复制完后请删除注释
// ...

修改 themes/solitude/source/css/_mode/index.styl 文件：

[data-theme=dark]
--loading-bg #000000dd  // 添加这一行
// ...
[data-theme=light]
--loading-bg #ffffffdd  // 添加这一行
// ...

参考	原帖
关于本站｜Solitude主题魔改内容	❖星港◎Star☆

2. Tab标签

点击按钮可以跳转页面。

修改 themes/solitude/scripts/tags/tabs.js 如下：

'use strict';

function postTabs([name, active], content) {
  // 定义正则表达式，用于匹配选项卡块
  const tabBlock = /<!--\s*tab (.*?)(?:\s*\[(.*?)\])?\s*-->\n([\s\S]*?)<!--\s*endtab\s*-->/g;

  // 使用 matchAll 来获取所有匹配的选项卡
  const matches = [...content.matchAll(tabBlock)];

  // 将一个字符串转换为数字，设置默认选中的标签索引
  active = Number(active) || 0;

  // 生成选项卡项函数
  const generateTabItems = (matches, name, active, parentId) => {
    return matches.map((match, tabId) => {
      // 捕获选项卡标题和图标
      const [tabCaption = '', tabIcon = ''] = match[1].split('@');

      // 获取可选的链接，如果有的话
      const link = match[2] ? match[2].trim() : '';

      // 渲染内容，使用 Hexo 的 Markdown 渲染引擎
      const postContent = renderMarkdown(match[3]);

      // 生成唯一的 id，用于对应选项卡内容区域
      const tabHref = `${parentId}-${tabId}`;

      // 处理图标 HTML
      const iconHtml = tabIcon ? `<i class="${tabIcon.trim()} tab solitude"></i>` : '';

      // 判断是否为活动状态（选中状态）
      const isActive = active === tabId ? ' active' : '';

      // 回到顶部按钮的 HTML
      const toTopButton = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button>';

      // 根据是否存在链接来生成导航项
      return {
        nav: createNavItem(link, tabHref, iconHtml, tabCaption, isActive, ),
        // 选项卡的内容部分
        content: `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent}${toTopButton}</div>`
      };
    });
  };

  const renderMarkdown = (text) => {
    return hexo.render.renderSync({ text, engine: 'markdown' }).trim();
  };

  const createNavItem = (link, tabHref, iconHtml, tabCaption, isActive) => {
    const buttonContent = `${iconHtml}${tabCaption.trim() || `${name} ${tabHref}`}`;
    return link ? `
      <li class="tab${isActive}">
        <button onclick="location.href='${link}'" data-href="#${tabHref}" type="button">
          ${buttonContent}
        </button>
      </li>` : `
      <li class="tab${isActive}">
        <button type="button" data-href="#${tabHref}">
          ${buttonContent}
        </button>
      </li>`;
  };

  // 生成选项卡项
  const tabItems = generateTabItems(matches, name, active, name.toLowerCase().replace(/\s+/g, '-'));

  // 回到顶部按钮的 HTML
  const toTopButton = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button>';

  // 创建完整选项卡结构（包含导航和内容）
  const createTabStructure = (tabItems) => {
    const tabNav = `<ul class="nav-tabs">${tabItems.map(item => item.nav).join('')}</ul>`;
    const tabContent = `<div class="tab-contents">${tabItems.map(item => item.content).join('')}</div>`;
    return { tabNav, tabContent };
  };

  // 获取生成的选项卡导航和内容
  const { tabNav, tabContent } = createTabStructure(tabItems);

  // 返回最终的选项卡 HTML 结构
  return `<div class="tabs" id="${name.toLowerCase().replace(/\s+/g, '-')}">${tabNav}${tabContent}</div>`;
}

// 注册自定义标签，以便在 Hexo 中使用
hexo.extend.tag.register('tabs', postTabs, { ends: true });
hexo.extend.tag.register('subtabs', postTabs, { ends: true });
hexo.extend.tag.register('subsubtabs', postTabs, { ends: true });

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* tab标签的链接跳转 */
.tab-to-top {
    position: relative;
    display: block;
    margin: 16px 0 0 auto;
    color: var(--efu-lighttext);
}
.tabs .nav-tabs .tab button {
  width: 100%;
  padding: 0 0.3rem;
  height: 100%;
  font-size: 14px;
}
.tabs .nav-tabs .tab.active {
  background: var(--light-grey);
}
.tabs .nav-tabs .tab.active i,
.tabs .nav-tabs .tab.active button {
  color: var(--efu-lighttext);
}
.tabs .nav-tabs .tab i {
  font-size: 14px;
  margin-right: 0.3rem;
}

在 themes/solitude/source/js/main.js 最后添加：

const initCodeBlocks = (container) => {
  const { highlight } = GLOBAL_CONFIG;
  if (!highlight?.limit) return;
  const limit = highlight.limit;
  const syntax = highlight.syntax || 'prismjs';
  const selector = syntax === 'highlight.js' 
    ? 'figure.highlight' 
    : 'pre[class*="language-"]';
  container.querySelectorAll(selector).forEach(item => {
    item.style.maxHeight = `${limit}px`;
    item.style.overflow = 'hidden';
    if (item.scrollHeight > limit + 30 && !item.querySelector('.code-expand-btn')) {
      const btn = document.createElement('div');
      btn.className = 'code-expand-btn';
      btn.innerHTML = '<i class="solitude fas fa-angles-down"></i>';
      btn.onclick = () => {
        item.style.maxHeight = 'none';
        btn.remove();
      };
      syntax === 'highlight.js'
        ? item.querySelector('table').appendChild(btn)
        : item.parentNode.insertBefore(btn, item.nextSibling);
    }
  });
};
document.addEventListener('pjax:complete', () => {
  initCodeBlocks(document);
  document.addEventListener('click', handleTabClick);
});
const handleTabClick = (e) => {
  const tab = e.target.closest('.nav-tabs [data-href]');
  if (!tab) return;
  const targetContent = document.querySelector(tab.getAttribute('data-href'));
  targetContent.classList.add('active');
  setTimeout(() => initCodeBlocks(targetContent), 50);
};

document.addEventListener('DOMContentLoaded', () => {
  initCodeBlocks(document);
  document.addEventListener('click', handleTabClick);
});

用法

{% tabs 唯一名称, [index] %}

<!-- tab [唯一Tab] [@icon] [链接] -->

任何内容（也支持内联标签）。

<!-- endtab -->

{% endtabs %}

{% tabs test, 1 %}

<!-- tab test @fas fa-book [https://test.com] -->

任何内容（也支持内联标签）。

<!-- endtab -->

{% endtabs %}

参考	原帖
外挂标签使用	伍十七

左边侧边栏，点击它可以跳转wechatOA。

修改 themes/solitude/layout/includes/widgets/aside/asideFlipCard.pug 文件：

//- 添加这一行，位于第一行
a(href="/rss/wechatOA/",data-pajx)
    .card-widget.card-platform
        #flip-wrapper
            #flip-content
                .face
                .back.face

4. 友链、留言页

效果
教程

改为点击按钮跳转页面。

修改 themes/solitude/languages/ 下所有文件：

# default.yml
link:
  banner:
    toComment: 申请/修改友链 # 修改这一行
# en.yml
link:
  banner:
    toComment: Application/Modification link
# zh-CN.yml
link:
  banner:
    toComment: 申请/修改友链
# zh-TW.yml
link:
  banner:
    toComment: 申請/修改友鏈

修改 themes/solitude/layout/includes/widgets/page/links/banner.pug 文件：

//- ...
if theme.comment.use
    //- 替换链接跳转 
    a.banner-button(onclick="window.open('https://github.com/ymxblog/friends/',' _blank')")
        i.solitude.fas.fa-circle-chevron-right
        span.solitude.banner-button-text=_p('link.banner.toComment')
//- ...

修改 themes/solitude/layout/includes/widgets/page/message/content.pug 文件：

.article-container
    != page.content
    if theme.envelope.enable
        .switch_message
            button.open(type='button' onclick="document.getElementById('barrage').classList.remove('hide')")
                span(aria-hidden='true')= __('message.open')
            button.close(type='button' onclick="document.getElementById('barrage').classList.add('hide')")
                span(aria-hidden='true')= __('message.close')
            //- 添加这两行，链接可改
            button(type='button' onclick="window.open('https://github.com/ymxblog/friends/',' _blank')")
                span(aria-hidden='true')= __('link.banner.toComment') 
        #barrage

5. waline评论计数

无法获取waline的评论数据，返回undefined，翻了一下官方文档进行修改。

修改 themes/solitude/layout/includes/widgets/sidebar/waline.pug 如下：

.length-num#waline_allcount
  i.solitude.fa-solid.fa-spinner.fa-spin

script(pjax).
  (async () => {
    await fetch('!{theme.waline.envId}/api/comment?type=count', {method: 'GET'}).then(async res => res.json())
      .then(async data => {
        document.querySelector('#waline_allcount').innerHTML = data.data
      })
  })()

原帖	作者
API-Waline	官网

6. 添加评论协议

效果
教程

评论区可看。

修改 themes/solitude/layout/includes/widgets/third-party/comments/comment.pug 如下：

//- ...

  //- 评论计数
  if count && is_post()
    span.count
      = ' ('
      each name in use
        +commentCount(name)
      | )
a.plxycss(href="/comment/")
    i.solitude.fas.fa-file-lines
    span &nbsp;评论协议

//- ...

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 评论协议样式 */
a.plxycss {
  float: right;
  font-weight: bold;
  font-size: 20px;
}

7. 添加即刻短文图片的描述

效果
教程

即刻短言可看，点效果跳转

修改 themes/solitude/layout/includes/page/brevity.pug 如下：

//- ...

if item.image
    .bber-content-img
        each img in item.image
            if typeof img === 'string'
                img(src=img, alt=item.content || "图片暂无描述")
            else
                img(src=img.url, alt=(img.alt || item.content || "图片暂无描述"))

//- ...

用法两者皆可

- content: 这次做的椰奶冻粉还不错，就是糖放多了，好吃(╯▽╰ )好香~~
  date: 2025-03-27 00:01:00
  location: 家
  image:
    - url: https://images.418121.xyz/file/blog/essay/2025/03/27/01.webp
      alt: 按着教程来的，事不过三，终于成功了
- content: 我弟弟妹妹画的，很有天赋，像我小时候一样 b(￣▽￣)d ~
  date: 2025-03-26 21:30:00
  location: 家
  image:
    - https://images.418121.xyz/file/blog/essay/2025/03/26/01.webp

8. 适配Waline文章热度

超过五条评论即可显示”多人互动“，点效果跳转。

修改 themes/solitude/layout/includes/widgets/third-party/hot/index.pug 如下：

- const { count } = theme.comment.hot_tip
- const { use } = theme.comment

if use
    case use[0]
      when 'Twikoo'
          include ./twikoo
      when 'Artalk'
          include ./artalk
      //- 添加下面两行
      when 'Waline'
          include ./waline

在 themes/solitude/layout/includes/widgets/third-party/hot/ 下添加 waline.pug 文件：

script.
  function updatePostsBasedOnComments() {
    const location = window.location.origin;
    const posts = Array.from(document.querySelectorAll('.recent-post-item[onclick] .post_cover a'))
      .map(item => item.href.replace(location, ''));
    const fetchCommentsCount = () => {
      const requests = posts.map(url => {
        return fetch(`#{theme.waline.envId}/api/comment?type=count&url=${encodeURIComponent(url)}`)
          .then(response => response.json())
          .then(data => ({
            url: url,
            count: data.errno === 0 ? data.data[0] : 0
          }));
      });
      Promise.all(requests)
        .then(handleCommentsResponse)
        .catch(error => console.error("Error fetching comments:", error));
    };
    const handleCommentsResponse = (response) => {
      response.forEach(({ url, count }) => {
        if (count > #{count}) {
          const postElement = document.querySelector(`.recent-post-item[onclick*="${url}"]`);
          if (postElement) updatePostElement(postElement);
        }
      });
    };
    const updatePostElement = (postElement) => {
      const infoTopTips = postElement.querySelector(".recent-post-info-top-tips");
      const originalSpan = infoTopTips?.querySelector(".original");
      const existingHotTip = infoTopTips?.querySelector(".hot-tip");
      if (!existingHotTip && originalSpan) {
        const hotTip = createHotTipElement();
        infoTopTips.insertBefore(hotTip, originalSpan);
      }
    };
    const createHotTipElement = () => {
      const hotTip = document.createElement("span");
      hotTip.classList.add("hot-tip");
      const icon = document.createElement("i");
      icon.classList.add("solitude", "fas", "fa-fire-flame-curved");
      hotTip.appendChild(icon);
      const commentCount = document.createTextNode("#{_p('hot-tip')}");
      hotTip.appendChild(commentCount);
      return hotTip;
    };
      fetchCommentsCount();
  }

确认功能是否开启

# ...
  # Hot comment tips
  # 热评提示
  hot_tip:
    enable: true
    # Number of hot comments
    count: 5
# ...

参考了本主题适配Twikoo的用法。

9. 魔改主题关于页

点击效果，即可跳转至关于页。

参考 anzhiyu 主题关于页进行魔改 solitude 主题关于页

修改 themes/solitude/layout/includes/widgets/page/about/hobbies.pug 如下（复制粘贴覆盖）：

- var games = site.data.about.game

if games
    .author-content
        each game, index in games
            style.
                .game-#{index}::after {
                    box-shadow: #{game.box_shadow} !important;
                }
            .author-content-item.game(class=`game-${index}`, style=`background: url(${game.img}) no-repeat top; background-size: cover;`)
                .card-content
                    .author-content-item-tips= game.title
                    span.author-content-item-title= game.subtitle
                    .content-bottom
                        if game.icon_group
                            .icon-group
                                each icon in game.icon_group
                                    i(style=`background-image: url(${icon})`)
                        else if game.tips_left
                            .tips= game.tips_left
                        if game.tips_right
                            .tips= game.tips_right

if site.data.about.likes
  - const likes = site.data.about.likes
  .author-content
    each like in likes
      if like.type === 'comic'
        .author-content-item.comic
            .card-content
            .author-content-item-tips= like.tips
            span.author-content-item-title= like.title
            .content-bottom
              if like.subtips
                .tips= like.subtips
              if like.button
                .banner-button-group
                  a.banner-button(href=url_for(like.button_link))
                    i.solitude.fas.fa-circle-chevron-right
                    span.banner-button-text= like.button_text
            .comic-box
              each item in like.list
              a.comic-item(href=item.href target="_blank", rel="noopener noreferrer", title=item.name)
                .comic-item-cover
                //- nolazyload 我感觉不用加，不加的话好像会一直请求，所以我加了，自己试试吧。
                img.nolazyload(src=item.cover, alt=item.name)

      else
        .author-content-item(class=like.type style=`background: url(${like.bg}) no-repeat center/cover`)
          .card-content
            .author-content-item-tips= like.tips
            span.author-content-item-title= like.title
            .content-bottom
              if like.subtips
                .tips= like.subtips
              if like.button
                .banner-button-group
                  a.banner-button(href=url_for(like.button_link))
                    i.solitude.fas.fa-circle-chevron-right
                    span.banner-button-text= like.button_text

修改 themes/solitude/source/css/_page/_about/like.styl 如下（复制粘贴覆盖）：

#about-page
  .author-content-item.like-technology
    background-size cover
    min-height 230px
    color var(--efu-white)
    &::after
      box-shadow 0 -69px 100px 10px #050b20 inset
      position absolute
      content ''
      width 100%
      height 100%
      top 0
      left 0

  .author-content-item.like-music
    background-size cover
    min-height 400px
    color var(--efu-white)
    overflow hidden
    &::after
      box-shadow 0 -69px 100px 10px #0e0e0e inset
      position absolute
      content ''
      width 100%
      height 100%
      top 0
      left 0

  .author-content-item.comic
    min-height 400px
    color var(--efu-white)
    position relative
    
    .comic-box
      width 110%
      height 100%
      display flex
      position absolute
      left 50%
      top 0
      transform translateX(-50%)
      &::after
        box-shadow 0 -69px 100px 10px #04120f inset
        position absolute
        content ''
        width 100%
        height 100%
        top 0
        left 0
        pointer-events: none;
    
    .author-content-item-tips,
    .author-content-item-title,
    .content-bottom
      z-index 3
      color var(--efu-white)
    
    .comic-item
      height 100%
      color var(--efu-white)
      width 20%
      transform skew(-10deg, 0deg)
      transition 0.8s
      position relative
      overflow hidden
      &:hover
        width 46%
        .comic-item-cover
          left 16%
          transform skew(10deg, 0deg) scale(1.6)

      .comic-item-cover
        position absolute
        top 0
        left -50%
        height 100%
        transform skew(10deg, 0deg)
        object-fit cover
        transition scale 0.2s, all 0.8s
        img
          height 100%
          max-width none
          transition 0.8s

  .author-content-item.comic
    .comic-box
      +maxWidth1400()
          width 120%
          height 100%      
      +maxWidth768()
          width 109%
          height 100%
      +maxWidth690()
          width 120%
          height 100%

用法：保留之前的格式，新增comic类型示例

# comic 和 like-technology 二选一 你全要也可以
likes:
  - type: "comic"
    tips: 爱好番剧 # 右上角提示
    title: 追番 # 标题
    subtips: "科幻、动漫、喜剧" # 左下小字，可不要
    list: # 最好就是五个或以上，相信你们肯定没那么少的。
      - name: 你的名字 # 动漫或影视名
        href: https://movie.douban.com/subject/26683290/ # B站或豆瓣某个位置
        cover: https://images.418121.xyz/file/blog/covers/p2910701461.webp  # 封面图
      - name: 四月是你的谎言
        href: https://www.bilibili.com/bangumi/media/md1699
        cover: https://images.418121.xyz/file/blog/covers/p2232343678.webp
      - name: 流浪地球2
        href: https://movie.douban.com/subject/35267208/
        cover: https://images.418121.xyz/file/blog/covers/p2886653882.webp
      - name: 花束般的恋爱
        href: https://movie.douban.com/subject/34874432/
        cover: https://images.418121.xyz/file/blog/covers/p2868462052.webp
      - name: 天气之子
        href: https://movie.douban.com/subject/30402296/
        cover: https://images.418121.xyz/file/blog/covers/p2558022335.webp
    button: true # false 可以关闭右边按钮
    button_link: "/pyq/"  # 跳转路径
    button_text: "观看记录"   # 按钮文字
  # - type: "like-technology"
  #   bg: "https://images.418121.xyz/file/blog/page/movie.webp"
  #   tips: "与她一起看"
  #   title: "影视偏好"
  #   subtips: "科幻、动漫、喜剧"
  #   button: true
  #   button_link: "/pyq/"
  #   button_text: "观看记录"
  - type: "like-music"
    bg: "https://images.418121.xyz/file/blog/page/yy.webp"
    tips: "粤语、流行"
    title: "私人歌单"
    subtips: "账号密码：ymx"
    button: true
    button_link: "https://music.418121.xyz/app/#/login/"
    button_text: "音乐库"

原帖	作者
关于-安知鱼	安知鱼

10. 即可短文识别Html标签（换行加粗等）

效果
教程

单击效果跳转

修改 themes/solitude/layout/includes/page/brevity.pug 文件（第19行）：
1
p.datacont!= item.content
修改 themes/solitude/layout/includes/widgets/home/bbTimeList.pug 文件（第7行）：
1
| #{item.content.replace(/<[^>]*>/g, '')}

11. 即刻短文仿微信朋友圈样式

点击效果即可跳转。

修改 themes/solitude/layout/includes/page/brevity.pug 如下：

include ../widgets/page/banner
if theme.brevity.enable
    #brevity_page
      .author-info
        .msg
          .avatar
              a.brevity-avatar(href=url_for('/about'))
                img(src=theme.aside.my_card.author.img)
          .brevity-name=theme.site.name.custom
        .desc=theme.aside.my_card.description
    #bber
        section.timeline.page-1
            ul.list.waterfall
                each item in site.data.brevity.slice(0, theme.brevity.strip)
                    li.item
                        if theme.brevity.style === 1
                            .meta
                                img.avatar(src=theme.aside.my_card.author.img)

                        #bber-content
                            .info
                                span.bber_nick= config.author
                            p.datacont!= item.content
                            if item.image
                                .bber-content-img
                                    each img in item.image
                                        if typeof img === 'string'
                                            img(src=img, alt=item.content || "图片暂无描述")
                                        else
                                            img(src=img.url, alt=(img.alt || item.content || "图片暂无描述"))

                        if item.aplayer
                            .bber-music
                                meting-js(server=item.aplayer.server type="song" id=item.aplayer.id mutex="true" preload="none" theme="var(--efu-main)" data-lrctype="0")

                        if item.video
                            .bber-video
                                if item.video.player
                                    video(src=item.video.player controls="controls" style="object-fit: cover;")
                                if item.video.bilibili
                                    iframe(src='//player.bilibili.com/player.html?autoplay=0&bvid=' + item.video.bilibili scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true")

                        if theme.brevity.style === 1
                            .bber-bottom
                                .bber-info
                                    .bber-info-time
                                        time.datetime(datetime=moment(item.date).format())
                                    if item.location
                                        .bber-info-location
                                            = item.location
                                    if item.link
                                        a.bber-content-link(href=url_for(item.link) target="_blank")
                                            i.solitude.fas.fa-link
                                            = _p('essay.link')
                                if theme.comment.use && item.content
                                    a.bber-reply(onclick=`sco.toTalk('${item.content}')`)
                                        i.solitude.fas.fa-comment
                            hr

            #bber-tips
                if theme.brevity.strip === -1
                    = _p('essay.tip0')
                else
                    = _p('essay.tip1').replace('#{count}', theme.brevity.strip)

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 魔改即刻短文样式 */
#brevity_page .author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    top: -35px;
    z-index: 3;
    margin-right: 25px;
    padding-bottom: 25px;
}

.desc {
    font-size: 16px;
    padding-bottom: 8px;
}

#brevity_page .author-info .msg {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}

#brevity_page a.brevity-avatar {
    height: 60px;
    width: 60px;
    display: block;
    border-radius: 5px;
    background: #fff;
    margin-top: -15px;
}

#brevity_page a.brevity-avatar img{
  border-radius: 5px;
}

[data-theme=dark] #brevity_page a.brevity-avatar {
    background: #ffffffad;
}

#brevity_page .brevity-name {
    margin-right: 10px;
    margin-top: -15px;
    padding-top: 2px;
    color: #eee;
    font-weight: 600;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    display: -webkit-box;
    overflow: hidden;
}

#bber {
    margin-top: -2rem;
}

#bber div#bber-content {
    position: relative;
}

#bber .bber-content-img{
  border-radius: 0;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 4px; 
}

#bber .bber-content-img a{
    overflow: hidden; 
    border-radius: 0;
    min-height: 0; 
}

#bber .bber-content-img a img,
#bber .bber-content .bber-video {
    width: 100%; 
    height: 100px;
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s;
    border-radius: 0;
}
#bber .bber-content-img a:only-child{
  grid-column: 1 / -1; 
  width: 100%;
}

#bber .bber-content-img a:only-child img {
  width: 100%;
  height: 200px;
}

#bber #bber-content .datacont {
    font-size: 18px;
    font-weight: 400;
    color: var(--font-color);
}

#bber #bber-content-img img {
    width: 100%;
}

#bber .bber-bottom {
    display: inline !important;
    padding-top: 8px;
    padding-bottom: 4px;
}

#bber>section>ul>li>div .bber-info-from,
#bber>section>ul>li>div .bber-info .bber-info-time time.datetime {
    background: 0 0;
    padding: 0;
    height: 26px;
    font-size: 13px;
    color: #808080;
}

#bber #bber-content .info span.bber_nick,
#bber .meta .avatar {
    display: none;
    color: #8eaccd;
}

.bber-reply {
    position: absolute;
    right: 15px;
    bottom: 33px;
    height: 26px;
    line-height: 26px;
}

.bber-content-link {
    font-size: 13px !important;
    position: absolute;
    right: 30px;
    line-height: 26px;
    color: var(--efu-main)!important;
    border-radius: 5px;
}

.bber-content-link i.solitude,
.bber-reply i.solitude {
    font-size: 16px !important;
}

.bber-info-location {
  color: #8eaccd !important;
  font-size: 13px !important;
  background-color: transparent !important;
  padding: 0 !important;
}

#bber .timeline ul li.item hr {
  border: 1px solid var(--efu-theme-op) !important;
}

#bber .bber-info .bber-info-time{
  background-color: transparent !important;
  padding: 0 !important;
}

div#bber-tips {
    padding-bottom: 20px;
}

@media screen and (max-width:768px),
(max-height:580px) {

    body[data-type=brevity] #bber-content {
        margin-left: 55px;
    }

    #brevity_page .author-info {
      margin-right: 10px;
    }
    .bber-reply {
      bottom: 22px;
    }

    .bber-content-link {
        right: 35px;
    }

    a.brevity-avatar {
        height: 60px;
        width: 60px;
    }

    .author-content.author-content-item.sharePage {
        height: 16rem;
        border-radius: 5px;
    }

    #bber .bber-bottom {
      margin-left: 55px;
    }

    .desc {
        font-size: 16px;
        padding-bottom: 8px;
    }

    #bber {
        margin-top: -3rem !important;
        width: 95%;
        margin: auto;
    }

    #bber .timeline ul li.item {
        width: 100%;
        padding: 0;
        border: none;
        border-radius: 0;
        background: 0 0;
        box-shadow: none;
    }

    #bber .timeline ul li.item:hover {
        border: none;
    }

    #bber #bber-content .info span.bber_nick {
        font-size: 16px;
        font-weight: 800;
        display: block;
    }

    #bber .meta .avatar {
        width: 45px;
        height: 45px;
        border-radius: 5px;
        overflow: hidden;
        position: absolute;
        display: block;
    }
    #bber .bber-music {
      width: 85%;
      margin-left: 55px;
      border: none;
      background: 0 0;
      box-shadow: none;
    }
    #bber .bber-video{
      padding: 30% 43%;
      margin-left: 55px;
    }
}

修改主题文件 _config_solitude.yml：

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="/custom/css/custom.css">


# --------------------------- start ---------------------------
# Brevity Page
# 即刻短文
brevity:
  enable: true
  home_mini: true
  music: true
  page: /essay/
  style: 1
  strip: -1
# --------------------------- end ---------------------------

原帖	作者
主题魔改-即刻短文	梦爱吃鱼

12. 恢复背景图片

效果
教程

当前主题展示

修改 themes/solitude/layout/includes/layout.pug 文件（第14行）：

body#body(data-type=page.type)
    //- 背景特效
    if theme.display_mode.universe
        +conditionalWrapper(theme.display_mode.universe)
            canvas#universe
    //- 背景图片（这里添加）
    if theme.background.enable
        #global_bg
    //- 全屏加载动画
    if theme.loading.fullpage
        +conditionalWrapper(theme.loading.fullpage)
            include ./loading.pug

修改 themes/solitude/source/css/_global/index.styl 文件最后添加：


if hexo-config('background.enable')
  #global_bg
    position fixed
    z-index 999
    opacity hexo-config('background.opacity')
    width 100%
    height 100%
    background-image url(hexo-config('background.light'))
    background-size cover
    background-position center
    pointer-events none
    background-repeat no-repeat

    [data-theme=dark] &
      background-image url(hexo-config('background.dark'))

在主题文件 _config_solitude.yml 任意处添加：

# --------------------------- start ---------------------------
# Background
# 背景图片
background:
  enable: true #是否开启
  opacity: .3 #透明度
  dark: /images/bg_d.webp #深色模式，可填入url
  light: /images/bg_l.webp #浅色模式，可填入url
# --------------------------- end ---------------------------

添加了什么

添加内容 open

1. Do you like me

右边侧边栏有显示你可以点来看看，手机不展示。

原帖	作者
为你的网站添加 Do you like me 小组件	I Am I

2. 恋爱墙

主页可以看，点效果即可跳转。

原帖	作者
侧边栏	yuang01

3. 弹幕留言板

类似于🍭Akilarの糖果屋信笺样式留言板，点效果即可跳转。

原帖	作者
信笺样式留言板	🍭Akilarの糖果屋

4. 添加建站时间置页脚

效果
教程

左边控件点评论即可到页脚。

新建 source/custom/js/jz.min.js 文件填入内容（可改）：

document.addEventListener("DOMContentLoaded",(function(){const startTime=new Date("2024-05-12T00:00:00Z");function padZero(num){return num<10?"0"+num:String(num)}function calculateElapsedTime(start){const elapsedMilliseconds=new Date-start,totalSeconds=Math.floor(elapsedMilliseconds/1e3);return{days:Math.floor(totalSeconds/86400),hours:Math.floor(totalSeconds%86400/3600),minutes:padZero(Math.floor(totalSeconds%3600/60)),seconds:padZero(totalSeconds%60)}}function updateDisplay(){const{days:days,hours:hours,minutes:minutes,seconds:seconds}=calculateElapsedTime(startTime),runtimeElement=document.getElementById("runtime");runtimeElement&&(runtimeElement.textContent=`花期：${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`),requestAnimationFrame(updateDisplay)}updateDisplay()}));

修改主题配置文件（url可改）：

# 页脚信息文字
# 请不要删除主题信息，这是对作者的尊重
links:
  - name: <span id="runtime"></span>
    url: /history/

5. 文章内插入地图

点击效果，即可跳转，如无显示请后退重新点一次。

安装插件
1
npm install hexo-tag-map --save

在想用的地方使用这外挂标签即可

插入一个混合地图的示例： {% map %}
{% + 标签值 + 经度 + 纬度 + 文本 + 缩放等级 + 宽 + 高 + 默认图层 + %}
{% map 120.101101,30.239119, 这里是西湖灵隐寺，据说求姻缘很灵验哦！, 15, 100%, 360px, 1 %}
其它地图用法请参考原帖

原帖	作者
使用Hexo-tag-map插件，给文章插入高德百度谷歌等5类9种地图	八章
关于给你的 Hexo 文章插入交互式地图吧！	kuole-o

6. 足迹图

点击效果，即可跳转。

下载zip并解压到 source/footmap/ 目录下
经过我的修改可以适配本主题，你想改可以自定义。

修改根目录 _config.yml 文件：

# ...
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' foldinger
include:
exclude:
ignore:
  - source/footmap/*  #添加这一句
#...

打开 source/footmap/data/config.json 设置数据：

[
    {
        "latLng": [22.354887,110.946866],   //为足迹的经纬度，可以通过 https://jingweidu.bmcx.com查询得到
        "name": "广东 · 茂名 · 信宜",   //足迹地点的名称
        "articleUrl": "/posts/63e1fc9e.html",   //文章地址
        "desc": "老家", //足迹地点的描述， \n 为换行符
        "photos":[
            "https://photo.tuchong.com/20342439/f/1276790136.jpg",
            "https://photo.tuchong.com/20342439/f/712590584.jpg",
            "https://photo.tuchong.com/20342439/f/888292716.jpg",
            "https://photo.tuchong.com/20342439/f/1184318812.jpg"
        ],  //足迹地点的照片链接，为一组图片 url 数据
        "freq": 2   //足迹地点的到访次数，范围为 [1, 10]
    } // 写下一个的时候记得加逗号，最后一个不要加。
]

蓝奏云

密码：dtm5

原帖	作者
给自己做一个旅行地图吧（2.0升级版）	扶苏

7. 订阅页面

点击效果，即可跳转。

新建 source/rss/index.md 文件，在文件内输入内容（按需修改）：

---
title: 订阅本站
date: 2024-11-16 23:10:28
update: 2024-11-17 02:21:48
desc: 推送全部文章推送简介
container: true
---
<center><h1>订阅本站</h1></center>
<p style="text-align: right;">最新更新时间为：2024-11-27</p>
<br>
<div class="rss-plan-list"><a class="rss-plan-item rss-plan-wechat" href="./wechatOA/" title="公众号" target="_blank">
        <div class="rss-plan-description">推送精选文章<br>推送全文</div>
        <div class="rss-plan-info-group">
            <div class="rss-plan-title">公众号订阅</div>
            <div class="rss-plan-info">推荐的订阅方式</div><img class="rss-plan-icon no-lightbox entered loaded"
                src="https://images.418121.xyz/file/blog/page/wechat.webp" data-lazy-src="https://images.418121.xyz/file/blog/page/wechat.webp"
                data-ll-status="loaded">
        </div>
    </a><a class="rss-plan-item rss-plan-mail" title="邮箱订阅" href="https://github.com/yeminxi/Friend-Circle-Lite/issues/new?assignees=&labels=&projects=&template=%E9%82%AE%E7%AE%B1%E8%AE%A2%E9%98%85.md&title=%5B%E9%82%AE%E7%AE%B1%E8%AE%A2%E9%98%85%5D" target="_blank">
        <div class="rss-plan-description">推送全部文章<br>更新推送简介</div>
        <div class="rss-plan-info-group">
            <div class="rss-plan-title">邮件订阅</div>
            <div class="rss-plan-info">推荐的订阅方式</div><img class="rss-plan-icon no-lightbox entered loaded"
                src="https://images.418121.xyz/file/blog/page/mail.webp" data-lazy-src="https://images.418121.xyz/file/blog/page/mail.webp"
                data-ll-status="loaded">
        </div>
    </a><a class="rss-plan-item rss-plan-rss" href="/rss2.xml" title="rss" target="_blank">
        <div class="rss-plan-description">推送全部文章<br>推送简介</div>
        <div class="rss-plan-info-group">
            <div class="rss-plan-title">RSS</div>
            <div class="rss-plan-info">备用订阅方式</div><img class="rss-plan-icon no-lightbox entered loaded"
                src="https://images.418121.xyz/file/blog/page/rss.webp" data-lazy-src="https://images.418121.xyz/file/blog/page/rss.webp"
                data-ll-status="loaded">
        </div>
    </a></div>

# 订阅本站
首先感谢你对本站的文章产生一些兴趣，本站的主要内容风格为日常及教程分享、电脑骚操作，如果你对这方面内容感兴趣，欢迎关注。
## 全部文章订阅方式
### 1. 公众号订阅
公众号订阅可以收到我觉得有价值，很重要，比较精彩的文章。这些文章将通过微信公众号发送。并不是所有博客文章都会发到公众号中。建议所有用户订阅。
### 2. RSS订阅（文章摘要）
你可以使用第三方RSS客户端接收到博客的文章摘要通知。
[https://blog.418121.xyz/atom.xml](https://blog.418121.xyz/atom.xml)
[https://blog.418121.xyz/rss2.xml](https://blog.418121.xyz/rss2.xml)
{% link ATOM,订阅链接,https://blog.418121.xyz/atom.xml %}
{% link RSS,订阅链接,https://blog.418121.xyz/rss2.xml %}
### 3. Follow订阅
你可以使用[Follow客户端](https://follow.is/)接收到博客的文章通知。
{% link Follow,订阅链接,https://app.follow.is/share/users/yeminxi %}
### 4. 邮箱订阅
* 如果你更喜欢通过邮箱接收更新，本站提供了邮箱订阅功能。此功能通过[Friend Circle Lite](https://github.com/willow-god/Friend-Circle-Lite)支持。只需简单的填写你的邮箱提交到GitHub Issue，即可开始接收本站的更新邮件，可以通过删除issue进行取消订阅！
    1. 访问 [GitHub Issue](https://github.com/yeminxi/Friend-Circle-Lite/issues/new?assignees=&labels=&projects=&template=%E9%82%AE%E7%AE%B1%E8%AE%A2%E9%98%85.md&title=%5B%E9%82%AE%E7%AE%B1%E8%AE%A2%E9%98%85%5D) 页面。
    2. 填写你的邮箱信息。
    3. 提交 Issue，即可完成订阅！
* 期待与你的互动！如果你有任何问题或建议，欢迎随时联系我。
## 邮箱订阅功能提供鸣谢：
{% link 清羽飞扬,柳影曳曳，清酒孤灯，扬笔撒墨，心境如霜,https://blog.liushen.fun/ %}
## 本站是如何维持的
做公众号是为了保护文章版权，因为发布在个人博客站点对于版权保护能力比较弱，所以发在公众号并且标记为原创可以对文章版权有很好的保护。

新建 source/rss/wechatOA/index.md 文件，在文件内输入内容（按需修改）：

---
layout: false
---
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>关注「叶泯希」微信公众号</title>
        <link rel="icon" type="image/x-icon" href="/favicon.ico">
        <meta name="apple-mobile-web-app-title" content="叶泯希">
        <link rel="bookmark" href="/favicon.ico">
        <meta name="description" content="关注叶泯希信公众号，获取更多最新内容。">
        <meta name="theme-color" content="#f6f7f8">
        <style>
            body {
                background: #f6f7f8;
                margin: 0;
                padding: 0
            }
            .wechatOA {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                height: var(--vh)
            }
            .wechat-card {
                background: #fff;
                max-width: 428px;
                max-height: 569px;
                border-radius: 16px;
                padding: 24px 36px 20px 36px;
                display: flex;
                flex-direction: column;
                margin: auto;
                align-items: center
            }
            .qrcode {
                width: 256px;
                height: 256px;
                display: flex
            }
            .tips {
                font-size: 14px;
                color: #000;
                opacity: .5;
                margin-top: 8px
            }
            .wechatOA-card {
                width: 100%;
                display: flex;
                margin-top: 16px;
                background: #f7f7f7;
                padding: 18px;
                border-radius: 16px;
                align-items: center
            }
            .wechatOA-head {
                width: 48px;
                height: 48px;
                background-image: url(/images/avatar.webp);
                border-radius: 68px;
                background-size: contain;
                margin-right: 16px
            }
            .wechatOA-name {
                font-weight: 700;
                color: #000;
            }
            .wechatOA-description {
                font-size: 12px;
                color: #000;
                opacity: .5
            }
            a.help {
                font-size: 14px;
                color: #000;
                opacity: .5;
                text-decoration: none;
                margin: 20px 0
            }
            a.help:visited {
                color: #000
            }
        </style>
    </head>
    <body>
        <div class="wechatOA">
            <div class="wechat-card">
                <img src="gzh.webp" class="qrcode" alt="">
                <div class="tips">扫描二维码关注公众号</div>
                <div class="wechatOA-card">
                    <div class="wechatOA-head"></div>
                    <div class="wechatOA-info">
                        <div class="wechatOA-name">叶泯希</div>
                        <div class="wechatOA-description">意义是自己赐予的</div>
                    </div>
                </div>
            </div>
            <a class="help" href="https://kf.qq.com/touch/wxappfaq/1208117b2mai141113jaqAnU.html?platform=14" title="帮助" target="_blank">不会扫码？</a>
        </div>
        <script>
            const vh = 1 * window.innerHeight;
            document.documentElement.style.setProperty("--vh", `${vh}px`),
            window.addEventListener("resize", (()=>{
                let e = 1 * window.innerHeight;
                document.documentElement.style.setProperty("--vh", `${e}px`)
            }
            ))
        </script>
    </body>
</html>

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 卡片订阅样式 */
#post .tag_share + #follow {
  margin-top: 40px;
}
.rss-plan-list {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -4px;
  position: relative;
  justify-content: space-between;
}
.rss-plan-list a {
  border-bottom: none;
  border-radius: 12px;
}
.rss-plan-item:visited {
  color: var(--efu-white);
}
.rss-plan-item.rss-plan-wechat {
  background: #27c125;
}
.rss-plan-item.rss-plan-mail {
  background: var(--efu-blue);
}
.rss-plan-item.rss-plan-rss {
  background: var(--efu-orange);
}
.rss-plan-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 240px;
  height: 240px;
  margin: 6px 0;
  overflow: hidden;
  text-decoration: none;
  width: calc(100% / 3 - 8px);
  filter: brightness(1);
  transition: .3s;
  border: var(--style-border);
  box-shadow: var(--efu-shadow-border);
}
.rss-plan-item:hover {
  filter: brightness(1.1)
}
@media screen and (max-width: 1024px) {
  .rss-plan-item {
      width:calc(100% / 2 - 4px)
  }
  .rss-plan-item:first-child {
      width: 100%
  }
}
@media screen and (max-width: 768px) {
  .rss-plan-item {
      width:100%
  }
}

/* 卡片大小 */
.rss-plan-description {
  font-size: 16px;
  color: var(--efu-white);
  margin: 26px 0 0 30px;
  line-height: 20px;
}
.rss-plan-info-group {
  position: relative;
  margin: 0 0 26px 30px;
  color: var(--efu-white);
}
.rss-plan-title {
  font-size: 36px;
  font-weight: 700;
  width: fit-content;
  line-height: 1;
}
.rss-plan-info {
  width: fit-content;
  opacity: .6;
}
img.rss-plan-icon {
  position: absolute;
  bottom: -50px;
  right: -20px;
  height: 140px;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -moz-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -o-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -ms-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  transform-origin: bottom right;
  filter: blur(8px);
  opacity: .6;
}
.rss-plan-item:hover img.rss-plan-icon {
  bottom: -40px;
  right: -10px;
  filter: blur(0);
  opacity: 1
}
.rss-plan-item:hover {
  text-decoration: none !important;
}

参考	原帖
如果你喜欢本站内容，欢迎订阅！	Liushen
订阅本站与运营模式	张洪Heo

8. 重构404页

点击效果，即可跳转。

新建 source/404.md 文件，在文件内输入以下内容：

---
layout: false
---
<script src="//cdn.dnpw.org/404/v1.min.js" maincolor="#000" jumptime="-1" jumptarget="/" tips="404" error="" charset="utf-8"></script>

修改主题配置文件

# Page default settings
# 页面默认设置
page:
  # 404 page
  # 404 页面
  error: false

原帖	作者
小代码，大公益	域名公益

9. 自定义link标签

叶泯希

主页

新建 themes/solitude/scripts/tags/link.js 文件，在文件内输入内容：

'use strict';

const { parse } = require('psl');
// 定义不同域名对应的头像URL
const avatarMap = new Map([
  ['418121.xyz', '/images/avatar.webp'],
  ['github.com', 'https://images.418121.xyz/file/blog/page/git.webp']
]);

// 定义白名单域名
const whitelist = new Set([
  '418121.xyz',
  'yeminxi.github.io'
]);
// 获取URL的根域名
function getRootDomain(url) {
  try {
    const hostname = new URL(url).hostname;
    const parsed = parse(hostname);
    return parsed.domain || hostname;
  } catch {
    return url.split('/')[0]; // Fallback
  }
}

function link(args) {
  try {
    // 参数解析（支持转义逗号）
    const parsedArgs = args.join(' ')
      .split(/(?<!\\),/)
      .map(s => s.replace(/\\,/g, ',').trim());

    const [title = '', sitename = '', rawLink = ''] = parsedArgs;
    const link = rawLink.startsWith('http') ? rawLink : `https://${rawLink}`;

    // 域名处理
    const rootDomain = getRootDomain(link);
    const imgUrl = avatarMap.get(rootDomain) || 
                  `https://api.xinac.net/icon/?url=${encodeURIComponent(rootDomain)}`; //使用api获取网站的ico

    // 白名单校验
    const isSafe = whitelist.has(rootDomain) || rootDomain.endsWith('.418121.xyz');
    const tipMessage = isSafe 
      ? '🛡️ 来自本站地址，本站可确保其安全性，请放心点击跳转'
      : '⚠️ 引用站外地址，不保证站点的可用性和安全性，慎重点';

    return `
<div class="liushen-tag-link">
  <a class="tag-Link" target="_blank" rel="noopener" href="${link}">
    <div class="tag-link-tips">${tipMessage}</div>
    <div class="tag-link-bottom">
      <div class="tag-link-left" 
          style="background-image: url(${imgUrl})"
          onerror="this.style.backgroundImage='url(/images/default-avatar.webp)'"></div>
      <div class="tag-link-right">
        <div class="tag-link-title">${hexo.extend.helper.get('escape_html')(title)}</div>
        <div class="tag-link-sitename">${hexo.extend.helper.get('escape_html')(sitename)}</div>
      </div>
      <i class="fa-solid fa-angle-right"></i>
    </div>
  </a>
</div>`;
  } catch (error) {
    console.error('Link tag error:', error);
    return `<div class="liushen-error">链接卡片生成失败：${error.message}</div>`;
  }
}

hexo.extend.tag.register('link', link, { ends: false });

新建 themes/solitude/source/css/_tags/link.styl 文件，在文件内输入内容：

#content-inner
  .tag-Link
    background var(--efu-secondbg)
    border-radius 12px !important
    display flex
    border 1px solid var(--style-border)
    flex-direction column
    padding 0.5rem 1rem
    margin-top 1rem
    text-decoration none !important
    color var(--efu-fontcolor)
    margin-bottom 10px
    transition background-color 0.3s, border-color 0.3s, box-shadow 0.3s

    &:hover
      border-color var(--style-border-hover)
      background-color var(--efu-main)
      box-shadow 0 0 5px rgba(0, 0, 0, 0.2)

    .tag-link-tips
      color var(--efu-fontcolor)
      border-bottom 1px solid var(--efu-gray)
      padding-bottom 4px
      font-size 0.6rem
      font-weight normal

    .tag-link-bottom
      display flex
      margin-top 0.5rem
      align-items center
      justify-content space-around

      .tag-link-left
        width 60px
        min-width 60px
        height 60px
        background-size cover
        border-radius 25%
        background-color var(--efu-card-bg)

      .tag-link-right
        margin-left 1rem

        .tag-link-title
          font-size 1rem
          line-height 1.2

        .tag-link-sitename
          font-size 0.7rem
          color var(--efu-fontcolor)
          font-weight normal
          margin-top 4px
          transition color 0.3s

        &:hover .tag-link-sitename
          color var(--efu-main)

      i
        margin-left auto
        color: var(--efu-fontcolor)

用法
1
{% link 标题,描述,链接 %}

原帖	作者
魔改笔记七：分类条及外链卡片	LiuShen

10. 安全跳转页面

百度

效果展示

安装

1 2	npm install cheerio --save npm install hexo-safego --save

在 Hexo 根目录 _config.yml 文件中添加以下内容：

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  general:                        # 基本功能设置
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 从新窗口打开跳转页面
  security:                     # 安全设置
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 结构
      - 'data-fancybox'
  scope:                        # 容器与页面设置
    apply_containers:           # 应用的容器选择器
      - '#post'
    apply_pages:                # 应用的页面路径
      - "/posts/"
    exclude_pages:              # 排除的页面路径
  whitelist:                    # 域名白名单
    domain_whitelist:           # 允许的白名单域名，通过字符串匹配实现
      - "yeminixi.github.io"
      - "418121.xyz"
  appearance:                   # 页面外观设置
    avatar: ./images/avatar.webp    # 跳转页面头像路径
    title: "叶泯希"            # 跳转页面标题
    subtitle: "安全中心提示你不要乱点，它与本站不存在法律裙带关系ヽ（≧□≦）ノ"         # 跳转页面副标题
    darkmode: false             # 是否启用深色模式
    countdowntime: -1           # 跳转页面倒计时秒数，如果设置为负数则为不自动跳转
  debug:                        # 调试设置
    enable: false               # 启用调试模式

原帖	作者
安全跳转页面·插件版	LiuShen

11. Waline评论链接安全跳转

点击效果，即可跳转，下面有链接点点看。

在你 Github 中 Fork 的 Waline 仓库下修改 index.cjs 文件内容如下：

const Application = require('@waline/vercel');
const LinkInterceptor = require('waline-link-interceptor'); // 添加这一行

module.exports = Application({
  forbiddenWords: ['唱跳', 'rap篮球'], //词汇限制
  disallowIPList: ['8.8.8.8', '4.4.4.4'],//黑名单IP
  plugins: [
    LinkInterceptor({
      whiteList: [
        'yeminxi.github.io',
        '418121.xyz'
      ],
      // blackList: [],
      // interceptorTemplate: `hello __URL__ `,   // 如果下面自定义了跳转地址，那么此处模板不生效
      redirectUrl: "https://blog.418121.xyz/go.html", // 填写中间页的具体 html 地址。
      encodeFunc: (url) =>{
        return "u="+Buffer.from(url).toString('base64');                               // 填入一个外链 url 的处理函数
      }
    })
  ],
  async postSave(comment) {
    // do what ever you want after comment saved
  },
});

修改 package.json 文件：

{
  "name": "template",
  "version": "1.32.3",
  "private": true,
  "dependencies": {
    "@waline/vercel": "latest",
    "waline-link-interceptor": "^0.1.2" //添加这一句
  }
}

原帖	作者
Hexo 博客与 Waline 评论区实现外链跳转中间页	wuanqin

12. 添加统计页面

点击效果，即可跳转。

新建 **themes/solitude/sscripts/helper/charts.js 文件：

const cheerio = require('cheerio')
const moment = require('moment')

hexo.extend.filter.register('after_render:html', function (locals) {
  const $ = cheerio.load(locals)
  const post = $('#posts-chart')
  const tag = $('#tags-chart')
  const category = $('#categories-chart')
  const htmlEncode = false

  if (post.length > 0 || tag.length > 0 || category.length > 0) {
    if (post.length > 0 && $('#postsChart').length === 0) {
      if (post.attr('data-encode') === 'true') htmlEncode = true
      post.after(postsChart(post.attr('data-start')))
    }
    if (tag.length > 0 && $('#tagsChart').length === 0) {
      if (tag.attr('data-encode') === 'true') htmlEncode = true
      tag.after(tagsChart(tag.attr('data-length')))
    }
    if (category.length > 0 && $('#categoriesChart').length === 0) {
      if (category.attr('data-encode') === 'true') htmlEncode = true
      category.after(categoriesChart(category.attr('data-parent')))
    }

    if (htmlEncode) {
      return $.root().html().replace(/&amp;#/g, '&#')
    } else {
      return $.root().html()
    }
  } else {
    return locals
  }
}, 15)

function postsChart (startMonth) {
  const startDate = moment(startMonth || '2020-01')
  const endDate = moment()

  const monthMap = new Map()
  const dayTime = 3600 * 24 * 1000
  for (let time = startDate; time <= endDate; time += dayTime) {
    const month = moment(time).format('YYYY-MM')
    if (!monthMap.has(month)) {
      monthMap.set(month, 0)
    }
  }
  hexo.locals.get('posts').forEach(function (post) {
    const month = post.date.format('YYYY-MM')
    if (monthMap.has(month)) {
      monthMap.set(month, monthMap.get(month) + 1)
    }
  })
  const monthArr = JSON.stringify([...monthMap.keys()])
  const monthValueArr = JSON.stringify([...monthMap.values()])

  return `
  <script id="postsChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var postsChart = echarts.init(document.getElementById('posts-chart'), 'light');
    var postsOption = {
      title: {
        text: '文章发布统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        name: '日期',
        type: 'category',
        boundaryGap: false,
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        },
        data: ${monthArr}
      },
      yAxis: {
        name: '文章篇数',
        type: 'value',
        nameTextStyle: {
          color: color
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        }
      },
      series: [{
        name: '文章篇数',
        type: 'line',
        smooth: true,
        lineStyle: {
            width: 0
        },
        showSymbol: false,
        itemStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        areaStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          }, {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        data: ${monthValueArr},
        markLine: {
          data: [{
            name: '平均值',
            type: 'average',
            label: {
              color: color
            }
          }]
        }
      }]
    };
    postsChart.setOption(postsOption);
    window.addEventListener('resize', () => { 
      postsChart.resize();
    });
    postsChart.on('click', 'series', (event) => {
      if (event.componentType === 'series') window.location.href = '/archives/' + event.name.replace('-', '/');
    });
  </script>`
}

function tagsChart (len) {
  const tagArr = []
  hexo.locals.get('tags').map(function (tag) {
    tagArr.push({ name: tag.name, value: tag.length, path: tag.path })
  })
  tagArr.sort((a, b) => { return b.value - a.value })

  const dataLength = Math.min(tagArr.length, len) || tagArr.length
  const tagNameArr = []
  for (let i = 0; i < dataLength; i++) {
    tagNameArr.push(tagArr[i].name)
  }
  const tagNameArrJson = JSON.stringify(tagNameArr)
  const tagArrJson = JSON.stringify(tagArr)

  return `
  <script id="tagsChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var tagsChart = echarts.init(document.getElementById('tags-chart'), 'light');
    var tagsOption = {
      title: {
        text: 'Top ${dataLength} 标签统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      tooltip: {},
      xAxis: {
        name: '标签',
        type: 'category',
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color,
          interval: 0
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        },
        data: ${tagNameArrJson}
      },
      yAxis: {
        name: '文章篇数',
        type: 'value',
        splitLine: {
          show: false
        },
        nameTextStyle: {
          color: color
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: color
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color
          }
        }
      },
      series: [{
        name: '文章篇数',
        type: 'bar',
        data: ${tagArrJson},
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgba(1, 191, 236)'
          }])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(128, 255, 195)'
            },
            {
              offset: 1,
              color: 'rgba(1, 211, 255)'
            }])
          }
        },
        markLine: {
          data: [{
            name: '平均值',
            type: 'average',
            label: {
              color: color
            }
          }]
        }
      }]
    };
    tagsChart.setOption(tagsOption);
    window.addEventListener('resize', () => { 
      tagsChart.resize();
    });
    tagsChart.on('click', 'series', (event) => {
      if(event.data.path) window.location.href = '/' + event.data.path;
    });
  </script>`
}

function categoriesChart (dataParent) {
  const categoryArr = []
  let categoryParentFlag = false
  hexo.locals.get('categories').map(function (category) {
    if (category.parent) categoryParentFlag = true
    categoryArr.push({
      name: category.name,
      value: category.length,
      path: category.path,
      id: category._id,
      parentId: category.parent || '0'
    })
  })
  categoryParentFlag = categoryParentFlag && dataParent === 'true'
  categoryArr.sort((a, b) => { return b.value - a.value })
  function translateListToTree (data, parent) {
    let tree = []
    let temp
    data.forEach((item, index) => {
      if (data[index].parentId == parent) {
        let obj = data[index];
        temp = translateListToTree(data, data[index].id);
        if (temp.length > 0) {
          obj.children = temp
        }
        if (tree.indexOf())
          tree.push(obj)
      }
    })
    return tree
  }
  const categoryNameJson = JSON.stringify(categoryArr.map(function (category) { return category.name }))
  const categoryArrJson = JSON.stringify(categoryArr)
  const categoryArrParentJson = JSON.stringify(translateListToTree(categoryArr, '0'))

  return `
  <script id="categoriesChart">
    var color = document.documentElement.getAttribute('data-theme') === 'light' ? '#4c4948' : 'rgba(255,255,255,0.7)'
    var categoriesChart = echarts.init(document.getElementById('categories-chart'), 'light');
    var categoryParentFlag = ${categoryParentFlag}
    var categoriesOption = {
      title: {
        text: '文章分类统计图',
        x: 'center',
        textStyle: {
          color: color
        }
      },
      legend: {
        top: 'bottom',
        data: ${categoryNameJson},
        textStyle: {
          color: color
        }
      },
      tooltip: {
        trigger: 'item'
      },
      series: []
    };
    categoriesOption.series.push(
      categoryParentFlag ? 
      {
        nodeClick :false,
        name: '文章篇数',
        type: 'sunburst',
        radius: ['15%', '90%'],
        center: ['50%', '55%'],
        sort: 'desc',
        data: ${categoryArrParentJson},
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2,
          emphasis: {
            focus: 'ancestor',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        }
      }
      :
      {
        name: '文章篇数',
        type: 'pie',
        radius: [30, 80],
        roseType: 'area',
        label: {
          color: color,
          formatter: '{b} : {c} ({d}%)'
        },
        data: ${categoryArrJson},
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        }
      }
    )
    categoriesChart.setOption(categoriesOption);
    window.addEventListener('resize', () => { 
      categoriesChart.resize();
    });
    categoriesChart.on('click', 'series', (event) => {
      if(event.data.path) window.location.href = '/' + event.data.path;
    });
  </script>`
}

修改主题配置文件

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <script src="https://npm.elemecdn.com/echarts@4.9.0/dist/echarts.min.js"></script>

用法，在任意位置插入（记得开启 container: true ）：

<!-- 文章发布时间统计图 -->
<div id="posts-chart" data-start="2021-01" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
<!-- 文章标签统计图 -->
<div id="tags-chart" data-length="10" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
<!-- 文章分类统计图 -->
<div id="categories-chart" data-parent="true" style="border-radius: 8px; height: 300px; padding: 10px;"></div>

原帖	作者
关于本站｜Solitude主题魔改内容	❖星港◎Star☆

13. 页面预加载

打开浏览器开发者模式切换到网络，然后找个本站页面把鼠标放上去，会进行预加载。

修改主题配置文件

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <script src="//instant.page/5.2.0" type="module"></script>

原帖	作者
使您网站的页面即时在 1 分钟内并显着提高您的转化率	Alexandre Dieulot

14. Vercel 加速

你觉得访问本站快吗，所见即所得。

在 source/ 目录下新建一个 vercel.json 文件，在文件内输入以下内容：

{
    "headers": [
      {
        "source": "/sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=0, must-revalidate"
          }
        ]
      },
      {
        "source": "(.*)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, s-maxage=86400, max-age=86400"
          }, {
            "key": "Vercel-CDN-Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ]
  }

原帖	作者
Vercel 加速，快，不止更快	Mystic Stars

15. 友链状态检测

点击效果，即可跳转。

这里只讲前端配置，完整教程请看参考。

动态获取json，适配 solitude主题 的方法，根目录下新建 link.js 文件输入以下内容：

const fs = require('node:fs');
const https = require('node:https');

const dataUrl = 'https://cdn.418121.xyz/links/active.json'; // 替换成你的数据来源的URL
const outputFilePath = './source/friend.json'; // 替换成你想要保存json文件的路径
const forbiddenNames = [
  'Hexo',
  '开往-友链接力',
  '笔墨迹BLOGS·CN',
  '博客录boke.lu',
  '博友圈',
  '集博栈',
  '博客圈',
  '叶泯希-',
  '叶泯希~',
  '博客驿站',
  '十年之约',
  '个站商店',
  'BlogFinder'
]; // 想要禁止的name，可以修改

function generateFriendJson(dataUrl, outputFilePath, forbiddenNames) {
  https.get(dataUrl, (response) => {
    let data = '';

    // 检查响应状态
    if (response.statusCode !== 200) {
      console.error(`请求失败，状态码: ${response.statusCode}`);
      return;
    }

    // 监听数据块
    response.on('data', (chunk) => {
      data += chunk;
    });

    // 完成请求
    response.on('end', () => {
      try {
        const jsonData = JSON.parse(data);
        
        const friends = [];
        console.log("获取的数据:", jsonData); // 输出获取的数据以确认结构
        
        jsonData.content.forEach(item => {
          // 打印每个 item 的名字，看是否在 forbiddenNames 中
          console.log(`正在处理: ${item.title}`);
          if (!forbiddenNames.includes(item.title)) {
            friends.push({
              name: item.title,
              link: item.link,
              avatar: item.avatar
            });
          } else {
            console.log(`禁用项: ${item.title}`); // 如果是禁用项，打印提示
          }
        });

        // 根据规定的格式构建 JSON 数据
        const friendData = { friends: friends.map(item => [item.name, item.link, item.avatar]) };

        // 将 JSON 对象转换为字符串
        const friendJSON = JSON.stringify(friendData, null, 2);

        // 写入 friend.json 文件
        fs.writeFileSync(outputFilePath, friendJSON);
        console.log(`创建文件成功 friend.json at ${outputFilePath}`);
        
      } catch (error) {
        console.error('解析数据失败:', error);
      }
    });
  }).on('error', (error) => {
    console.error('请求错误:', error);
  });
}

// 调用函数生成 JSON 文件
generateFriendJson(dataUrl, outputFilePath, forbiddenNames);

使用命令生成 friend.json
1
node link.js

我使用 Github Action 构建站点，在前面加上：

- name: 安装依赖
  if: steps.cache.outputs.cache-hit != 'true'
  run: |
    npm install gulp-cli -g #全局安装gulp
    npm install --save
    npm install yamljs --save   //加入这一句

- name: 更新友链朋友圈
  run: |
    node link.js    //加入这一句
    node links.js
    node autolinks.js

在友链的页面 /links/index.md 添加以下内容：

---
title: 友情链接
date: 2024-11-17 06:08:33
type: links
desc: 与数百名博主共同进步
data: links
banner: true
comment: false
---
<style>
    .status-tag {
        position: absolute;
        bottom: 0px;
        right: 0px;
        padding: 3px 8px;
        border-radius: 12px 0px 12px 0px;
        font-size: 12px;
        color: white;
        font-weight: bold;
        transition: font-size 0.3s ease-out, width 0.3s ease-out, opacity 0.3s ease-out;
    }
    .flink-list-item:hover .status-tag {
        font-size: 0px;
        opacity: 0;
    }
    /* 固态颜色 */
    .status-tag-green {
        background-color: #005E00; /* 绿色 */
    }
    .status-tag-light-yellow {
        background-color: #FED101; /* 浅黄色 */
    }
    .status-tag-dark-yellow {
        background-color: #F0B606; /* 深黄色 */
    }
    .status-tag-red {
        background-color: #B90000; /* 红色 */
    }
</style>
<script>
function addStatusTagsWithCache(jsonUrl) {
    const cacheKey = "statusTagsData";
    const cacheExpirationTime = 30 * 60 * 1000; // 半小时
    function applyStatusTags(data) {
        const linkStatus = data.link_status;
        document.querySelectorAll('.cf-friends-link').forEach(card => { // 一定要注意这里的类名，小心匹配不上
            if (!card.href) return;
            const link = card.href.replace(/\/$/, '');
            const statusTag = document.createElement('div');
            statusTag.classList.add('status-tag');
            let matched = false;
            // 查找链接状态
            const status = linkStatus.find(item => item.link.replace(/\/$/, '') === link);
            if (status) {
                let latencyText = '未知';
                let className = 'status-tag-red'; // 默认红色
                if (status.latency === -1) {
                    latencyText = '未知';
                } else {
                    latencyText = status.latency.toFixed(2) + ' s';
                    if (status.latency <= 2) {
                        className = 'status-tag-green';
                    } else if (status.latency <= 5) {
                        className = 'status-tag-light-yellow';
                    } else if (status.latency <= 10) {
                        className = 'status-tag-dark-yellow';
                    }
                }
                statusTag.textContent = latencyText;
                statusTag.classList.add(className);
                matched = true;
            }
            if (matched) {
                card.style.position = 'relative';
                card.appendChild(statusTag);
            }
        });
    }
    function fetchDataAndUpdateUI() {
        fetch(jsonUrl)
            .then(response => response.json())
            .then(data => {
                applyStatusTags(data);
                const cacheData = {
                    data: data,
                    timestamp: Date.now()
                };
                localStorage.setItem(cacheKey, JSON.stringify(cacheData));
            })
            .catch(error => console.error('Error fetching test-flink result.json:', error));
    }
    const cachedData = localStorage.getItem(cacheKey);
    if (cachedData) {
        const { data, timestamp } = JSON.parse(cachedData);
        if (Date.now() - timestamp < cacheExpirationTime) {
            applyStatusTags(data);
            return;
        }
    }
    fetchDataAndUpdateUI();
}
setTimeout(() => {
    addStatusTagsWithCache('https://check.api.418121.xyz/result.json');
}, 0);
</script>

原帖	作者
Github Action实现友链状态检测	LiuShen

16. 朋友圈

点击效果，即可跳转，往下拖到最后。

这里只讲前端配置，完整教程请看参考。

动态获取json，适配 solitude主题 的方法，根目录下新建 links.js 文件输入以下内容：

const fs = require('fs');
const https = require('https');

const dataUrl = 'https://cdn.418121.xyz/links/active.json'; // 替换成你的数据来源的URL
const outputFilePath = './source/flink_count.json'; // 替换成你想要保存json文件的路径

function generateLinkCountJson(dataUrl, outputFilePath) {
  https.get(dataUrl, (response) => {
    let data = '';

    // 检查响应状态
    if (response.statusCode !== 200) {
      console.error(`请求失败，状态码: ${response.statusCode}`);
      return;
    }

    // 监听数据块
    response.on('data', (chunk) => {
      data += chunk;
    });

    // 完成请求
    response.on('end', () => {
      try {
        const jsonData = JSON.parse(data);
        
        if (!Array.isArray(jsonData.content)) {
          console.error("错误: JSON 文件中没有有效的 content 数组");
          return;
        }

        const ls = [];
        console.log(`链接列表条目数: ${jsonData.content.length}`);

        for (const item of jsonData.content) {
          console.log(`正在处理链接: ${item.title}`);
          ls.push({
            name: item.title,
            link: item.link,
            avatar: item.avatar || '',
            descr: item.descr || '无描述',
            topimg: item.topimg || null
          });
        }

        // 计数
        const length = ls.length;
        console.log(`总链接数: ${length}`);

        // 将结果写入到 JSON 文件中
        fs.writeFileSync(outputFilePath, JSON.stringify({ link_list: ls, length: length }, null, 2));
        console.log(`创建文件成功 flink_count.json at ${outputFilePath}`);
        
      } catch (error) {
        console.error('解析数据失败:', error);
      }
    });
  }).on('error', (error) => {
    console.error('请求错误:', error);
  });
}

// 调用函数生成 JSON 文件
generateLinkCountJson(dataUrl, outputFilePath);

使用命令生成 flink_count.json
1
node links.js

我使用 Github Action 构建站点，在前面加上：

- name: 安装依赖
  if: steps.cache.outputs.cache-hit != 'true'
  run: |
    npm install gulp-cli -g #全局安装gulp
    npm install --save
    npm install yamljs --save   //加入这一句

- name: 更新友链朋友圈
  run: |
    node link.js    
    node links.js   //加入这一句
    node autolinks.js

在友链的页面 /pyq/index.md 添加以下内容：

---
title: 朋友圈
date: 2024-11-17 06:08:33
type: banner
container: true
---
<div id="friend-circle-lite-root"></div>
<script>
    if (typeof UserConfig === 'undefined') {
        var UserConfig = {
            // 填写你的fc Lite地址
            private_api_url: 'https://fc.api.418121.xyz/',
            // 点击加载更多时，一次最多加载几篇文章，默认20
            page_turning_number: 20,
            // 头像加载失败时，默认头像地址
            error_img: 'https://api.vvhan.com/api/avatar/niche',
        }
    }
</script>
<link rel="stylesheet" href="https://fc.api.418121.xyz/main/fclite.css">
<script src="https://fc.api.418121.xyz/main/fclite.js">//https://cdn.jsdelivr.net/gh/yeminxi/Friend-Circle-Lite/main/fclite.js
</script>

原帖	作者
Friend-Circle-Lite:轻量友链朋友圈	LiuShen

17. 动态友链结合友链状态检测及朋友圈

https://github.com/ymxblog/friends/

动态获取json生成 links.yml 友链文件，适配 solitude主题 的方法，根目录下新建 autolinks.js 文件输入以下内容：

const fs = require('fs');
const https = require('https');
const yaml = require('js-yaml');

// 定义输入 URL 和输出文件名
const inputUrls = [
    'https://cdn.418121.xyz/links/花架.json',
    'https://cdn.418121.xyz/links/花友.json',
    'https://cdn.418121.xyz/links/花族.json',
    'https://cdn.418121.xyz/links/花主.json',
    'https://cdn.418121.xyz/links/suspend.json',
    'https://cdn.418121.xyz/links/404.json',
];
const outputFileName = './source/_data/links.yml';

// 自定义名称和描述字典，可以根据 URL 或文件名进行变更
const customNames = {
    '花架': '花架',
    '花友': '花友',
    '花族': '花族',
    '花主': '花主',
    'suspend': '花单',
    '404': '花失',
};

const descriptions = {
    '花架': '鸣谢提供框架及主题、技术支持',
    '花友': '造物主自玫瑰诞生起便策划了这场名为救赎的邂逅',
    '花族': '本站已加入的族织',
    '花主': '许是太久没有惊艳了，花也会忘了它是什么样子',
    'suspend': '单向友链，请添加本站链接后在GitHub提交issue留言',
    '404': '失效友链，请在GitHub提交issue修改后留言',
};

// 自定义类型字典
const customTypes = {
    '花架': 'item',
    '花友': 'item',
    '花族': 'item',
    '花主': 'item',
    'suspend': 'discn',
    '404': 'discn',
};

// 用于存储所有分类的数组
const allCategories = [];

// 读取每个 JSON URL 并处理数据
const readJsonUrls = async () => {
    for (let index = 0; index < inputUrls.length; index++) {
        const url = inputUrls[index];
        try {
            const jsonObj = await fetchJson(url);
            
            // 提取 URL 最后一部分作为分类名称（去掉扩展名）
            const className = url.split('/').pop().replace('.json', '');

            // 获取对应的描述、自定义名称和类型，如果不存在则使用默认
            const descr = descriptions[className] || `来自 ${className} 的链接`;
            const customName = customNames[className] || `默认名称 ${className}`;
            const customType = customTypes[className] || 'default'; // 默认类型

            // 将当前文件内容转换为 YAML 格式的数据结构
            let links = jsonObj.content.map(item => ({
                name: item.title,
                link: item.link,
                avatar: item.avatar,
                descr: item.descr,
                topimg: item.topimg || '',
                tag: item.tag || '',
                color: item.color || ''
            }));

            // 如果是第二个 URL，我们进行乱序处理
            if (index === 1) { // 注意这里的 index 从 0 开始，所以2号的位置是1
                links = shuffleArray(links); // 乱序
            }

            links.reverse(); // 逆序处理
            
            // 创建分类对象并推入分类数组
            allCategories.push({
                class_name: customName,
                descr: descr,
                type: customType,
                suffix: '',
                link_list: links
            });
            
        } catch (err) {
            console.error(`读取 URL ${url} 时出错:`, err.message);
        }
    }
};

// 随机打乱数组的函数
const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]]; // 交换元素
    }
    return array;
};
// 使用 https 模块获取 JSON 数据
const fetchJson = (url) => {
    return new Promise((resolve, reject) => {
        https.get(url, (res) => {
            let data = '';

            // 收集数据
            res.on('data', chunk => {
                data += chunk;
            });

            // 请求结束后解析 JSON
            res.on('end', () => {
                try {
                    resolve(JSON.parse(data));
                } catch (e) {
                    reject(new Error('无法解析 JSON'));
                }
            });
        }).on('error', (err) => {
            reject(err);
        });
    });
};

// 生成 YAML 数据并写入文件
const generateYaml = () => {
    const yamlData = {
        banner_suffix: '',
        links: allCategories
    };

    // 将生成的数据转换为 YAML 格式，强制使用双引号来防止折叠格式
    const generatedYaml = yaml.dump(yamlData, {
        noRefs: true,
        lineWidth: -1 // 设置行宽为 -1，避免自动折行
    }); 

    // 写入到 YAML 文件
    fs.writeFileSync(outputFileName, generatedYaml, 'utf8');
    console.log('YAML 文件已成功生成。');
};

// 执行读取和写入流程
const processUrls = async () => {
    await readJsonUrls();
    generateYaml();
};

processUrls();

请参考原教程到5. 配置 config.yml，后接着下来我的步骤，或者直接Fork我的仓库进行修改。

# 网络请求设置
request:
  timeout: 10 # 超时设置
  ssl: false # ssl设置

# 要抓取的 issues 配置
issues:
  repo: ymxblog/friends # 仓库持有者/仓库名
  label:
  groups: ['active','checklist','suspend','404','花架','花友','花族','花主'] #标签有多少个就都写进去
  sort:

修改 /generator/main.py 文件：

1	outputdir = os.path.join(version, 'links') # 第十行。输出文件结构变化时，更新输出路径版本

修改 .github/workflows/generator.yml 文件：

name: Generator

on:
  issues:
  watch:
    types: [started]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v4
    - name: Set up Python
      uses: actions/setup-python@v5
      with:
        python-version: 3.x
    - name: Install requirements #安装requests
      run: |
        pip install -r requirements.txt
    - name: Update links #更新
      run: |
        python generator/main.py
    - name: Commit & Push
      uses: action-x/commit@v2.9
      with:
        github-token: ${{ secrets.PAT }}
        push-branch: 'output'
        force-push: 'true'
        commit-message: 'Generate Json'
        name: ${{ secrets.GITHUBUSERNAME }}
        email: ${{ secrets.GITHUBEMAIL }}
    - name: Checkout CDN repository
      run: |
          git clone https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.PAT }}@github.com/${{ secrets.GITHUBUSERNAME }}/CDN.git
          cd CDN
          
          # 确保没有未加入分支的内容
          git fetch origin

          # 如果需要删除完整的 links 目录，请使用 -r 参数
          git rm -r links/  # 删除整个 links 目录（如有必要）
          # 配置用户信息
          git config --global user.name "${{ secrets.GITHUBUSERNAME }}"
          git config --global user.email "${{ secrets.GITHUBEMAIL }}"
          git commit -m "Delete links directory"
          git push origin main
    - name: 延迟30s执行
      run: |
          echo "Starting delay..."
          sleep 30  # 延迟 30 秒
          echo "Delay completed."
    - name: Push changes to CDN repository
      run: |
          cd ./v2
          
          # 设置默认主分支为 'main'
          git config --global init.defaultBranch main
          
          if [ ! -d ".git" ]; then
            git init
            echo "Initialized new Git repository."
          fi

          # 配置用户信息
          git config --global user.name "${{ secrets.GITHUBUSERNAME }}"
          git config --global user.email "${{ secrets.GITHUBEMAIL }}"
          
          git remote add origin https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.PAT }}@github.com/${{ secrets.GITHUBUSERNAME }}/CDN.git
          
          # 更新本地分支以确保所有更改都已拉取
          git fetch origin
          
          # 合并最新的主分支
          git merge origin/main --allow-unrelated-histories || { echo "Merge conflict detected"; exit 1; }
          
          # 显示当前状态
          git status
          
          # 列出特定目录的内容
          ls -la ./links/
          
          # 添加文件并提交
          git add .
          
          if [ -n "$(git status --porcelain)" ]; then
            git commit -m "友链更新" || echo "No changes to commit"
          else
            echo "No changes to commit."
          fi
          
          # 推送到远程
          git push -u origin main || { echo "Push failed, please resolve the issues."; exit 1; }
    - name: 发送请求至本仓库的另外一工作流
      uses: peter-evans/repository-dispatch@v3
      with:
        token: ${{ secrets.GITHUB_TOKEN }}  # 使用默认的 GITHUB_TOKEN
        repository: ${{ github.repository }}  # 指向当前仓库
        event-type: linkschange
        client-payload: '{"branch": "output"}'

创建 .github/workflows/autolinks.yml 文件：

name: 更新网站友链
on:
  repository_dispatch:
    types: [linkschange]  # 本工作流由 change 事件触发

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 步骤1：检出代码（根据需求可选）
      - name: Checkout Code
        uses: actions/checkout@v4
        with:
          ref: ${{ github.event.client_payload.branch || 'main' }}

      # 步骤2：执行本地任务
      - name: Run Tasks
        run: echo "成功触发，当前分支：${{ github.event.client_payload.branch }}"

      # 步骤3：触发账号B的私有仓库工作流（关键修改部分）
      - name: 触发更新
        uses: peter-evans/repository-dispatch@v3
        with:
          token: ${{ secrets.MY_SECRET_TOKEN }}  # 必须使用账号B的PAT
          repository: yeminxi/hexo_code          # 格式：owner/repo
          event-type: linkspush              # 与目标仓库的事件类型严格匹配
          client-payload: '{"branch": "output"}' # 简化参数，移除冗余字段

我使用 Github Action 构建站点，在前面加上就可以实现友链检测，朋友圈，友链的三同步：

name: 自动部署
# 当有改动推送到master分支时，启动Action
on:
  repository_dispatch:
    types: [linkspush]  # 本工作流由 change 事件触发
  push:
    branches:
      - solitude
      #2020年10月后github新建仓库默认分支改为main，注意更改
  release:
    types:
      - published

jobs:
  
  deploy:
    permissions:
      actions: write
      checks: write
      contents: write
    runs-on: ubuntu-latest
    steps:
    - name: 延迟三十秒执行
      run: |
        echo "Starting delay..."
        sleep 30  # 延迟 30 秒
        echo "Delay completed."
    - name: 检查分支
      uses: actions/checkout@v4
      with:
        ref: solitude

    - name: 安装 Node
      uses: actions/setup-node@v4
      with:
        node-version: "20.x" #action使用的node版本，建议大版本和本地保持一致。可以在本地用node -v查询版本号。

    - name: 安装 Hexo
      run: |
        export TZ='Asia/Shanghai'
        npm install hexo-cli -g

    - name: 缓存 Hexo
      uses: actions/cache@v4
      id: cache
      with:
        path: |
          node_modules
          .deploy_git
          public
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install gulp-cli -g #全局安装gulp
        npm install --save
        npm install yamljs --save

    - name: 清除缓存
      run: |
        hexo clean

    - name: 更新友链朋友圈
      run: |
        node link.js
        node links.js
        node autolinks.js

    - name: 生成静态文件
      run: |
        hexo generate
    
    - name: 提交索引至Algolia
      run: |
        hexo algolia

    - name: 压缩文件
      run: |
        gulp
    
    # - name: 部署    
    #   uses: JamesIves/github-pages-deploy-action@v4
    #   with:
    #     token: ${{ secrets.GITHUBTOKEN }}
    #     repository-name: ${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io
    #     branch: v3.0.0
    #     foldinger: public
    #     commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"
    - name: 部署到Cloudfare Vercel Pages #此处master:master 指从本地的master分支提交到远程仓库的master分支，若远程仓库没有对应分支则新建一个。如有其他需要，可以根据自己的需求更改。
      run: |
        cd ./public
        git init
        git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
        git config --global user.email '${{ secrets.GITHUBEMAIL }}'
        git branch -M solitude
        git add .
        git commit -m "${{ github.event.head_commit.message }} $(date -u +"%Y-%m-%dT%H:%M:%SZ") Updated By Github Actions"
        git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/hexo_code_Solitude.git" solitude:v3.0.0
        git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/hexo_code_Solitude.git" solitude:main
  
    - name: 推送谷歌url
      run: |
        hexo deploy

需要在仓库添加的环境变量，至于怎么获取token这里不多介绍，我这里是用了两个账号所以有两个token，一个只用设置PAT就好。
name value
GITHUBUSERNAME 你Github的用户名
GITHUBEMAIL 你Github的邮箱
PAT 包含repo和work的权限token
MY_SECRET_TOKEN 另一账号仓库包含repo和work的权限token
说一下是什么原理
获取issues的内容 -> 按label生成对应的json -> 推送至output分支和CDN仓库 -> 发送请求至本仓库的另外一工作流 -> 收到请求后，发送请求至另外账号仓库的构建站点的工作流 -> 实现动态友链更新

原教程只能生成json文件到本仓库的 *output 分支的v2文件夹里，这里我加了一个推送到我的CDN仓库的操作。然后通过Github Action获取CDN的json内容生成友链文件，友链检测文件，朋友圈文件，实现三端同步实时更新。
同理可得动态即可短文。

原帖	作者
Stellar动态友链教程	星日语

18. 添加回复时引用该评论

效果
教程

点击效果，即可跳转，随便找条评论试试，只适用Waline。

新建 source/custom/js/replycontent.js 文件填入内容：

(function() {
    let walineContainer = null;
    let observer = null;

    const initWalineReply = () => {
        // 移除旧的事件监听器
        if (walineContainer) {
            walineContainer.removeEventListener('click', handleClick);
        }

        // 获取新的评论容器
        walineContainer = document.getElementById('waline-wrap');
        
        if (!walineContainer) {
            return; // 如果没有找到容器则退出
        }

        // 添加点击事件监听器
        walineContainer.addEventListener('click', handleClick, { passive: true });

        // 如果旧观察者存在，则断开连接
        if (observer) {
            observer.disconnect();
        }

        // 创建新的 MutationObserver 实例并开始观察
        observer = new MutationObserver(() => {
            // 在 DOM 变化时重新初始化
            initWalineReply();
        });

        observer.observe(walineContainer, {
            childList: true,
            subtree: true
        });
    };

    const handleClick = (e) => {
        const replyBtn = e.target.closest('button.wl-reply');
        if (!replyBtn || walineContainer.dataset.pjaxLoading === 'true') return;

        // 精准定位当前评论内容
        const commentItem = replyBtn.closest('.wl-card-item');
        const contentNode = commentItem.querySelector('.wl-card > .wl-content');

        if (!contentNode) {
            return;
        }

        // 沙盒处理（保留链接结构）
        const sandbox = contentNode.cloneNode(true);
        
        // 移除干扰元素
        sandbox.querySelectorAll(
            'span, .wl-meta, svg, img, .wl-quote, blockquote, a[href^="#"], pre'
        ).forEach(n => n.remove());

        // 转换普通链接为Markdown格式（保留非锚点链接）
        sandbox.querySelectorAll('a:not([href^="#"])').forEach(a => {
            const text = a.textContent.trim();
            const href = a.getAttribute('href') || '';
            a.replaceWith(`[${text}](${href})`);
        });

        // 提取纯净文本（增加过滤@符号）
        const pureText = sandbox.textContent
            .replace(/@\S+/g, '')               // 新增@提及过滤
            .replace(/\n{3,}/g, '\n\n')
            .trim()
            .substring(0, 500);

        // 获取编辑器实例
        const editor = walineContainer.querySelector('.wl-editor');
        if (!editor) {
            return;
        }

        // 执行插入
        insertEditorContent(editor, pureText);
    };

    // 通用插入方法（支持Markdown）
    const insertEditorContent = (editor, text) => {
        const insertText = `> ${text}\n\n`;
        const inputEvent = new Event('input', { bubbles: true });

        if (editor.tagName === 'TEXTAREA' || editor.tagName === 'INPUT') {
            // 原生文本域处理
            const start = editor.selectionStart;
            editor.value = 
                editor.value.slice(0, start) + 
                insertText + 
                editor.value.slice(editor.selectionEnd);
            editor.selectionEnd = start + insertText.length;
        } else if (editor.isContentEditable) {
            // 富文本编辑器处理
            const range = document.createRange();
            const selection = window.getSelection();
            range.selectNodeContents(editor);
            range.collapse(false); // 光标移到最后
            range.insertNode(document.createTextNode(insertText));
            selection.removeAllRanges();
            selection.addRange(range);
        }

        editor.dispatchEvent(inputEvent);
        editor.focus();
    };

    // 初始化及事件监听
    document.addEventListener('pjax:complete', initWalineReply);
    initWalineReply(); // 初次调用以进行初始化
})();

修改主题配置文件：

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <script data-pjax src="/custom/js/replycontent.js"></script>

19. 弹出式欢迎界面

首次进入本站即显示，点击效果即刻跳转。

新建 source/custom/js/welcome.js 文件填入以下内容（可改）：

document.addEventListener("DOMContentLoaded", (function() {
    if (!getCookie("agreementAccepted")) {
        const referrer = document.referrer ? new URL(document.referrer).hostname : "直接访问";
        
        swal({
            title: "欢迎来到 叶泯希 <(￣︶￣)↗[GO!]",
            content: {
                element: "div",
                attributes: {
                    innerHTML: `
                        <img src='/images/avatar.webp' alt='自定义图标' 
                            style='width:80px; height:auto; border-radius: 50%; 
                            display: block; margin: 0 auto;' /><br />
                        您来自: ${referrer}<br />
                        请您在继续浏览本站之前，仔细阅读以下协议：<br /><br />
                        1. <a href='/privacy/' title='隐私协议' data-pjax-state=''>隐私协议</a>&nbsp;&nbsp;
                        2. <a href='/disclaimer/' title='免责声明' data-pjax-state=''>免责声明</a>&nbsp;&nbsp;<br />
                        3. <a href='/copyright/' title='版权协议' data-pjax-state=''>版权协议</a>&nbsp;&nbsp;
                        4. <a href='/comment/' title='评论协议' data-pjax-state=''>评论协议</a>&nbsp;&nbsp; 
                        5. <a href='/cookies/' title='Cookies' data-pjax-state=''>Cookies</a>&nbsp;&nbsp;<br /><br />
                        点击“同意”表示您已阅读并同意遵守以上协议。
                    `
                }
            },
            buttons: {
                cancel: "不同意",
                confirm: "同意"
            },
            text: "若未获取新内容请清浏览器缓存。"
        }).then(willProceed => {
            willProceed ? setCookie("agreementAccepted", "true", 30) :
            window.history.length > 1 ? window.history.back() :
            window.location.href = "https://xxx";// 替换为希望重定向的 URL
        });
    }

    function setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + 24 * days * 60 * 60 * 1000); //添加30天的cookie
        const expires = "expires=" + date.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
    }

    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(";");

        for (let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (" " === c.charAt(0)) c = c.substring(1, c.length);
            if (0 === c.indexOf(nameEQ)) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
}));

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 弹出框样式 */
.swal-modal,.swal-text,.swal-title {
  font-family: var(--efu-font) !important;
  background-color: var(--efu-secondbg);
  color: var(--efu-fontcolor) !important;
}

.swal-text {
  font-size: 14px;
}

.swal-content a:hover {
  background-color: var(--efu-theme-op-deep);
}
.swal-content a:not(.fancybox) {
  color: var(--efu-fontcolor);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px dotted var(--efu-lighttext);
  padding: 0px 4px;
  border-radius: 4px 4px 0px 0px;
}

.swal-button--confirm  {
  color: var(--efu-fontcolor);
  background-color: var(--efu-theme-op-deep);
}

修改主题配置文件：

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="/custom/css/custom.css">
    - <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    - <script src="/custom/js/welcome.js"></script>

原帖	作者
SweetAlert	官网
【Hexo+NexT主题】弹出欢迎弹窗	pai233

20. 添加小米字体

效果
教程

所见即所得。

修改主题配置文件

# Font
# 字体
font:
  font-size: 20px
  code-font-size: 16px
  # Global font
  # 全局字体
  font-family: "MiSans, sans-serif"

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">

21. 配置swpp和PWA（主题是v2 现版本v3）

进入页面即可显示。特别感谢Liushen的帮助！

安装

1 2	npm install swpp-backends --save npm install hexo-swpp --save

在Hexo配置文件最后添加：

# swpp
# npm install swpp-backends --save
# npm install hexo-swpp --save
# https://kmar.top/posts/b70ec88f/
# https://github.com/EmptyDreams/hexo-swpp
swpp:
  # 是否启用，默认 false
  enable: true
  # 配置文件路径，以 `/` 结尾表示加载指定文件夹下的所有文件，注意文件夹中只能有配置文件，不能有其它文件及文件夹
  config_path: 'swpp.config.js'
  # 是否生成 sw
  # serviceWorker: true
  # 是否向所有 HTML 插入注册 sw 的代码
  # auto_register: true
  # 是否生成 DOM 端的 JS 文件并在 HTML 中插入 script
  # gen_dom: true
  # 生成的 diff 文件的路径（可以是绝对路径也可以是相对路径，使用相对路径时相对于网站发布目录），留空表示不生成（默认为 null）
  gen_diff: './diff.json'
  # 是否在执行 hexo deploy 时自动执行 swpp 指令
  # auto_exec: false
  # 检查更新的网址，默认 "https://registry.npmjs.org"，注意不能以斜杠结尾
  npm_url: 'https://registry.npmmirror.com'
  #
  # 排序规则。
  # sort_rules:
  # 该配置项是为了对 hexo 中的一些变量进行排序，避免每次生成 HTML 时由于这些变量的顺序变动导致生成结果不完全相同。
  # 下面给出的值为插件的缺省值，用户设置该项不会直接覆盖这些值，只有用户也声明 posts、pages 或 tags 时才会覆盖对应的值。
  # 其中 key 值为要排序的变量的名称，value 为变量排序时的依据，
  # 填 false 表示禁用该项排序，填 true 表示以 value 本身为键进行排序，填字符串表示以 value[tag] 为键进行排序。
  # sort_rules:
  #   posts: 'title'
  #   pages: 'title'
  #   tags: 'name'

在根目录下创建 swpp.config.js 文件，把我的域名改成你自己的（不懂就看参考里的教程）：

import {
    defineConfig
} from 'swpp-backends'

defineConfig({
    compilationEnv: {
        DOMAIN_HOST: new URL('https://blog.418121.xyz'),
        SERVICE_WORKER: "sw",
        JSON_HTML_LIMIT: 10,
        // isStable: (url: URL) => {
        //     return [
        //         /^(https?:\/\/|\/\/)(cdn|fastly)\.jsdelivr\.net\/npm\/.*@\d+\.\d+\.\d+\//,
        //         /^(https?:\/\/|\/\/)jsdelivr\.topthink\.com\/.*@\d+\.\d+\.\d+\//,
        //         /^(https?:\/\/|\/\/)cdn\.jsdmirror\.com\/.*@\d+\.\d+\.\d+\//,
        //         /^(https?:\/\/|\/\/)cdn\.staticfile\.org\/.*\/\d+\.\d+\.\d+\//,
        //         /^(https?:\/\/|\/\/)lf\d+-cdn-tos\.bytecdntp\.com\/.*\/\d+\.\d+\.\d+\//,
        //         /^(https?:\/\/|\/\/)npm\.elemecdn\.com\/.*@\d+\.\d+\.\d+\//
        //     ].some(it => it.test(url.href))
        // },
        VERSION_LENGTH_LIMIT: 512,
        // NETWORK_FILE_FETCHER: {
        //     referer: "https://blog.418121.xyz",
        //     getStandbyList(url: string | URL): (string | URL)[] {
        //         if (typeof url === 'string') url = new URL(url)
        //         if (url.hostname === 'npm.elemecdn.com') {
        //             return [`https://fastly.jsdelivr.net${url.pathname}`]
        //         }
        //         return [url]
        //     }
        // }
    },

    domConfig: {
        onSuccess: () => {
            caches
                .match("https://id.v3/")
                .then((res) => {
                    if (res) {
                        res.json().then((json) => {
                            utils && utils.snackbarShow(`已自动刷新SW缓存，当前版本为 v${json.escape + '.' + '0' + '.' + json.global + '.' + json.local} ，如果不生效，请尝试刷新页面以获取最新内容。`);
                        });
                    } else {
                        console.warn("未找到版本信息缓存，可能是第一次访问或缓存已过期");
                    }
                }).catch((err) => console.warn("获取版本信息缓存失败", err));
        }
    },

    crossEnv: {
        CACHE_NAME: "BlogCache",
        VERSION_PATH: "https://id.v3/",
        ESCAPE: 15,
    },

    runtimeDep: {
        getStandbyRequests: (request: Request): {t: number, l: () => Request[]} | void => {
            const srcUrl = request.url
            const {host, pathname} = new URL(srcUrl)
            // noinspection SpellCheckingInspection
            const commonCdnList = ['jsdelivr.topthink.com', 'cdn.jsdmirror.com', 'fastly.jsdelivr.net']
            // noinspection SpellCheckingInspection
            const elme = 'npm.elemecdn.com'
            const urlMapper = (it: string) => new Request(it, request)
            if (host === elme) {
                return {
                    t: 2000,
                    l: () => [...commonCdnList.map(it => `https://${it}/npm${pathname}`)].map(urlMapper)
                }
            }
            if (host === 'jsdelivr.topthink.com') {
                commonCdnList.splice(0, 1)
                return {
                    t: 2000,
                    l: () => [...commonCdnList.map(it => `https://${it}${pathname}`)].map(urlMapper)
                }
            }
        }
    },

    crossDep: {
        matchCacheRule: {
            runOnBrowser: (url: URL)  => {
                let { host, pathname } = url;

                // 处理省略index.html的情况
                if (pathname.endsWith('/')) pathname += 'index.html';

                // 仅仅对于blog.418121.xyz')) { 处理 html 和 json
                if (host.endsWith('blog.418121.xyz')) {
                    if (pathname.endsWith('.json')) return 2592000000; // 30 dyas
                    if (pathname.endsWith('.html')) return 2592000000; // 30 dyas
                    if (pathname.endsWith('.webp') || pathname.endsWith('.jpg') || pathname.endsWith('.png') || pathname.endsWith('.gif')) return 2592000000; // 30 dyas
                }
                if (/\.(js|css|woff2|woff|ttf|cur|json)$/.test(url.pathname)) return 2592000000; // 30 dyas
                
                // return ((url.host.endsWith('blog.418121.xyz')) {') && /(\/|\.json)$/.test(url.pathname)) || /\.(js|css|woff2|woff|ttf|cur)$/.test(url.pathname)) ? 86400000 : false
            },
            runOnNode(url: URL) {
                // @ts-ignore
                return this.runOnBrowser(url)
            }
        }
    },
})

敲 hexo swpp , 使用Github Action 可以在压缩之前加上：

# ...
    - name: 缓存swpp
      run: |
        hexo swpp

    - name: 压缩文件
      run: |    
        gulp
# ...

配置 PWA ，修改主题文件 _config_solitude.yml（按自己的来）：

# ...
# --------------------------- start ---------------------------
# PWA
# Progressive Web App
pwa:
  enable: true
  manifest: /manifest.json # manifest.json
  theme_color: "#ff8080" # Theme colort
  mask_icon: /img/pwa/favicon.png # Mask icon
  apple_touch_icon: /img/pwa/favicon.png # Apple touch icon
  bookmark_icon: /img/pwa/favicon.png # Bookmark icon
  favicon_32_32: /img/pwa/favicon_32.png # 32x32 icon
  favicon_16_16: /img/pwa/favicon_16.png # 16x16 icon
# --------------------------- end ---------------------------
# ...

新建 source/manifest.json 文件（并准备好对应的图片）：

{
    "lang": "zh",
    "name": "叶泯希",
    "short_name": "叶泯希",
    "description": "blog.418121.xyz - 记录生活与技术的个人博客",
    "theme_color": "#ff8080",
    "background_color": "#ff8080",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
            "src": "/img/pwa/favicon_36.png",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/img/pwa/favicon_512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "screenshots": [
        {
            "src": "/img/pwa/screenshot_desktop.png",
            "sizes": "1280x720",
            "type": "image/png",
            "form_factor": "wide",
            "label": "桌面版博客首页"
        },
        {
            "src": "/img/pwa/screenshot_mobile.png",
            "sizes": "750x1334",
            "type": "image/png",
            "form_factor": "narrow",
            "label": "移动版博客首页"
        }
    ]
}

网址右边出现安装应用，即成功。

原帖	作者
Hexo配置SWPP实现PWA	Liushen
Swpp Backends 官方文档	空梦
Github仓库	EmptyDreams

22. 赞赏侧边栏

按照LiuShen的教程顺序就好。

在 source/custom/css/custom.css 最后添加（没有就新建）：

/* 赞赏页面样式 */
:root {
  /* ========== nav ========== */
  --liushen-nav-bg: rgba(255, 255, 255, 0.8);
  --liushen-nav-shadow: rgba(133, 133, 133, 0.6) 0px 5px 6px -5px;

  /* ========== ai_summary ========== */
  --liushen-title-font-color: #0883b7;
  --liushen-maskbg: rgba(255, 255, 255, 0.85);
  --liushen-ai-bg: conic-gradient(
    from 1.5708rad at 50% 50%,
    #d6b300 0%,
    #42a2ff 54%,
    #d6b300 100%
  );

  /* ========== card ========== */
  --liushen-card-bg: #fff;
  --liushen-card-secondbg: #f1f3f8;
  --liushen-card-border: 1px solid #e3e8f7;

  /* ========== button ========== */
  --liushen-button-bg: #f1f3f8;
  --liushen-button-hover-bg: var(--theme-color);

  /* ========== text ========== */
  --liushen-text: #4c4948;
  --liushen-secondtext: #3c3c43cc;
}

[data-theme='dark'] {
  /* ========== nav ========== */
  --liushen-nav-bg: rgba(18, 18, 18, 0.8);
  --liushen-nav-shadow: rgba(133, 133, 133, 0) 0px 5px 6px -5px;

  /* ========== ai_summary ========== */
  --liushen-maskbg: rgba(0, 0, 0, 0.85);
  --liushen-ai-bg: conic-gradient(
    from 1.5708rad at 50% 50%,
    rgba(214, 178, 0, 0.46) 0%,
    rgba(66, 161, 255, 0.53) 54%,
    rgba(214, 178, 0, 0.49) 100%
  );

  /* ========== card ========== */
  --liushen-card-bg: #2d2d2d;
  --liushen-card-secondbg: #3e3f41;
  --liushen-card-border: 1px solid #42444a;

  /* ========== button ========== */
  --liushen-button-bg: #30343f;
  --liushen-button-hover-bg: var(--theme-color);

  /* ========== text ========== */
  --liushen-text: #ffffffb3;
  --liushen-secondtext: #a1a2b8;
}
.card-widget.card-reward {
    padding: 8px;
}

.card-widget.card-reward .item-headline {
    margin: 4px 4px 4px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-widget.card-reward .item-headline .headline-content i {
    font-size: 1.1em;
}

.card-widget.card-reward .item-headline .headline-content span {
    font-size: 1em;
    font-weight: 600;
    color: var(--liushen-text);
}

.card-widget.card-reward .item-headline .show-more-inline .btn-show-more-inline {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: var(--liushen-card-bg);
    border: var(--liushen-card-border);
    color: var(--liushen-text);
    text-decoration: none;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.card-widget.card-reward .item-headline .show-more-inline .btn-show-more-inline span {
    margin-left: 0;
}

.card-widget.card-reward .item-headline .show-more-inline .btn-show-more-inline:hover {
    background-color: var(--default-bg-color);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card-widget.card-reward .item-content {
    margin: 0 4px 4px 4px;
}

.card-widget.card-reward .item-content .top-sponsor-carousel {
    margin-bottom: 15px; /* Uncomment if rotating the carousel */
    /* position: relative; */
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item {
    width: 100%;
    display: flex !important;
    align-items: center;
    padding: 8px;
    background-color: var(--liushen-card-bg);
    border-radius: 12px;
    border: var(--liushen-card-border);
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item.carousel-item-new {
    animation: slideIn 0.5s ease-out;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--liushen-text);
    width: 100%;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-avatar {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--liushen-card-secondbg);
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-info {
    min-width: 0;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-info .sponsor-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--liushen-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-widget.card-reward .item-content .top-sponsor-carousel .carousel-container .carousel-item .sponsor-info .sponsor-desc {
    font-size: 14px;
    line-height: 1;
    color: var(--liushen-secondtext);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-widget.card-reward .item-content .sponsors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.card-widget.card-reward .item-content .sponsors-list .sponsor-item {
    display: flex;
    align-items: center;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--liushen-text);
    text-decoration-style: dashed;

    color: var(--liushen-text);
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.card-widget.card-reward .item-content .sponsors-list .sponsor-item:hover {
    color: var(--default-bg-color);
    text-decoration-color: var(--default-bg-color);
    transform: translateY(-2px);
}

.card-widget.card-reward .item-content .sponsors-list .sponsor-item .sponsor-small-name {
    font-size: 14px;
    font-weight: 500;
}

.card-widget.card-reward .item-content .sponsors-note {
    text-align: center;
    font-size: 12px;
    color: var(--liushen-secondtext);
    opacity: 0.8;
}

.card-widget.card-reward .item-content .sponsors-note p {
    margin: 0;
}

.card-widget.card-reward .item-content .no-sponsors {
    text-align: center;
    padding: 20px;
    color: var(--liushen-secondtext);
}

.card-widget.card-reward .item-content .no-sponsors p {
    font-size: 14px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

修改 _config.solitude.yml 文件：

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="/custom/css/custom.css">

修改 source/_data/about.yml 文件赞赏位置添加：

award:
  enable: true
  description: 感谢那些欣赏和支持我的人。因为你，我觉得写博客可以为你创造价值。这将使我在这条道路上走得更远。
  tips: 总金额： ¥ {sum} , 将用于博客的维护和更新。 # Must include {sum}, otherwise the total amount will not be displayed
rewardList: # Bottom donations
  - name: 唐若辰
    money: 10
    time: 2024-05-24
    icon: fab fa-weixin
    # icon: fab fa-alipay
    # icon: fab fa-gratipay
    color: green
    #以下是新添加
    avatar: https://images.418121.xyz/file/blog/page/qt.webp
    website: /
    description: 执子之手
  - name: test
    money: 10
    time: 2024-05-24
    icon: fab fa-weixin
    # icon: fab fa-alipay
    # icon: fab fa-gratipay
    color: green
    avatar: https://images.418121.xyz/file/blog/page/qtn.webp
    website: /
    description: test

添加 themes/solitude/layout/includes/widgets/aside/asideRewards.pug 文件：

.card-widget.card-reward
  .item-headline
    .headline-content
      i.fa-solid.fa-person-praying
      span 能量榜
    .show-more-inline
      - var pageUrl = '/reward/'
      a(href=url_for(pageUrl) class="btn-show-more-inline")
        span 前往赞赏
  .item-content
    if site.data.about && site.data.about.rewardList && site.data.about.award.enable
      - var allSponsors = site.data.about.rewardList.slice()
      - allSponsors.sort(function() { return Math.random() - 0.5 })
      - var carouselSponsors = allSponsors.slice(0, 40)
      - var listSponsors = allSponsors.slice(0, 20)
      
      if carouselSponsors.length > 0
        .top-sponsor-carousel
          .carousel-container
            .carousel-item
              a.sponsor-link-card(target="_blank" rel="nofollow noopener")
                .sponsor-avatar
                  img.sponsor-avatar-img(src=url_for(carouselSponsors[0].avatar) alt=carouselSponsors[0].name onerror=`this.onerror=null;this.src='${url_for('/img/default_avatar.webp')}';`)
                .sponsor-info
                  .sponsor-name= carouselSponsors[0].name
                  .sponsor-desc= carouselSponsors[0].description
        
        if listSponsors.length > 1
          .sponsors-list
            each sponsor in listSponsors
              if sponsor.website
                a.sponsor-item(href=sponsor.website target="_blank" rel="nofollow noopener")
                  .sponsor-small-name= sponsor.name
              else
                .sponsor-item
                  .sponsor-small-name= sponsor.name

            if allSponsors.length > 20
              - var pageUrl = '/reward/'
              a.sponsor-item.more-sponsor(href=url_for(pageUrl) target="_blank" rel="nofollow noopener")
                .sponsor-small-name
                  |  查看更多
                  i.fa-solid.fa-angles-right
          
          .sponsors-note
            p 你们的赞赏是我最大的动力
            p ※ 此处数据随机显示
        
        script.
          if (!window.sponsorsData) {
            window.sponsorsData = !{JSON.stringify(carouselSponsors)};
          }
          
          function initRewardCarousel() {
            const container = document.querySelector('.carousel-container');
            const link = container.querySelector('.sponsor-link-card');
            const avatar = container.querySelector('.sponsor-avatar-img');
            const name = container.querySelector('.sponsor-name');
            const desc = container.querySelector('.sponsor-desc');
            
            if (!container || sponsorsData.length === 0) return;
            
            let currentIndex = 0;
            let intervalId = null;
            let isTransitioning = false;
            
            function updateSponsorInfo(sponsor) {
              if (sponsor.website) {
                link.href = sponsor.website;
                // 确保有链接时移除 pointer-events 样式
                link.style.pointerEvents = '';
                link.style.cursor = 'pointer';
              } else {
                link.removeAttribute('href');
                // 只有在没有链接时才添加 pointer-events: none
                link.style.pointerEvents = 'none';
                link.style.cursor = 'default';
              }
              
              avatar.src = sponsor.avatar;
              avatar.alt = sponsor.name;
              
              name.textContent = sponsor.name;
              desc.textContent = sponsor.description;
            }
            
            function showSponsor(index) {
              if (index < 0 || index >= sponsorsData.length || isTransitioning) return;
              
              isTransitioning = true;
              const sponsor = sponsorsData[index];
              
              container.style.opacity = '0';
              
              setTimeout(() => {
                updateSponsorInfo(sponsor);
                container.style.opacity = '1';
                currentIndex = index;
                
                setTimeout(() => {
                  isTransitioning = false;
                }, 300);
              }, 300);
            }
            
            function nextSponsor() {
              const nextIndex = (currentIndex + 1) % sponsorsData.length;
              showSponsor(nextIndex);
            }
            
            function startAutoPlay() {
              if (intervalId) clearInterval(intervalId);
              intervalId = setInterval(nextSponsor, 3000);
            }
            
            function stopAutoPlay() {
              if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
              }
            }
            
            const carousel = document.querySelector('.top-sponsor-carousel');
            if (carousel) {
              carousel.addEventListener('mouseenter', stopAutoPlay);
              carousel.addEventListener('mouseleave', startAutoPlay);
            }
            
            container.style.transition = 'opacity 0.3s ease-in-out';
            
            // 初始化第一个赞助者信息
            updateSponsorInfo(sponsorsData[0]);
            
            startAutoPlay();
            
            return {
              showSponsor,
              nextSponsor,
              startAutoPlay,
              stopAutoPlay
            };
          }
          initRewardCarousel();
          //- document.addEventListener("pjax:complete", function() {
          //-   initRewardCarousel();
          //- });
      else
        .no-sponsors
          p 暂无赞助者，成为第一个支持本站的朋友吧！
    else
      .no-sponsors
        p 暂无赞助者数据

修改 themes/solitude/layout/includes/widgets/aside/asideSwitch.pug 文件：

//- ===========================================
//- 侧边栏组件切换器
//- ===========================================

include ../../mixins/common.pug

//- 主切换逻辑
case item
  when 'about'
    include ./asideInfoCard.pug
  when 'flip'
    include ./asideFlipCard.pug
  when 'newestPost'
    include ./asideNewestPost.pug
  when 'allInfo'
    include ./asideAllInfo.pug
  when 'ads'
    include ./asideAdsense.pug
  when 'newest_comment'
    include ./asideNewstComments.pug
    //- 添加这两行==============================
  when 'rewards'
    include ./asideRewards.pug
    //- 结束====================================
  default
    //- 处理自定义组件
    - const custom = site.data && site.data.aside && site.data.aside.find((i) => i.name === item)
    +conditionalWrapper(custom)
      include ./asideCustom.pug

添加 themes/solitude/layout/includes/page/reward.pug 文件：

if page.banner
    include ../widgets/page/banner
if site.data.about
    #about-page
        - award = site.data.about.award

        - var sum = 0
        if site.data.about.rewardList && site.data.about.award.enable
            .author-content
                .author-content-item.single.reward
                    .author-content-item-tips= _p('award.thanks')
                    span.author-content-item-title= _p('award.title')
                    .author-content-item-description
                        != award.description
                    .reward-list-all
                        each reward in site.data.about.rewardList.sort((a, b) => b.time - a.time) || []
                            - sum += reward.money
                            .reward-list-item
                                .reward-list-item-name= reward.name
                                .reward-list-bottom-group
                                    .reward-list-item-money(style="background-color:" + reward.color)
                                        if reward.icon
                                            i.solitude(class=reward.icon)
                                        | ¥ #{reward.money}
                                    time.datetime.reward-list-item-time(datetime=moment(reward.time).format())
                        if theme.post.award.enable
                            .post-reward
                                .post-reward(onclick="AddRewardMask()")
                                .reward-button(title=_p('award.tipping'))
                                    i.solitude.fas.fa-heart
                                    = _p('award.tipping')
                                .reward-main
                                    ul.reward-all
                                        span.reward-title= theme.post.award.title
                                        ul.reward-group
                                            - var rewards = theme.post.award.list
                                            each reward in rewards
                                                li.reward-item
                                                    a(href=url_for(reward.url))
                                                        img.post-qr-code-img(alt=reward.name, src=reward.qcode, style="border-color:" + reward.color)
                                                    .post-qr-code-desc= reward.name
                    .reward-list-tips
                        p= award.tips.replace('{sum}', sum.toFixed(2))

修改 themes/solitude/layout/page.pug 文件（about下方）添加：

default
  case page.type
    when 'categories'
      include includes/page/categories
    when 'tags'
      include includes/page/tags
    when 'links'
      include includes/page/links
    when 'about'
      include includes/page/about
      //- 这里添加=========================
    when 'reward'
      include includes/page/reward
      //- 结束=============================
    when 'brevity'
      include includes/page/brevity
    when 'kit'
      include includes/page/kit
    when 'music'
      include includes/page/music
    default
      include includes/page/default

创建 source/reward/index.md 文件：

---
title: 致谢赞赏
date: 2025-11-15 16:17:49
type: reward
data: about
aside: false
banner: true
desc: 感谢每一份慷慨的赞赏
leftend: 感谢赞赏，请在评论区留下您的备注，谢谢！
---

修改 _config.solitude.yml 文件：

# ...
# Aside
# 侧边栏
aside:
  # Values: about (info card), newestPost (latest article), allInfo (website information), flip (official account QR code), newest_comment (latest comment)
  # 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), flip(官方账号二维码), newest_comment(最新评论)，rewards(赞赏)

  # Sticky: Fixed position / noSticky: Not fixed position
  # Sticky: 固定位置 / noSticky: 不固定位置
  home: # on the homepage
    noSticky: "about,rewards"
    Sticky: "love,likeme,allInfo"
  post: # on the article page
    noSticky: "about"
    Sticky: "rewards,flip,newestPost,likeme"
  page: # on the page
    noSticky: "about"
    Sticky: "rewards,flip,likeme"
  # 菜单栏位置(0: 左 1: 右)
  position: 0 # Sidebar positioning(0: left 1: right)
# ...
  # Reward
  # 打赏
  award:
    enable: true
    appreciators: /reward/ # Reward page
    # Reward Title
    # 打赏标题
    title: 感谢您的赞赏 # Thanks for your appreciation. / 感谢您的赞赏
    desc: 由于您的支持，我才能够实现写作的价值。 # Because of your support, I realize the value of writing articles. / 由于您的支持，我才能够实现写作的价值。
    # Reward list
    # 打赏列表
    list:
      # - name: Github Sponsor
      #   qcode: https://s3.qjqq.cn/47/661ba900c4bc1.webp!color
      #   url: https://github.com/sponsors/everfu
      #   color: var(--efu-black)
      - name: 微信
        qcode: /images/wxm.webp
        url: /images/wxm_l.webp
        color: var(--efu-green)
      - name: 支付宝
        qcode: /images/zfbm.webp
        url: /images/zfbm_l.webp
        color: var(--efu-blue)

完成，再次感谢LiuShen的大力支持！

原帖	作者
Butterfly主题实现赞赏页面及侧边卡片	LiuShen

结尾

至此，全篇结束。希望对你有所帮助，有任何问题请在下方留言。可以关注我的公众号以及订阅我的文章，感谢你的支持，是对我最大的动力，当然了，更多的是因为热爱。

自定义表盘导航软件——对小米手环9的折腾

2025-03-03T22:05:00.000Z

前言

按需求选择教程步骤，任何操作都有变砖的可能，谨慎操作！！！
过新历年的时候，她给我们买了个礼物🎁小米手环9，我的是黑色她的是银色，不过就简单的换了个软件自带免费的表盘，后面回到家后我在B站学习了一番，她看了效果她也想弄，我说我有空弄个教程给她。

准备工作

小米健康运动APP
需要一个米坛社区的账号
自定义表盘工具APP
小米健康研究

操作环境

vivo x50pro+ 版本：安卓13
自定义表盘工具版本：6.1.5
小米健康运动版本：3.37.3
小米健康研究版本：1.3
自行在各大应用商店搜索下载

第一步注册`米坛社区账号` 并安装`自定义表盘工具`

米坛社区账户注册
米坛社区
注册链接
自定义表盘工具下载并安装
蓝奏云
密码：bi1w
下载完成后，打开表盘自定义工具
点击右上角切换到小米手环9
点击右下角我的登录你的米坛社区账号
因为只是用来安装表盘所以我们选择我的-试用捐赠者功能试用时间是72小时。当然你也可以捐赠十块钱获取长期使用权`，毕竟官方表盘一个就要六块钱。开发者制作不易，不想花这十块钱，可以用别的软件。不要在本站辱骂开发者，会删评论。

第二步获取AuthKey

点击工具板块，点击AuthKey 读取工具（新）
打开小米健康研究，点击我的，点击关于
快速点击小米运动研究的Logo，在弹出的窗口中点击确定
回到表盘自定义工具，点击开始读取，复制下方的AuthKey

小米健康运动版本高于3.35.3以下请用旧版教程，推荐使用最新教程。

第三步蓝牙一键安装自定义表盘

点击探索板块，寻找想要下载的表盘，这里以五子棋为例
点击下载图标，在弹出的界面中点击蓝牙一键安装
打开手环，允许绑定请求，若绑定失败，请强制停止小米健康运动
点击开始搜索，找到并点击自己的手环。
输入刚才复制的AuthKey，点击确定
点击开始安装。

第四步安装百度地图及其补丁

由于作者限制请自行前往下载所需的两个文件，先回复一下帖子就可以下载了。
米坛社区
小米手环9 快应用百度地图&补丁
点击工具板块，点击蓝牙一键安装，使用上一步骤方法连接手环
连接成功后，点击选择文件，将刚刚下载的两个文件按顺序安装 .rpk .bin 点击开始安装
安装完后，手环点击允许，等待手环重启后，长按删除表盘。
手机上下载安装百度地图，要开启百度地图的通知权限。启用导航之后，手环上的百度地图快应用会自动启动，并显示导航信息。
小米应用商城
百度地图
更多内容请探索APP及米坛社区先看看效果吧。

结尾

本文参考

陈少鑫同学

小米手环9下载应用和游戏，以及百度地图导航！保姆级教程！

拾光の星火

『拾光』榨干小米手环9！小程序&表盘如约而至！兼具简单而快捷的安装教程，快来倒腾你的手环吧~

武汉之旅

2025-03-03T10:28:39.000Z

第一站武汉

别问为什么隔了那么久才发，问就是懒的写 ,,ԾㅂԾ,, 我这辈子都不相信 高德地图 的预计时间了，害我赶不上车，明明还有5分钟才发车，我只能改签了，我还在站里拍了照片，其实我还比了 ( •̀ ω •́ )y 我觉得不要为了打翻的牛奶而哭泣 /(ㄒoㄒ)/~~ 既然事情已经发生了，那就积极面对，下次避免发生。幸亏的是北站还有票，虽然是站票，有票还要什么自行车。然后我就从广州站跑去广州北站，开启我人生中第一次十二小时的无座之旅 (ง •_•)ง
要说是什么感觉呢，简直是煎熬啊，广州是个大站，一上车，全是人，别说坐了，连站着都没位置，要为自己的拖延买单。到湖南才没那么多人，一直站到天亮才坐了会，日出真美 (～o￣3￣)～

第二站跨年

终于到了，我还让她等了我几个小时，铭记今天，做什么都要提前！！！本来是差不多时间一起到的 /(ㄒoㄒ)/~~ 呃，异地恋懂得都懂，见面了怪尴尬的,,ԾㅂԾ,, 还不太熟，就抱了一下 \(￣︶￣*\))
武汉的地铁有特色，奈何没文化只能说：好有文化特色啊，好像是每条线都不一样，就是太贵了，不愧是排全国轨道交通营收入第一。比广州地铁好太多了，座椅还是加热的 (✿◠‿◠) 我们去了 汉口江滩 ， 江汉关钟楼 ，跨年真的感觉来了几亿人，车水马龙的。

第三站黄鹤楼

崔颢描绘 黄鹤楼 周围的壮丽景色，表达了对过去的怀念和对人生无常的感慨。当诗句在现实具象化，那一刻我看到了古人中的 黄鹤楼 ，也是这般磅礴雄伟。我们去的时候已经不让进去了，因为要作为春晚的分会场，体验各个位置时间的 黄鹤楼 吧 (✧◕ ◡ ◕✧)

《黄鹤楼》——唐·崔颢

昔人已乘黄鹤去，此地空余黄鹤楼。

黄鹤一去不复返，白云千载空悠悠。

晴川历历汉阳树，芳草萋萋鹦鹉洲。

日暮乡关何处是？烟波江上使人愁。

第四站武汉长江大桥

我们 ヽ(￣ω￣(￣ω￣〃)ゝ 去了 武汉长江大桥 看了日落，吹了江风，也看了火车的驶过，还看了夜景，也坐了轮渡。也让我感慨万分，它是新中国成立的第一座跨江大桥，作为中国现代化进程中的一部分，武汉长江大桥不仅见证了历史变迁，也反映了国家发展的成就。

第五站湖北省博物馆湖北美术馆东湖

City Walk 湖北省博物馆 ，武汉是座英雄的城市,新冠疫情中，武汉以“封一城护一国”的壮士断腕之举，为全球抗疫作出表率。我也是这个时候认识了她。还有了解一下 武汉长江大桥 通车史。看了， 越王勾践剑 ：一把剑，半部春秋史。就是太多人了挤不进去 O(∩_∩)O 也看了， 曾侯乙编钟 ：一套编钟，半部文明史。太震撼了很难想象到古人的智慧，是中国古代礼乐文明的巅峰之作。我说这头猪是她，她还狡辩，也了解到原来古时候的猪长这样。也是去了 湖北美术馆看 了一下，奈何没有什么艺术天分，啥都没看明白 (・ω・)? 东湖真的太美了，都是秋的颜色，落日余晖，与相爱的人共坐湖畔，享受一天中的宁静，我们想老了我们也这样吧 (*￣▽￣*)☁️❤️

第六站武汉大学

这次最主要的目标就是这 武汉大学 ，因为是我俩的梦中情校，我们花了一下午的时间逛学校，可以认为是一起上学，一起下课，一起走操场，一起吃饭，主要是一起 (❤ ω ❤) 很出名的 樱花大道 ，可惜来的不是时候，要是三四月份过去就能看到绝美的樱花了🌸

第七站吃吃迟迟

吃了很多当地的特色小吃。 真茶屋 ，武汉当地品牌，只有在武汉当地才有的 (✧ω✧) 肯定少不了 热干面 ，还有 汽水包 、 武汉老味面窝 、 孙氏豆皮 、 鸡冠礁 、 糯米鸡 、 汪记鲜鱼糊汤面 、花卷、 章鱼小丸子 、 炸蘑菇 。逛了 循礼门鲜花花市 ，打卡了 江汉路步行街 3D大屏，走走吃吃就到家了，美好的日子总是过的很快，又到要说再见的时候了，不知道下次见面又是何时了，不过我们来日方长，下次再见啦 ヾ(￣▽￣)Bye~Bye~

提前过三周年纪念日

因为时间的原因，我们打算提前过( *^-^)ρ(^0^* )在未来的日子里，我们还要一起创造更多美好的回忆，余生漫漫，我们来日方长，请多多关照。当然忘不了我们的老传统吃 螺蛳粉 吃的香香的离开(╯▽╰ )好香~~

已添加至足迹图，欢迎大家的查阅。
今天就这样。相信你过得也很好吧？期待下次与你再会😊。

关于我在2024年做了这件事...

2024-12-25T06:50:33.000Z

关于我在`2024`年做了这件事…

我也不知道做了什么，骗你们进来。

回顾2024年

1月

又是新的一年。
我已经从上一年的11月就已经开始了实习了，但我没有找到实习单位。本科生都饱和了，何况我这种大专生，遍地都是大学生。
网上有个段子描述的很精髓：“花3000块请不来技术师傅，但一定能请来大学生。”很有讽刺感。
没学到精髓，都只学了一些皮毛。于是我在过年期间去酒楼干起了服务员，高端人才，端菜那种。

2月

过年了。
这个班也不是很好上的，刚上没几天就吃坏东西了，肚子痛了一天，最终请假回家休息。
请了干了三、四天活，休息两天，服了自己了。
过年前那几天还被惹到了甲流，班倒是没上几天，病俩次，还没发工资就要花钱了。
上了一个多月。去了几个熟人地方拜拜年。
看了一场电影《熊出没：逆转时空》，十年来第二次进电影院看熊出没，第一次献给了首部《熊出没：夺宝熊兵》，每年必看的系列电影。
到了开学日了，没好意思呆在家了，回学校呆。

3月

迷上了欧卡2，每天在宿舍里开车。
也去一趟她那玩了一个月，陪她吃减脂餐，逛过她的学校，吃过她吃的，玩过她玩过的，拿过她拿过的快递，吹过她吹的风，感受过她学校的温度，一起做饭，一起压马路，一起看电影，一起过生日，一起吃火锅，一起吃烧烤，一起去海边，一起疯狂过…
更多的是陪伴😘。

4月

她给我买了第一款游戏欧卡2，我之前一直玩的是学习版😘。
疯狂了一个月，也该回去了…
拿到了校奖学金。
看了场演唱会《Hi陌生人，庄心妍巡回演唱会（佛山站）》。
她送了耳机😘。
然后一直在学校摆烂…

5月

她给买了一套衣服，一些水果零食😘。
弄实习的一些东西，也出去面试了几家。

6月

毕业季。
拿到了校“三好学生”。
参加毕业典礼。
获得校“优秀毕业生”。
拿毕业证，吃了顿散伙饭。
收拾东西，回家。
其实还是有点迷糊的，两年的大学生活就这样过去了，我的读书生涯也从此结束了，到现在还没转变过来，也没意识到我已经毕业半年了，在家也待了半年了。

7月

在家…
陪爷爷去看病…
拍拍天空…
打打球…
写写博客..
为二次元白月光《你的名字》补票…

8月

和哥哥一起独自生活的一个月…
手机屏幕坏了，天塌了，本就贫穷的我雪上加霜…
换了屏幕，又坏了(；′⌒`)…

她给我买了面包，饮料😘

9月

闲鱼淘了一台二手手机…
她给我买了面包😘
一直打球、摄影…
也中秋了，她给我买了月饼😘

10月

跟兄弟们聚餐…
回老家扫墓…

11月

跟兄弟打打桌球…
另一台手机屏幕又坏了，倒霉…
跟兄弟们爬山…
去钓鱼…

12月

陪叔叔们去做肠镜胃镜…
兄弟生日聚餐…
接了几单…
准备去武汉跨年…

总结2024年

总的来说，今年就是过的很迷糊，还没从学生转入到社会里，缺少社会的毒打。钱也没挣到，就要过年了。明年在努力吧，我也没什么追求，家里人健康快乐就好，家里也没要求什么，能养活自己就好。

她真的很好😘，就是我太差劲了，什么都给我买，感觉像被包养了'

新的一年祝大家平安喜乐。

2024.11.24

2024-12-08T12:19:44.000Z

别问为什么隔了那么久才发，问就是不想水（；´д｀）ゞ，再问的话就是只会写流水账，还问就是懒的写。有点忘记那天的事了 ,,ԾㅂԾ,, 没错今天又去爬山了，今天去爬 大夫山 挑战爬遍广州的山！好像每次出来，都不好运啊，刚出来就阴天了，搞不好要下雨啊，计划要泡汤啊，出发去地铁站了。坐上xjx的小电驴带上头盔出发了，他家离那里很近。开了一会天空中飘雨了，还没地方避雨，服了，兜兜转转终于找到地方避雨了，雨不大，一会后，我们就接着出发了。群里还在热火朝天的讨论要去哪个门，但是lyq已经到了北门，但我跟xjx已经到了南门，还有wzx还没到，也问我们确定去哪个门。我们决定就lyq他一个人，全都去北门，就拍了一张南门照片，就匆匆离去了。绕个大圈去北门，就怕 不够电 回来。

路上还看到一条人工饲养的河，水也清澈见底，可能是因为水少的原因。半个小时后终于到了，集合地点是大大的打卡logo。废话不多说往上爬，中途在一个院子里吃了xjx的干粮。突然就下雨了，还很大，我跟xjx都没有带伞，就wzx带了，他遮lyq，我跟xjx只能戴帽子前行。他们能直接坐公交回家，我跟xjx还要开小电驴。现在的问题是只有一件雨衣，雨又那么大，他给我穿了，雨小了准备出发了。开冲！服了这个老六了一冲出去就下大雨了，他车好像没电了，还停了几次，还推了一段路的车，太快乐了，仿佛回到小时候淋雨出来玩耍的快乐，这是很难得的。 塞翁失马焉知非福 到他家换了双拖鞋拿了把伞，还拿了一包大辣条，两根香蕉。出来发现不下雨了。服了这个老六老天爷了，真的想*****它了。走到地铁站，发现地图这里好暖和，坐到家我的衣服全干了，除了鞋子袜子。上行的电梯还坏了，倒霉透了，也算是一段特别的经历了。

今天就这样。相信你过得也很好吧？期待下次与你再会😊。

他乡纵有当头月，不及家乡一盏灯

2024-12-04T10:30:20.000Z

之前回老家拍的，还是老家的环境适合我，巴适啊！

🌏摄于：广东 · 信宜 2022-09-05

叶泯希

已同步至相册集 2024 年 7 月 24 日

name	value
GITHUBUSERNAME	你Github的用户名
GITHUBEMAIL	你Github的邮箱
PAT	包含repo和work的权限token
MY_SECRET_TOKEN	另一账号仓库包含repo和work的权限token