绘星里

2026-06小记

2026-06-29T19:57:11+08:00

如果能去服兵役的话，那这篇文章不出意外就是我今年写的最后一篇文章
同时也就代表着，下次见面可能得2年后或者5年后了
当然，前提是我能成功去

无人机全过了

我是没想到中地面站能单独去考的啊
我还以为会跟着实操一起挂的呢
要不是去问了那个老师

也是总算在这个月给地面站过了
也就是说我能拿证了
（虽然我也不知道为啥，我这边UOM打不开了，而且技能等级证书只查到个证书号，没有查到证书）

至于买无人机的事情我也跟我家长说了
结果我家长跟我说等我服完兵役回来再来考虑要不要买无人机也因此我被很多人说学了无人机证，却没买无人机，问题是我学的是中型多旋翼，而不是小型那种无人机啊喂（）

关于我的OC

之前有人说我那OC的服设不太详细，人脸也没有描述关键设定
emmm确实，毕竟写那篇文章的时候，我还不知道oc是什么
并且那篇文章也只是单纯为了介绍我的tulpa

但既然打算做成oc，那么那些设定什么的都得更新一下
具体设定已经写好了，连世界观我都搞了
但是因为请不起画师，所以我那oc的立绘图只能用AI画了QWQ

目前我是打算专门整个OC站点，毕竟域名都有了，并且有些站点框架能部署到Vercel、EO Pages等等
因此打算基于Astro或者基于Eleventy搞了

目前OC站点尚未搭建完成，完成之后我会在这篇文章站点我那oc的站点
但我能保证会在我去服兵役之前完成站点的搭建，毕竟这站点我都打算用AI写了（）

以上

2026-05小记

2026-05-31T21:32:17+08:00

抱歉博客现在才修好
这几天忙着练车+运动+处理地面站的事情，到现在才发现博客的问题

算了，正片开始！

博客又迁移到EO

友链的某位大佬说我博客访问不了
但他那边的服务器能获取到我的rss
我就感觉是Netlify的问题，就给博客迁移回EO Pages

虽然我之前放在EO Pages上面的站点有人反映访问不了
但那天杜老师跟我说了原因
说是Edgeone的节点部分有些问题导致部分地区访问不了我的站点
那既然Edgeone Pages已经恢复了，那就迁移回去吧
Edgeone Pages，真香！

哦对了，本站已经重新添加Service Worker
这是为了配合本站的PWA
至于用的方案，当然是空梦大佬的SWPP啦！
当然那SWPP的配置我其实抄的liushen那个（）

2026-06-02更新
修了不少问题
例如因为某篇文章导致的gulp压缩失败的问题话说为啥那篇文章会导致我gulp压缩失败啊喂
以及代码高亮换回了Prism.js（主要是highlight.js在那篇文章的解析也有大问题，例如解析不了pug、样式错乱等问题）

无人机又挂了

坏消息：无人机那边挂了
好消息：挂的是最难的地面站
虽然一点都不好就是啦哈哈哈……屮！

主要这回的地面站是整了个啥新规
再加上考试前五天，我从家里带来的笔记本电脑坏了
只能租台笔记本了
~~但我挂的原因是地面站那起飞点设置错了，虽然跟我同个队伍那位更惨，整个图画反了~~

成功拿到驾照

其实科目二从过年之前我就考完了
只不过因为要学无人机，之后也约不到科目三，拖到这个月才考完
好消息是科目三满分通关（结果科目四差点挂了，92分，极限过关）

上图！

关于我的OC

前情提要：我的tulpa —— 夏玖铃的简介

没错，我打算给这位做成我OC了
但是因为那图片是AI图，因此那图片暂时不考虑作为我那OC的形象
只能等有时间找个画师或者我自己学绘画再来画了
因此可能得到时候才能公布我那位OC的全部设定了

以上

2026-04小记

2026-05-01T21:58:05+08:00

因为上次那无人机考试没过，挂在理论上了，艹
因此这次又得去一趟佛山
导致这次小记拖到现在才写，抱歉！

算了，正片开始！

博客更新情况

回到老家看博客的时候，突然发现下面没有版权声明提示
因此加了一个

但加了之后，又感觉那地方的下面空空的
然后又想到了 liushen 大佬之前推荐的 emaction
因此用AI给这玩意适配 pjax 了
详情可以看我这篇文章： emaction，但适配pjax（附新版教程）

既然谈到了AI，那不得不提我那说说了
在友链朋友圈的：如何从 ClawCloud Run 爪云迁移 n8n 到自托管 Docker
这篇文章里得知了 ClawCloud Run 服务要下线了
而我的说说基于Ech0，正好部署在那个地方
于是只能换个方案部署我的说说了

然后就想到：既然我可以用AI魔改emaction，那我为啥不用AI给我写个说说方案呢？
于是就让Qoder来了

效果还不错！支持Twikoo，同时也有点赞功能，并且能部署到Vercel里面
但是我那说说方案我就不打算公开了，毕竟AI写的，有啥公开的必要？

去广州那边玩了

无人机考完试之后，我就去广州玩了
毕竟想回复下我的心情嘛

广州的话，首先就是我最期待的音游窝了（啊音游吃）
第一个是WIN窝，这也是我印象深刻的一个窝
毕竟我是这个窝里面为数不多用现金付款的（

第二个就是UP窝（UnityPower 团结之力）了
我第一次去那地方的时候，貌似没完全装修完成
不过音游窝倒是还在开放（毕竟纯自助……）

音游窝的话我只逛了两个
原先有第三个的，但是被定位坑了
那窝在杭州，但定位在腾讯那边…… 只能说我是为数不多被定位坑的音游玩家了……

广州塔

至于为什么广州塔要单开一部分，当然是因为这部分是为数不多我有去拍照的
毕竟是舅舅请我去的，当然得去好好地逛逛啦！
而且当时买的还是450米观景平台的票

但是那上面风是真的大啊，我拍照的时候手机差点被吹飞
而且当时还是晚上，我又穿着短袖，手一直在抖
因此拍照效果不好，请见谅！

这最后一张还是我为数不多拍得好的一张……

劳动节假期，再次去佛山

这次是为了去补考
毕竟我刚也说了，我理论考没过
甚至这篇文章还是我人在佛山这边写的

刷题去了，不然又得挂科了，就这样

以上

emaction，但适配pjax（附新版教程）

2026-04-27T18:10:18+08:00

前言

各位也发现了，本站的版权声明下方添加了一个类似于 GitHub 的点赞功能的按钮，就是 emaction
这个点赞功能基本上 1:1 还原了 GitHub 的点赞功能，因此很久之前我就想搞这个了
之前这个功能在我的博客上一段时间，不过由于这玩意不适配pjax
并且我用很多AI工具给这玩意适配pjax，结果都是以失败告终，我才放弃这个的
直到今天，才用Qoder搞定这玩意的pjax适配，并且在我的博客上将这个功能“复活”

下面没啥好说的，直接开始教程吧！

教程开始！

原官方提供的 API 早就寄了，因此必须得自建后端，目前这玩意的后端只有 CF Worker 方案

部署后端

此部分搬运自：自部署 GitHub 风格的 Reactions 点赞功能
但这教程比较久远，因此我搬的时候做了大量修改，给后面的创建数据表的教程放到创建数据库之后的步骤

前提：

需要有 Cloudflare 账号
电脑中需要有 Node.js 环境

首先去 Cloudflare 创建一个名为：emaction 的 D1 数据库
复制此数据库的 id，如：acf6da62-7777-4459-a579-123456789012

之后点击右上角的 Explore Data

在下面这个框里面输入创建数据表的命令：

CREATE TABLE reactions (
 id INTEGER PRIMARY KEY AUTOINCREMENT,
 target_id TEXT NOT NULL,
 reaction_name TEXT NOT NULL,
 count INTEGER NOT NULL DEFAULT 0,
 created_at INTEGER NOT NULL,
 updated_at INTEGER NOT NULL
 )

点击 Run ，出现下面的结果，数据表就创建完成了：

然后在本地电脑中克隆代码：

git clone https://github.com/emaction/emaction.backend.git

安装依赖包：

cd emaction.backend

# 安装 packages
npm install

# 全局安装 Wrangler
npm install -g wrangler

PS：这里有同学反应需要全局 -g 安装 Wrangler
如果没有添加这个 -g ，那么这下面的命令不是直接运行 wrangler ，而是 npx wrangler
说实在的我也不知道为啥这样，但是我也不在意，毕竟原作者也不明白为什么（

修改克隆代码 wrangler.toml 文件中的 database_id 为自己的：

name = "api-emaction"
main = "src/worker.js"
compatibility_date = "2023-07-25"
usage_model = "bundled"
env = { }

[[d1_databases]]
binding = "d1" # i.e. available in your Worker on env.DB
database_name = "emaction"
database_id = "acf6da62-7777-4459-a579-123456789012" # 修改成自己的

[triggers]
crons = [ ]

wrangler login

在弹出的浏览器页面中，点 Allow 授权就可以了。

最后部署项目到 Cloudflare Worker：

wrangler deploy

然后登录 Cloudflare Worker ，就能找到一个名为 api-emaction 的 Worker 了。
这个名称与克隆代码中的 package.json 文件中的名字对应，可自行选择是否修改。
记住此 Worker 的域名：https://api-emaction.xxxxxxx.workers.dev。
如果用户大多数为国内的，可能需要绑定一个自定义域名才能友好访问。

前端使用（原版）

前端使用时，跟 emaction/emaction.frontend 的说明文档一样即可。
只是需要把自定义的 endpoint 传参给 JS 代码。

在 HTML 中引入 JS Module。
这个 JS 是可以下载下来自行修改和部署的：

<script type="module" src="https://cdn.jsdelivr.net/gh/emaction/frontend.dist@1.0.7/bundle.js"></script>

在 HTML 使用这个 Module：

<emoji-reaction endpoint="https://api-emaction.xxxxxx.workers.dev"></emoji-reaction>

这个 endpoint 没有防呆设计，不要输入末尾的 “/” 斜杠。
自定义 ID reacttargetid 可选修改，在同一页面内有多个 Reactions 的时候，尽量使用。

前端使用（适配pjax的版本）

下载我上面提到的适配了pjax的js文件： emaction.pjax.js
按照上面的方法引入：

<script type="module" src="/js/emaction.esm.js"></script>

然后在 HTML 使用这个 Module （跟上面的方法一样）：

<emoji-reaction endpoint="https://api-emaction.xxxxxx.workers.dev"></emoji-reaction>

这个js的 endpoint 我已经添加了防呆设计，也就是说末尾的 “/” 斜杠加不加都可以。
自定义 ID reacttargetid 跟上面一样，也是可选修改

还有，这个js适配了亮暗色模式的自动适配，可以通过 data-theme="dark" 自动检测亮暗色模式了
并且可以通过组件级别控制亮暗色模式：

<emoji-reaction theme="dark"></emoji-reaction>
<emoji-reaction theme="light"></emoji-reaction>
<emoji-reaction theme="system"></emoji-reaction>

2026-03小记

2026-03-30T21:09:51+08:00

还有10天就要无人机考试了
但就特别巧，我生日的隔天刚好就是我无人机考试当天
因此到时肯定得许个愿望，愿自己能拿到无人机的CAAC证书（

算了，话不多说，正片开始！

关于宿舍内的生活

因为我学无人机的地方在佛山
而这地方离我的老家 —— 潮州，较远指开高铁也得一个小时这也算是我第一次自己独立在外面生活的吧
至于资金的话，不够我可以跟我家长要（

宿舍生活没有什么特殊的，就这么一笔带过吧

目前无人机的学习状况

拼尽全力，在今天终于给理论控到80分以上了！
而我学的超视距，理论成绩的分数得到80分以上
因此我依然还得练我的理论
毕竟后面还有综合问答、实操、地面站那些东西（

有关博客的情况

去佛山之前给博客添加了加载动画和背景动画
并且给header固定了
同时右下角添加了“跳转到评论”的按钮和“回到顶部的按钮”

然后在配置Twikoo评论的时候发现Twikoo居然支持极验证了
于是给Twikoo添加了极验证
然后Twikoo的QQ昵称得自己配置key，所以我顺带给key也给配置了

但这几天博客除了修复一些东西之外可能不会有什么大更新，因为我还得学无人机呢就这样吧

个人主页再次上新 + 搞了一些项目

因为之前那个个人主页我个人不太喜欢
于是去佛山之前给我个人主页更新了下
嗯，突然就感觉高级许多了~
再加上用的RemixIcon作为图标库，感觉变好看了许多
同时也多了许多功能，例如侧边天气、侧边现在时间、文章页和独立的“所有网站”页面

但是因为那时候感觉这个“所有网站”里面的站点很少
正好花露水推荐了几个能通过Vercel或者Cloudflare部署的项目
我就学着他的教程或者自己摸索来搭建某些项目了

花露水的教程：

以上

2026-02小记

2026-02-26T21:02:39+08:00

2026的2月也是快结束了
刷完无人机的题目之后匆匆来写文章了

话不多说，正片开始！

说说的更换

从很久之前我就想给我说说方案给换掉了
但基于没找到什么方案，就使用了Trae写一个说说
但是说说一直使用AI方案也是不太好

直到后面得知了Ech0能搭建在Zeabur中
于是我那说说方案就换成了Ech0了

至于使用的方案嘛，是抄的https://blog.mcxiafeng.top/dynamic这个啦
毕竟这个方案带点赞和评论系统了，改了一下我直接用了

2026.02.27更新：Zeabur疑似要停止开发共享集群，目前正在寻找别的方案
详情：共享集群将不再开放新项目

评论换回Twikoo了

像上文说的，Zeabur疑似要停止开发共享集群
而我的Artalk评论系统就是部署在Zeabur上的

因此我的评论系统已经换回Twikoo

沉迷于星趴（吉星派对）中了

吉星派对手游是终于公测了
然后嘛最近这几天也就一直沉迷于星趴了

不得不说抽到邦尼之后PVE突然就简单起来了
然后就一发不可收拾，现在已经解锁南希露的旗袍了
（肝了很久终于肝出来了😁）

说一下下个月的行程

下个月的14日，我打算去佛山一个月
为啥？因为去学无人机了
毕竟到时是要服兵役的，当然要学这个技能啦

啥？高考？我之前也说了我打算去服兵役了
而且我的学业水平考试的成绩被英语背刺了
但既然都不打算参加高考，去服兵役了，那就将这条路走到头吧
反正后面还有两种选择呢

而且去佛山≠没法更新博客
因为到时可能得带电脑去，而我博客源码+那些文章早就上传到cnb了
（并且为了防止有些人爬我的文章，还是设置的私有仓库话说真有逆天来爬我文章吗……）
也就是说如果我要写文章可以给整个博客从cnb中pull下来

至于放在cnb的博客怎么部署的……看我之前写的教程：将Hugo博客通过CNB部署到Edgeone Pages和Vercel

以上

2026-01小记

2026-01-28T22:58:47+08:00

春节高考也已经过去很久了
而2026年的第一个月也即将结束了

那话不多说，正片开始！

域名又一次更换+新域名的含义

上午腾讯云提醒我的top域名在26年的3月过期
正好那fun域名也是在26年过期的
因此我打算给两个域名都续一年了
主要是如果我去服兵役的话，还得确保这两个域名不会过期，要不然服完兵役之后给域名续回来又是一笔很大的开销

但是我看fun的续费价就傻了：
165元，续不起啊续不起
再加上我原本是想注册storia.fun，结果被我注册成storical.fun
我就只能废弃这个宝藏域名了

新的域名是ren末尾的
因为storia算是story的衍生词
所以storia.ren可以理解为“故事的人”

感谢何总送来的泰拉瑞亚正版（

还记得我上次说的那个哥们吗？
那哥们之前在某音极速版刷视频赚了很多钱不是这玩意真能赚钱啊
再加上他之前也买了泰拉瑞亚正版，寻思着给我买了之后我们一起玩

还有，泰拉瑞亚其实是有模组的
但我弟说要玩模组先玩玩原版泰拉，后面再来玩玩模组
我也觉得合理，那哥们也同意这个说法
但是我们的进度属实是特别慢，3天了都没去打boss
这是因为我还得去学车，那哥们得去医院（之前也说了他肺结核）
所以这几天都没咋玩了

明日方舟·终末地试玩

早就刷到这款游戏的广告了
再加上我同学对这款游戏一直也期待着
也成功地让我对这款游戏感兴趣（而且是在我不太喜欢玩开放世界游戏的情况下）

but因为之前特别忙，忙于驾校又忙于打工
所以我最近都没怎么去玩
这个环节就这样

又收藏了一些老机子

之前用三星i839在庸哥（中庸电视）那边换了台LG GM750
老早就想玩玩Windows Mobile 6.5了
正好我也没找到Mizi Linux的软件，干脆就给那三星i839换去了
虽然这是12月的事情了，但是我才发现我写小记的时候忘记写这个内容了QWQ

然后又收了台索尼爱立信U10i、诺基亚603和诺基亚n97mini
话不多说，上照片！

首先是LG GW750：这机子我上面也说了，用的是Windows Mobile 6.5
但这机子的桌面却不是用的Windows Mobile 6.5原生桌面
而是LG自己的S-Class UI
那时LG的那些触摸机型经常用这个UI（例如LG BL40）

顺带一提，这机子的语言是繁体中文
因为这机子是欧版机刷的台板系统

然后是索尼爱立信U10i：这机子就很有说法了，触屏+滑盖+WiFi
这机子也成为索爱为数不多带WiFi的功能机
（我这台是贴了进网许可，但是有人说是假国行，管他呢，水货也行，毕竟这机子黄鱼价格100多，我到手这台还是打折后70多入手的）

但这机子我有一点要吐槽
就是关闭滑盖的情况下是能触摸的界面
打开滑盖不能触摸
然后玩游戏的时候又能触摸了
（但仔细一想又感觉很合理，毕竟这机子是用的A200功能机系统，估计索爱没做触摸适配）

然后是诺基亚603：收这台机子的原因是受不了诺基亚500的很多游戏没法正常游玩
毕竟500用的Symbian^3，却比同样都是Symbian^3的机子相差很远
最明显的就是配置，这导致很多塞班3专属的游戏，500都没法玩

我原本是想入手808的，但这机子的价格。。。。。。不是我所受不起的
而且603有NFC，就入手603了

顺带一提，这台603我收来的时候，屏幕有黑线
但是被我刷机之后，黑线不仅变短了，然后逐渐消失了
这可谓是一个奇迹（

最后就是n97mini了：这机子还是群友推荐的
然后去查了下，才知道有带mini的版本
而且群友说最好是n97mini
毕竟这机子相比于原版n97，RAM更大，并且国行带WiFi
就入手了n97mini

这机子的一个特点就是侧滑盖（废话）
s60v5的侧滑机子我是老早之前就想玩玩了
就入手了这台机器

而且这机器还是还有卡尔蔡司认证摄像头
虽然像素比较低
但诺基亚那些带卡尔蔡司认证的机子说是还有一席之地
而且之前也试了诺基亚500的拍照，也是比较好看
所以n97mini还是值得一试的

以上

将Hugo博客通过CNB部署到Edgeone Pages和Vercel

2026-01-11T11:42:14+08:00

考完春季高考之后，终究还是没忍住 CNB 和 Edgeone Pages 的诱惑

到家立刻就给博客源码放到CNB上面来了当然这没有开源
同时在枋柚梓的文章那边抄了个将博客仓库同步到Github的配置

但是 Edgeone Pages 没有可以配置Hugo模版的地方
而且cnb的云原生构建和和github action不太一样
云原生那个是用的Docker镜像

我选取的镜像是hugomods/hugo:node-git，因为这个镜像带 Git 和 node
（用 Node 的原因是我配置了 gulp 来压缩站点的静态资源）

配置文件（Vercel）：

# 定义云构建
main:
 push:
 - name: 上传到Vercel
 imports:
 - https://cnb.cool/SinzMise/szn-cnb-keys/-/blob/main/blog-push.yml
 docker:
 image: hugomods/hugo:node-git
 volumes:
 - /root/.npm
 - ./node_modules
 stages:
 - name: 安装依赖
 script: |
 npm install
 npm install -g gulp-cli vercel
 - name: 构建博客 + 上传到Vercel
 script: |
 npm run build
 npm run compress
 cd public
 vercel deploy --prod --token $VERCEL_TOKEN

配置文件（Edgeone Pages）：

# 定义云构建
main:
 push:
 - name: 上传到Edgeone
 imports:
 - https://cnb.cool/SinzMise/szn-cnb-keys/-/blob/main/blog-push.yml
 docker:
 image: hugomods/hugo:node-git
 volumes:
 - /root/.npm
 - ./node_modules
 stages:
 - name: 安装依赖
 script: |
 npm install
 npm install -g gulp-cli edgeone
 - name: 构建博客 + 上传到Edgeone
 script: |
 npm run build
 npm run compress
 edgeone pages deploy ./public -n cenablog -t $EDGEONE_TOKEN

关于npm run build和npm run compress的定义如下：

{
 "scripts": {
 "build": "node link.js && hugo --gc", // 友链朋友圈json的生成和Hugo的构建
 "compress": "gulp" // 静态资源压缩
 },
}

2025小结

2025-12-27T19:22:32+08:00

2025快结束了
而很多人的2025小结都已经写完了
既然这样那我也跟着写才对嘛
（虽说这个总结相比于别人的总结来说很拉吧。。。。。。）

博客 —— 兜兜转转，最后来到了Hugo

从2025年3月开始，我就已经抛弃了被我使用了5年的Hexo，换成Valaxy
因为Valaxy官方暂时没有对我来讲很好看的主题，所以那时就基于晓雨杂记的同款主题魔改自用
然后因为意外找到了 VitePress-Theme-BlueArchive这个主题
于是就抄了这个主题的样式放到这个我自用的Valaxy主题里面

但因为标签外挂的原因，只用了一个月便被我抛弃了
第二次换框架，使用VitePress，基于 vitepress-theme-curve魔改
也是给那主题用上了我从BlueArchive主题抄过来的样式
别问我为啥不用那BlueArchive主题，问就是喜欢Heo那风格（

这样的日子持续了5个月，然后就在我想用 Qexo的时候，问题又来了
Qexo居然不支持在VitePress里面写文章
再加上我废弃了这个space域名，换成fun域名
于是就换成现在用的 Hugo

原先那Hugo主题是基于 Blonde改的
也是抄了BlueArchive的样式

结果不到一个月，因为手机访问特别慢，因此我直接从零开始，自己写个主题
这个主题采用了Bulma CSS框架，也是我在Valaxy时期喜欢的框架
那个版本只用了两个月，又出问题了

css被我写烂了，再加上CSS框架的某些局限性，导致我在魔改一些地方的时候都得围绕Bulma CSS转
因此我做了个违背祖宗的决定：放弃采用CSS框架，换成scss作为样式
同时也抛弃了这个被我抄过来的BlueArchive的样式，改为简约风格

但是未来还会不会重新换框架或者一直使用Hugo，这个我就不得而知了

游戏 —— 入坑了许多游戏呢

今年入坑的游戏特别多，我就只来个列表吧（

吉星派对（测试服，目前公测已经结束）
无畏契约（暂时退坑，不好玩）
卡拉彼丘（没咋玩了）
汹涌海豚（台服）
咸鱼喵喵（别问我为啥没入坑这玩意的前作）
糖豆人手机版（没错，2026快开始了我才入坑这玩意）
忘了，反正有些是退坑的退，删的删

未来 —— 两条道路，两种选择

今年的春季高考提前了，是2026年1月8日开始
而我的目标不是7月的那个夏季高考，而是这个春季高考
原因很简单，我之前也说了，如果能去服兵役的话我就去服兵役
不能去服兵役的话的话就只能去专科大学

因此我将希望寄托在这次春季高考上面
毕竟如果这场考试能考好的话，不出意外能上个特别好的专科公办学校

虽然我班主任说就我第一次联考的成绩，只要我努努力能能冲上好的本科公办
但既然我都已经做了决定，就按照这条路走下去吧
毕竟我的未来可是有两个选择呢）

不说了，复习去了

2025-12小记

2025-12-27T07:50:37+08:00

2025快结束了
但是小记还是要写的

主题又一次重写

具体可以看我之前发的那篇文章： 2025的最后几天，主题再次重写
最近这几天又给博客改了点东西

首先是换回了Artalk评论系统 Artalk我期待你很久了！
是用的zeabur部署的Artalk

然后主题手机端优化了一下
因为之前手机端出现内容过窄的情况
并且也修了代码高亮的问题

还有现在的PWA已经换成通过Hugo的模板动态生成方式生成了
当然SW是没搞的，毕竟之前我搞那SW差点被纸鹿骂了一顿。。。。。。

关于上次那哥们的后续

现在那个哥们已经恢复正常了（虽然不是在我的帮助下的）
而且他也开始帮助比他更困难的人了

顺带一提，他写了一篇文章来讲这件事：解决焦虑抑郁只需要好的心态和方法

折腾Lumia，翻车，然后又折腾

之前不是说我收藏了一台诺基亚的塞班3的机子吗？
既然塞班都有了，那Windows Phone为何不搞？
于是我在黄鱼里面收了台诺基亚 Lumia 638

原先那机子是一直重启，有位大佬就推荐我给这机子重新刷机
也是成功刷上Windows Phone 8.1了
但是隔天中午我放学回家，给这机器启动的时候，手机黑屏了
那大佬跟我说主板有问题，推荐我换一台

于是就买了台微软Lumia 640
刚开始我还不知道这是俄版机器，就只是给这机器刷机，然后解锁BL
但后面给这机器插卡的时候，问题来了，这机器不支持4G！
而其它版本的Lumia 640是支持4G的
。。。。。。
只能给这机器刷到WP8.1然后就不折腾了

也因此，我又在黄鱼上整了台640XL
这回是终于支持4G了
但这机子我到现在都还没能刷到Windows 10 Mobile
因为这机子根本就没有Windows 10 Mobile的刷机包！
要给这机器升级到Windows 10 Mobile，只能通过OTA或者离线包推送Windows 10 Mobile上去
OTA推送之后出问题了：两个卡槽都没法识别了
而我不知道怎么离线推送，只能给这机子刷回Windows Phone 8.1了

但最近找到了个教程：史上最详细的Lumia640离线升级Win10mobile教程
而且问了一下大佬，说是640XL也可以通过这个教程升级到Windows 10 Mobile
但是亲测失败了

于是我又刷回Windows Phone 8.1，然后再用刷机迷的方法升到Windows 10 Mobile了
这回就没出事了，就从14393升级到15063了

结语

时间过得真的快，转眼间2025快结束了
但是2025的年度总结我不打算放在这里，而是另开一篇文章写总结
而总结可能得到明天才能发出来了
所以，敬请期待！

2025的最后几天，主题再次重写

2025-12-20T21:14:21+08:00

这已经是我用Hugo以来重写的第三个主题了
前面的那个主题因为css写烂了，导致样式不协调，只能整个重写

更换风格

各位也发现了，这次的主题不是Blue Archive风格了，而是采用简约的风格
因为这个站点的名字 —— 绘星里，灵感来源于我们这边部分的巷子的名字
既然是巷子，那就得多点自然的感觉嘛
因此，使用绿色作为主题色也因为想体现“自然”

IndieWeb相关

IndieWeb的相关适配我还是有搞的，毕竟本站加入了IndieWeb Webring嘛
再加上IndieWeb的中文名 —— “独立网络”，也正好匹配我将这个博客站作为我自己的“小世界”

再见！Font-Awesome

之前看了下FontAwesome的新版本，发现FontAwesome-Free那些图标都变丑了
而那些好看的图标需要FontawesomePro
而旧版本FontAwesome也不符合现在的风格
于是就抛弃了Fontawesome，改用 Remixicon 作为图标库

抛弃CSS库

在我换Hugo的初期和主题二次重写的时候都用了CSS库
第一个是 Tailwind CSS，第二个是 Bulma
但过于依赖CSS库也不太好
因为如果过于依赖CSS库的话，我添加功能就得围绕CSS库转
而且也考虑到我站点的风格为“自然”

因此我决定放弃CSS库的使用，转而使用SCSS，并且通过Hugo的预处理器转换成css

主题的名字

至于主题的名字嘛，考虑到我站点的英文名是 Cena Storia
而且这个站又名“汐娜物语”，要不就命名为Cena吧

这个主题要不要开源？

这个主题我暂时不打算开源，毕竟也只是个半成品
而且我的技术有限，因此开源的话也是会以“半成品”的形式开源

一个追梦者的“堕落”

2025-12-07T16:34:42+08:00

说实在的，这件事的严重程度真的已经超乎了我的想象
我也从没想过一个人能堕落得这么彻底
并且那个人，不是别人，而是我的一个哥们

介绍一下那个哥们

我在高一的时候就开始认识他了，那时候他是想问我有关Hexo的事情
彼时我还在魔改Hexo的Butterfly主题，正好他也是用的butterfly
然后后面就开始不止聊博客了，还一起玩游戏了

虽然他跟我说他是残疾人，但是他对于生活还是挺乐观的

当然，这是他初三毕业前的事情了
因为他初三毕业后发生了很多打击他事情
先是去修电脑结果修完后显卡被偷了，再是查到肺结核导致没法读高一了
而且听他说，他家人说是照顾他，其实也没咋照顾
然后也发生了很多有的没的事情，我就不一一说出来了

总之，这几件事情之后我就发觉这哥们那越来越堕落了
直到昨天发生的一件事情，让他彻彻底底坠入了堕落的深渊

对于这件事。。。。。。

我文笔不好，再加上我个人也是情商很低的人，就不想评价了
但我之前找到了一首歌，叫《反乌托邦》，也不知道符不符合他现在这情况
那既然这样就放出来吧，也不知道他听了之后会不会有所触动

2025-11小记

2025-11-29T21:15:27+08:00

这个月发生的事很少

但是依然还是有精彩的事情

新的个人主页（但遇见Netlify抽风的情况）

闲着没事干，再加上之前的个人主页访问速度太慢
特此重写个人主页
新的个人主页基于Astro构建，部署在Netlify上

但是部署到Netlify的时候出现了一种情况：
证书发配特别慢，导致有一段时间个人主页出现没法访问的情况
现在已经好了 Netlify这证书发配速度是真慢啊

个人主页链接： https://www.storical.fun/

老机记录——翻车的诺基亚C6-01

之前在黄鱼上收了台没测试过的诺基亚C6-01
那机子我测试了能开机，但是机子出现爆音的情况
就打算收台SIM卡槽坏掉的机子作为那个机子的配件机

但给这机子的主板换到那台机子上面依然出现爆音的情况
后面刷机了也没用
就知道这个机子是翻车了

目前那两台机子已经出掉了，然后搞了台诺基亚500

老机记录——诺基亚500

承接上文，就来说下这台诺基亚500了
那机子成色不好，而且开机有密码虽然是薛定谔的密码，只在开机后出现，随便输入都能进系统
给这机子刷到贝拉之后密码没了，并且测了一下一切正常

之前脑抽给这机子带到汕头龙眼南路那边的美食街了
结果我那主力机（Redmi Note 11T Pro）因为忘记充电，导致去到那边之后电量仅剩5%
只能拿那台诺基亚拍照了没想到这机子也有发挥作用的一次）

下面是该机的拍照效果：

出乎意料的，这机子放在2025年成像效果居然这么好
不愧是经过卡尔蔡司认证的镜头虽然这机子背面没写，别的机子倒是有，但是看这机子的成像素质，怎么着也是个卡尔蔡司认证的级别啊（

以上
元旦再会！

2025-10小记

2025-10-26T19:21:18+08:00

这个月发生的事情很多啊
精彩的和不精彩的也有 ~~（废话）~~

算了不废话了，正片开始！

主题重写

之前用手机访问了我的博客
访问速度非常慢，而且加载速度很长
就打算从头开始，给主题重写了

重写后的主题采用的Bulma CSS框架
毕竟之前用Valaxy的时候就是用的这个CSS框架
也算是个非常好用的CSS框架
以及这次使用的是SCSS，通过toCSS转为CSS文件
至于依然还是老生常谈的IndieWeb适配和Blue Archive风格也还在

目前主题还是有很多没完善的地方，例如没有搜索功能和音乐播放器等等
这些得在下个月的周六（刚好是11月1日）来搞了

卡拉彼丘活了喵

2025年10月23日早上10点，卡拉彼丘手游宣布开服
作为玩过端游的老玩家，也是终于玩上了手游
弦化玩法和角色的立绘依然在，而且手游的打击感很好（相比于瓦来说）

这玩意之前还衍生出一个梗，就是“卡拉彼丘似了喵”
毕竟卡丘端游的流水确实挺难评

先这样吧，目前不知道还有啥可以写了

2025国庆小记

2025-10-08T20:57:32+08:00

这次国庆小记是我突发奇想要写的

算了，不多废话了，上正片

关于站点

吸取几天前差点被纸鹿等一些大佬骂的经验
已经修了我博客一些因为我的神人操作导致的bug
顺带给SW也给关了
毕竟SW、gulp和那啥来着被称为BUG御三家😂

还有，可算给WebMention给搞好了
之前意外看到个教程说静态博客的WebMention能加装发送回响的按钮
然后我就给这个加上了
有发送按钮，为啥不搞（

顺带一提，说说页目前已经回归，采用的 Qexo + Uyoahz26/daodao
毕竟这个版本好看嘛（
同时，访客统计也是用的Qexo的访客统计
别问为啥不用不蒜子，懒得适配，而且还处于不稳定的状态

国庆经历

我可能算是最早就给国庆作业做完的人吧
毕竟我国庆假期的第一天整天都拿来做作业了阿喂（虽然有补习班的作业就是了QWQ）

别问为啥作业这么早就昨晚，因为10月2日上午和下午都去忙了
直到晚上事情做好了，我家长奖励我们去万达广场
然后嘛，我就去打舞萌了（awmc）

然后10月4日是我妈的同学过生日，我们就在晚上吃烧烤去了

10月5日的晚上就比较惨了，得去补习，然后又有作业力（悲）

10月6日是中秋节
但是我们今年的拜月轮不到我们
就去汕头东海岸逛逛了

10月7日我奶奶生日，然后全家就去别的餐厅吃饭了

而今天，也就是10月8日的下午，我又得去补习😂
虽然原先是10月7日的晚上要去的，但我家长都劝我请假，我也就请假了

总的来说，这次国庆经历的。。。。。。。还算丰富？
毕竟国庆假期要去补习的可能就我一个了QWQ

以上

2025-09小记

2025-09-27T08:39:48+08:00

首先祝大家国庆中秋双节快乐！
然后，各位看见这个站点应该知道发生什么事件了吧
没错，本站已经将框架由VitePress正式换成Hugo了

更换框架 —— 从VitePress到Hugo

因为VitePress没法用Qexo写博客，所以就萌生了给框架换成Hugo的想法
刚好这几天已经给域名换了，所以就已经着手准备了

至于主题嘛，原本是想自己写的
但是我不太会Hugo的语法，所以就只能改主题了（

这个主题是基于Blonde改的，还是那个BlueArchive样式，还是那个IndieWeb，只不过这次我没搞WebMention
WebMention只能等国庆再来搞了

还有，原blog.storical.space已经301重定向到此站
直至域名过期后废止

至于“绘星里”这个名字，是参考我们这边部分的巷子的名字
我们这边有些巷子名字叫“**内”或者“**里”
但是“绘星内”我感觉这名字很不好听，于是就变成“绘星里”了
当然各位还是不习惯这个名字的话，叫“绘星魔法屋”也行

这个月发生的事情好多

之前因为一些问题，本站下掉了所有的虚拟ICP备链接
再然后就是十年之约易主等等等等一系列问题

不过这样无伤大雅，毕竟这与我站点现在的情况没有太大关系

现在能访问那就好了

入坑无畏契约（瓦罗兰特）

没错，我也来打瓦了
主要是咱班打瓦的真的很多，一通操作下来我也想来打了

而且还拉了何星梦一起来玩

但是因为是最近才入坑的，所以这个部分会很短。。。。。。

回忆童年

之前从别的视频刷到《快乐的扑满》这首歌
使我的目光开始移向我童年想看但又不好意思的动画——巴啦啦小魔仙
可以这么说，巴啦啦小魔仙系列里面我最有印象的，当属《彩虹心石》、《奇迹舞步》和《飞跃彩灵堡》

《彩虹心石》是因为一位已经被废弃的主角 —— 魔仙小千
（别问为啥我会说被废弃，因为这位主角只才《彩虹心石》出现过）

《奇迹舞步》则是它的歌词“巴啦啦魔法~ So Fa Fa So Fa~”和它的画风（据说是视美创作的）

而《飞跃彩灵堡》有印象的则是第二部
因为《飞跃彩灵堡》第二部上映的同一年（2017）出现了我喜欢的动画：《超级小熊布迷》和《超迷你战士》（顺带一提，我有印象的另一部动画是《半斤八两》也是2017年上映的，而且这部动画经常在《超级小熊布迷》之前的时间段播放）

还有，我也去刷了《熊出没》和《喜羊羊与灰太狼》相关的视频

突然想到，《熊出没之怪兽计划》的片头曲《彩虹》与《巴啦啦小魔仙之飞越彩灵堡》很般配，估计我可能会做这个二创（doge）写这篇文章的时候，突然想起来跟《熊出没》同个公司（华强方特）还有一个作品《虫虫闹翻天》，也是我童年喜欢的动画

看着这些动画片，我依稀想起了我的童年
可惜时间过得真快，而童年也不知不觉的就消失了

以上

2025-08小记

2025-08-24T13:20:34Z

已经开学一个月了，而有一些小伙伴也要开学了

算了，话不多说，正片开始！

舞萌DX —— 终于解锁纱露朵了！

没错，这个月又去打舞萌了

刚好在那一天，我成功解锁我在舞萌DX的第一个搭档：纱露朵

但是因为只打了一次，所以。。。。。。。就只是一笔带过了

优化了一下站点

各位可能也发现了

本站底部的虚拟ICP备案已经消失了

没错，江苏GFW已经发布新规矩，要求给那些加入虚拟ICP备的删除那些虚拟ICP备，否则就得墙

那既然这样了，顺带给站点的footer优化一下

把那些我加入的站长联盟给迁移到关于页面来了

顺带一提，本站已经申请重新加入博友圈（毕竟都已经换域名了）

如果申请成功的话，本站将会在关于页面添加博友圈链接

关于未来

都开学一个月了，那我也得说说我未来要干的事情吧

目前想先给小高考冲了，得到个专科的毕业证书

然后大高考就不考虑了，毕竟我打算在明年的10月开始服两年义务兵

届时如果能服兵役的话，那这个站可能得两年之后才能更新了

如果不能的话，我就打算冲打算冲深圳职业学院了（有人说这学校非常好）

就这样吧

2025-07小记

2025-07-30T14:02:32Z

好消息：我的台式机修好了

坏消息：因为我高三了，所以8月1开学

算了，别说这么多了，正片开始！

台式机终于修好了啊啊啊啊啊啊啊啊啊！

终于！终于啊！经历一个半月，我的台式机终于是修好了！

现在终于是可以玩1.21了

而且荒野行动也可以玩电脑版了！

个人主页再次更新

是的，个人主页重写了

这次是基于zyyo的那个个人主页修改的

只不过这个用的是Hugo重写，这样的话管理配置也方便一些

同时也使用了marquee功能添加了公告

新朋友！

之前有个人再评论区跟我说有关他那vps的事情

在此之前他跟我说我那电脑的问题

然后我加了他qq（主要是再这么聊下去我评论区迟早被填满）

跟他聊聊VPS的事情

结果当天晚上他跟我说他也玩MC，就约好一起玩游戏

除了MC，还一起玩荒野行动（虽然他不太会玩就是了）

这个月，两天舞萌

没错，又去玩舞萌DX了

只不过两天只有一天是真正意义上的霸机

因为另外一天是换个地方打舞萌了，而那个地方排卡的人很多

所以舞萌没打多少时间，反而大多时间都用去打太鼓达人了

而这个月有一个9+级别的谱被我鸟了（虽然没有加）

而10级的谱嘛。。。。。。能打出S+我就满足了

好消息：下次打舞萌就能拿到盐巴（纱露朵）了

坏消息：下次打舞萌可能得到国庆放假

以上

2025-06小记

2025-06-28T20:02:32Z

暑假也是快到来了

但是嘛，牢何已经放假了、异家群的人大多已经放假了，就我没有QWQ

而且我台式机还是“如修”的状态，只能拿我那12年的笔记本写这篇文章

算了，正片开始

台式机修好了，但是“如修”

emmm怎么说呢，不是上篇文章说我那台式机坏了吗

然后就去找师傅修了

这个月的头一周，那师傅说修好了，就给我电脑送回来了

但是才玩了两天又是疯狂重启

后面才知道那师傅根本没修那主板，因为我那电脑辗转很多地方，甚至连主板、硬盘、内存、CPU都检查了个遍

就是没发现问题

然后可以锁定是电源的问题了

但是这几周那师傅没空，所以那电源到现在还没送来

关于那问题，很多群U也给我回复了，但是群U对我电脑的问题有争议

有人说是电源问题，有人说是静电问题

emmmm…… ~~我还是等那修电源的师傅来吧，那电源才300W，我感觉带不动（）~~

2025.06.30 补充

突然想起来我家里还有个600W的，但是风扇坏掉的电源

给风扇修好后就给那电源换上去了

坏消息：确定不是电源的问题了，我给修好的电源换上去还是一样

算了，还是等那修我电脑的师傅来吧

2025.07.23 更新

电脑已经修好了

那师傅说主板坏了，给主板修好之后拿回来了

喵斯快跑 —— 成功入坑计划通

其实喵斯快跑我是在5月入坑了，但我入坑计划通是在六月

而且之所以叫计划通而不是MusePlus，其实是因为我有个朋友有喵斯快跑的计划通老号

他说不想玩喵斯了，然后把号卖给我了

最近喵斯快跑更新了个新角色：吸血鬼布若

。。。。。。

突然感觉这号买得很值，这下真是理财神器在我手上了）

换博客框架、翻车

没错，其实我这个月有换框架的想法

之前从 imaegoo那边发现了个字节跳动出的类 Manus 的 AI Agent 工具：扣子空间

然后突然脑抽，打算给我博客重写了

结果失败了，原因扣子空间还不太适配.md文件的静态博客的搭建

然后又看上了Astro，打算用iak或者HsuBlog来搞我的博客的

结果我还是太满意

第一就是没有无刷新加载，虽然这种可以自行适配，但是我懒

第二就是标签外挂，之前文章迁移到valaxy的时候我也是被这个折磨得不要不要的

基于很久，我还是决定不换框架，就要vitepress

现阶段博客的状况

之前我的博客突然出现在 IndieAuth里面无法登录的情况

查看了一下发现是侧边栏被隐藏导致indieauth看不见rel="me"的情况

索性直接放到footer.social的超链接里面

然后就是WebMention

之前有个群U说静态博客无法发送WebMention，也就是说我那发送框是薛定谔的发送框

索性直接给发送框去掉了，改成通过Github Actions检测

顺带给Mention展示给美化了一下

最后就是博客搜索，整了半天终于给搜索修好了

但由于VitePress的特性，只能用Algolia Crawler爬取搜索信息

现阶段博客已经较为完善了，搜索也有、AI摘要也有

就这样吧

2025.06.30 更新

之前一直想给我的这个博客搞回我之前那TianliGPT AI摘要的

但是现在改名为洪墨AI了，改不了文章链接了

而我也不想浪费我的摘要字数（主要是洪墨AI暂时不支持wx支付。。。。。。）

于是我就打算换成别的AI摘要

直到我看到了这篇文章： VitePress部落格即時摘要功能實作

才想起来CloudFlare也有AI摘要功能

再加上Curve主题有那~~虚假的~~AI摘要，这不是正好我可以利用的地方吗？

于是我参考 vitepress-theme-trigger，抄了个AI摘要下来

但是将那博客提供的Worker API代码（也就是那worker.js），修改了YOUR_HOST、YOUR_USER_ID、YOUR_AI_GATEWAY_NAME，出现了Authorization错误

解决方法嘛，就是先去这里：https://dash.cloudflare.com/profile/api-tokens

在这里创建一个令牌，模板选择Workers AI

然后添加我下图划分的三个权限

添加三个权限之后再给账户资源换成你的，再划到下面，点击“继续以显示摘要”，然后“创建令牌”，复制那个令牌

然后按照我提供的代码去修改：

const corsHeaders = {
 'Access-Control-Allow-Origin': 'YOUR_HOST',
 'Access-Control-Allow-Methods': 'POST, OPTIONS',
 'Access-Control-Allow-Headers': 'Content-Type',
 'Content-Type': 'application/json'
};

const sendErrorResponse = (message, status = 500) => {
 return new Response(JSON.stringify({ error: message }), {
 status,
 headers: corsHeaders
 });
};

export default {
 async fetch(request, env) {
 if (request.method === 'OPTIONS') {
 return new Response(null, { headers: corsHeaders });
 }

 if (request.method !== 'POST') {
 return sendErrorResponse('Only POST requests are allowed', 405);
 }

 try {
 const { message } = await request.json();
 if (!message) {
 return sendErrorResponse('Missing message in request body', 400);
 }
 const model = '@cf/meta/llama-3.1-8b-instruct';
 const userID = 'YOUR_USER_ID';
 const gatewayID = 'YOUR_AI_GATEWAY_NAME'
 const gateway = `https://gateway.ai.cloudflare.com/v1/${userID}/${gatewayID}/workers-ai/${model}`;
 const prompt = `你是一个专业的摘要助手，请根据我提供的内容，生成不超过60字的简体中文摘要，并且只回传摘要，不得包含其他内容：${message}`;
 const apiResponse = await fetch(
 gateway,
 {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 'Authorization': `Bearer YOUR_TOKEN`
 },
 body: JSON.stringify({'prompt': prompt})
 }
 );

 if (!apiResponse.ok) {
 throw new Error(`Cloudflare Workers AI error: ${apiResponse.statusText}`);
 }

 const response = await apiResponse.json();
 return new Response(JSON.stringify({ response }), { headers: corsHeaders });
 } catch (error) {
 return sendErrorResponse(error.message);
 }
 }
};

其中：

YOUR_HOST：跨域域名，想公益使用就填*，想自己用就换成自己的域名（带https://，两个域名之间用逗号隔开）

YOUR_USER_ID：你的CF账户ID

YOUR_AI_GATEWAY_NAME：你的AI Gateway名字

YOUR_TOKEN：刚刚复制的令牌

然后绑定域名、再就是放到我抄的AI摘要里面就可以了

以上

2025-05小记

2025-05-31T10:18:28Z

各位，端午安康

这次居然是端午和六一在一起啊，那这样的话那些小朋友岂不是在六一就吃粽子了（bushi

算了不多废话了，正片开始！回顾一下我5月发生了什么事情吧！

劳动节第三天，玩了一个上午和下午的舞萌

没错，我也是wmc

事情是这样的，5月3日9点，吃完早餐的我来到了汕头万达广场

那舞萌是在4楼的大玩家那边，因为来的特别早所以那边的舞萌没人去玩

那这下就爽了啊！成功霸机一个早上和一个下午

但因为我晚上有事情所以回去了，要不然霸机一整天了

啥？你说我为啥不秀出我的战绩？

emmm……目前我只能打打黄谱

红谱的话只有一把是S，没有鸟，更别提鸟加了

站点主页大更新

趁着5月的部分周六周日，我给我那站点的主页更新了一下

也换上了中弦局的新图标：

emmm不错，现在这图标有点那味道了

然后再给主页这么一换

当然在换的过程中也是有出现意外的，就是 ——

主机坏了

就是这个月的某天我魔改个人主页魔改一半突然电脑屏幕“定”住了

我当时下意识点了一下强行重启按键

然后意外来了

主机的灯亮一下就暗，亮一下就暗

我当时还以为是那内存的问题

结果拔插内存、清灰、内存金手指使用橡皮擦差一些都无济于事

然后我爸就叫一位师傅给我那电脑拉去修了

过两个周后，那个师傅给我电脑拉回来了

他说是我电脑的开关机按键和重启按键有问题

正当我还以为一切正常的时候故障又出现了

然后我爸又叫师傅把电脑拉去修了

~~（虽然到现在都还没好，但是我有备用的那戴尔的笔记本啊，要不然你猜我这篇文章是怎么写的）~~

2025.06.06更新：已经修好

从Moments到Ech0

前段时间从花露水的博客里面了解到了有Moments这个东西

说是Memos的替代品

刚好我那VPS不知道想要部署什么，于是中弦记事本重新开启了

结果不到一至两天，我那边有个群U整了个叫Ech0的玩意

这倒一下来了我的兴趣，于是我给Moments换成了Ech0

友情链接重写

各位应该能看到，现在的友链已经和之前的大有不同了对吧

没错，也就是说，从现在开始友链和博客分离开来了

新版友链采用Deno+Bulma编写，并且连朋友圈也迁移到那边了

预览： friends.storical.space

以上

2025-04小记

2025-04-30T17:18:28Z

没错，你真的没看错

我又双换框架了

那老规矩，正片开始！

博客二次重构

打了自己的脸

原本是想用Valaxy用到后面的

结果那tab老是修不好，成功放弃，转战VitePress了

使用的主题是基于 vitepress-theme-curve魔改的，个人魔改如下：

BlueArchive风格

没错，我给这主题的风格换成了 vitepress-theme-bluearchive的风格

并且也实现了这个主题的同款加载动画

那么问题来了

我为啥不直接使用那vitepress-theme-bluearchive呢？

首先就是，相比于单栏，我还是喜欢双栏或者三栏的主题

而Curve就符合这个定位

其次是tab，没错，tab

那Blue Archive主题没有默认那tab样式，我还得给这玩意移植过来

但是我懒啊，所以就给Curve改成那Blue Archive样式来使用了

熟悉的IndieWeb，熟悉的WebMention

没错，还是给这个主题适配了IndieWeb，并且添加了WebMention网络回响功能

但是在此基础上添加了点赞、转发和提及的功能

也算是完善了网络回响的功能

我们学校的五四青年节活动

没错，我们学校也是不在5月4号举办五四青年节活动，而是在4月29举办

但是这有可能是我最后两次，亦或者是最后一次参加这种活动了

（毕竟嘛，明年就初三了）

那这样的话，算了不说了，展示我参加活动领取到的奖励吧

实在忘记这个月发生啥事了，就这样吧

以上

2025-03小记

2025-03-30T17:18:28Z

没错，你真的没看错

这个地方就是我的博客

也就是说从现在开始我就入坑Valaxy了

那老规矩，正片开始！

博客重构

原本是想要使用Next.js进行重构，并且给我博客加个后端的

结果狠狠地打了自己的脸，因为我不会React语言，而且我也没有写过后端的基础

所以只好放弃，转战Vue

那既然都Vue了，就试一下基于Vue+Vite的Valaxy吧！

然后很快啊，我看上了 Big_Cake那个博客

于是我就给他的主题应用下来了

~~在此感谢 Big_Cake 的馈赠（不是~~

本地引用主题

和Big_Cake给Restent原先的博客抄下来的那个方法一样，我把他的主题文件夹下载了下来，放在项目根目录下，然后进行了链接：

pnpm install ./valaxy-theme-custom

然后便开始我的魔改

必不可少的IndieWeb四件套

之前看到新增对 Webmention 的支持这篇文章

~~而这位博主的博客使用的Tailwind CSS，也就是说Tailwind CSS能搞，就是比较复杂~~

~~而Big_Cake给这个主题使用的Bulma恰好就是基于Tailwind CSS所魔改的~~

（纠正：Bulma是基于Flexbox的CSS框架，而不是基于Tailwind CSS。。。。。。）

所以我就尝试着给这个博客添加IndieWeb三件套（IndieAuth、RelMeAuth、Microformats），顺带添加一下WebMention（也就是下面的网络回响）

目前接收回响测试正常，发送回响还没测试

风格大变化

之前意外找到了 VitePress-Theme-BlueArchive这个主题

然后我光是感觉修改那代码高亮还不够，于是我做了个决定：给这个主题的风格换了

顺带给favicon也给换了

但目前有个问题加载动画也不同步暗色模式，不知道为啥

等后面找个时间修了吧

其它内容

原侧边栏友情链接展示区改成本站加入的博客联盟
底部添加一些虚拟备案号、IndieWeb Webring按钮和一些图片

还有些没完善的地方等后面有空再来完善！

今年的生日

2025.03.19，我的农历生日就在这一天

然而由于这一天我得去补习，所以只好提前到03.15过生日

至于地点嘛，原本是想去我同学家吃烧烤的，结果因为一些原因，后面就改成在KFC吃了

几天后，收到了来自KFC的礼物

也算是我过得最满足的一次生日了

而我下一年生日，也就是我18岁生日，刚好在4月7号

但到时请别人肯定不打算了。。。。。。

以上

2025-02小记

2025-02-28T17:41:39Z

因为最近在处理迁移博客的事情

再加上开学了+得去补习

所以小记没来得及写

但是现在有时间就趁现在写完小记了

那么，正片开始！

开学了

没错，2月13日我开学了

到时候文章什么的肯定来不及写

但是嘛MC倒是能玩

入坑汹涌海豚+明日方舟回归

之前的碧蓝航线因为存储占用极高而被我删了

再加上之前从我爸玩的“仙剑奇侠传”手游认识到大宇（SOFTSTAR）这个公司

然后去大宇官网看到这款游戏我才入坑的

~~（真的不是因为涩涩才入坑的，大宇代理的那三款有关二次元的游戏我都玩了，只有那汹涌海豚的体验好一点，再加上这游戏曾经和碧蓝航线联动过）~~

emmm怎么说呢，可以不用开加速器就能进台服，这点还是可以的

（就是有时会出现进不去的现象）

角色立绘的话，因为这里面的角色几乎是穿着泳装的，所以会戳中一些人的XP

除此之外就没了

啊对，确实没了

因为这貌似算是卡牌游戏，千篇一律的游戏内容

而且玩的时候能给我手机整得特别烫

（我玩原开高画质也只能当暖手宝的程度，当然也有可能是我手机的问题）

但是对我这种每天只玩一会游戏的人来说算是比较适合的一款游戏了

（毕竟我是真不咋玩游戏，现在在玩的也不过就是ba、赛马娘、Roblox和一些大大小小的音游了）

博客又打算重构了

没错，我又有这个想法了

事情的起因是那一群在玩MC的站长交流群里

很多人都脱离了Hexo

嘟嘟嘟如是，数据库如是，小葱如是，klcdm也是

再加上小何现在也开始换成Valaxy了

以及随着时间的迁移，发现Hexo的不便性

虽然很不舍得，但是随着时间的迁移肯定得更新一下自己的博客嘛

新的博客打算使用NextJS构建，当然也有可能是Vue

并且是前后端分离的博客

敬请期待！

2025-01小记

2025-01-28T22:27:33Z

首先先祝大家新年快乐！万事如意！

然后，正片开始！

Q宠，回来了

是的，我有玩过Q宠企鹅

很久之前就在玩了，甚至比那伪春菜还要早

可惜这个在2017（还是2018）的时候就停服了

但是最近逛Q宠贴吧的时候看见了这个：

~~居然大佬开发本地版的Q宠了！还是小吧主！~~

2025.01.31上午，因小吧主被气走了，原Q宠的下载链接也已经不更新了

大家要玩的话能去吧主的群那边了

（真服了为啥会出这种事啊！！！！！）

而且貌似不止小吧主，Q宠吧的吧主貌似也整了个本地版本

但是貌似得加群

至于是什么群，自己去Q宠吧看吧

多灾多难的Artalk

我的评论最近不是从Twikoo换成Artalk吗？

而这几天的Artalk评论系统不太稳定

我去我的宝塔后台一看：

这Artalk服务怎么停了？

然后我去看了下重启规则：

给重启规则换成“停止后马上重启”后

重启Docker之后Artalk容器就不会一直关着了

目前评论系统逐渐稳定，可以正常评论

~~2025.01.31暂时换回Twikoo了，Artalk那机子寄了~~

2025.02.06 数据迁移到别的机器上面了，目前评论系统趋于稳定

我做的千千静听本地歌词服务器版本目前已经停止更新

很多人反映千千静听出现了没法打开的情况

但是我这边上个月是没有这样的情况

后面我想打开千千静听的时候也出现了这个错误

就一直在找本地版本的千千静听整合包

上周找到了MEFCL做的稳定的千千静听整合包

而且到2025也没有出什么错误

我就给我做的整合包宣布停止更新了

新版整合包在这里，你们可以看一下：https://www.mefcl.com/ttplayer.html

和嘟立方他们在玩MC

上个月，花露水邀请我们去他那边的群一起来玩MC

确实太久没玩MC啦，所以我就进去了

我这老电脑能带得动装了一堆模组的1.20.6也是个奇迹

进去之后我找了块风水宝地搭建了我在这个服务器的第一个房子

后面嘟嘟嘟跟我说这地可能通不了地铁站

安小歪说这个地方太远，就一直想找个地搬迁

结果这时候服务器突然回档，轻笑的狗窝旁边多了一块空地

我就搬到轻笑那狗窝旁边了

后面才知道这个地方原本是Silvaire的，结果因为Silvaire的一些行为给他自己的房子搞消失了，然后这地方Silvaire不要了，直接给我了

而我在MC的那第二套房子是在别的城区，Silvaire搭建的 ~~预制房~~

顺带一提这阳台是我后面修的，因为某次火灾导致。。。。。。懂的都懂

我的皮肤：

因为我之前头像的猫娘叫“夏玖铃”，这个皮肤也是按照她的样子做的，我就给这个皮肤命名为：代号——清

（放心不是那种清，是夏玖铃之前的名字：“清”）

至于“嘟立方”是谁，那当然是 Aria啦！

又因为Aria又名“嘟嘟嘟”，嘟嘟嘟=嘟x嘟x嘟=嘟³=嘟立方，所以我直接叫“嘟立方”（

IndieWeb的实现

2025-01-27T15:20:44Z

前言

初次看见webring

之前闲着没事干逛开往issues的时候看到了这么个站点：

甜鱼/Ayu

当时这个按钮引起了我的注意：

这是个啥东西？友链接力？还是什么？于是我写了个邮件问问这位站长

这位站长给我的回复如下：

果然是类似于友链接力的，而且开往正是受到这个webring的启发

当时还以为那站点能加入的原因是简约，而且加入这个成员大多都是foreign，所以我就没怎么去了解

再次看见

后面闲着没事干，又去逛逛开往这波开往上大分，来到了他的第二人生这个站点

然后我就看到了这篇文章：

IndieWeb 实现测试

再加上我在那站点末尾看见了IndieWeb Webring的标志

才知道Hexo的博客原来也能加入IndieWeb webring

而加入IndieWeb webring的前提条件是：站点必须适配IndieWeb

前提条件

必须要有独立网站和个人域名，没错，就是独立网站和个人域名，其实刚开始看的时候我还以为我看错了，后来才发现我没看错，那官方文档就是这么写的

教程开始！

对IndieWeb的适配分为四个部分：IndieAuth、RelMeAuth和Microformats

IndieAuth（必选）&& RelMeAuth（必选）

这个教程其实很简单，就是在你的Github链接和邮箱链接对应的元素添加rel="me"的标签

并且去 https://indieauth.com/ 那边登录+获取IndieAuth代码放到head里面就行（后面那Web Sign-in form什么的不用添加）

也因此我才把这两个合并到一起

添加标签和代码：

修改[Blogroot]\themes\solitude\layout\includes\widgets\aside\asideInfoCard.pug，转到最后一行

 .card-info-social-icons.is-center
 each value, label in theme.aside.my_card.information || {}
 - var array = value.split('||')
- a.social-icon.u-url(class=array[2] href=url_for(trim(array[0])), title=label)
+ a.social-icon.u-url(class=array[2] href=url_for(trim(array[0])), title=label, rel="me")
 i.solitude(class=array[1])

然后修改主题目录下的_config.yml或者博客目录下的_config.solitude.yml

# Aside
# 侧边栏
aside:
 # Information card
 # 信息卡
 my_card:
 # social
 # 社交信息图标
 information:
 Github: https://github.com/SinzMise || fab fa-github # 添加你的Github链接（必须！）
 Email: mailto:email@sinzmise.top || fa fa-envelope # 添加你的邮件地址（必须！）

...

# Extend
# 扩展
extends:
 # Insert in head
 # 插入到 head
 head:
 - <link rel="authorization_endpoint" href="https://indieauth.com/auth">
 - <link rel="token_endpoint" href="https://tokens.indieauth.com/token">

懒得写了，反正rel-'me'按照我上面说的来添加就可以

如果你想提前支持IndieAuth，就直接在</head>之前添加这两个就可以了：

<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="token_endpoint" href="https://tokens.indieauth.com/token">

然后去 https://indieauth.com/ 这边登录你的账号

如果你用的是静态博客，那么在去登录之前你必须要给博客push上去！要不然提示找不到rel=me标签！

划到最下面，在Try It!这个地方输入你的网址

然后点击Sign-In会询问你用Github登录还是用邮箱登录

随便选一个登录之后看到这个就说明成功了：

当然在此之前你可以去 https://indiewebify.me/validate-rel-me/ 那边检测

检测成功会提示这个：

Microformats（必选）

最难的地方来了

因为这个会引入大量的class标签

如果是别的主题魔改还好，如果像solitude这种文章标题在Header里面就很难改，而且一不小心就识别错误

而如果是Redifine这种使用了Tailwind CSS就更难，因为这个会在页面中留下许多h-开头的类名，导致部分 microformats 解析器解析出错误的数据

这也是为什么我这么讨厌Tailwind CSS

因此目前只有Solitude的魔改教程，而且只有必要的class，其它主题或者非Hexo博客可以参考一下wiki：

https://microformats.org/wiki/h-card

https://microformats.org/wiki/h-entry

h-card（个人信息）

修改[Blogroot]\themes\solitude\layout\includes\widgets\aside\asideInfoCard.pug

- .card-widget.card-info
+ .card-widget.card-info.h-card
 .card-content
 .card-info-avatar.is-center
 .author-info__top-group
 .author-info__sayhi#author-info__sayhi(onclick="sco.changeWittyWord()")
 .avatar-img-group
- img.avatar-img(alt=_p('aside.avatar'), src=theme.aside.my_card.author.img)
+ img.u-photo.avatar-img(alt=_p('aside.avatar'), src=theme.aside.my_card.author.img)
 if theme.aside.my_card.author.sticker
 .avatar-sticker
 img.avatar-sticker-img(src=theme.aside.my_card.author.sticker, alt=_p('aside.sticker'))
 .author-info__description_group
 .author-info__description!= theme.aside.my_card.content
 .author-info__bottom-group
 span.author-info__bottom-group-left
- .author-info__name= config.author
- .author-info__desc!= theme.aside.my_card.description
+ .author-info__name.p-name= config.author
+ .author-info__desc.p-note!= theme.aside.my_card.description
 .card-info-social-icons.is-center
 each value, label in theme.aside.my_card.information || {}
 - var array = value.split('||')
- a.social-icon(class=array[2] href=url_for(trim(array[0])), title=label, rel="me")
+ a.social-icon.u-url(class=array[2] href=url_for(trim(array[0])), title=label, rel="me")
 i.solitude(class=array[1])

修改完成后给博客push上去

然后去 https://indiewebify.me/validate-h-card/ 这边检测h-card的代码添加情况

如果识别到你设置的信息那就是成功了

h-entry（博客信息）

修改[Blogroot]\themes\solitude\layout\post.pug

extends includes/layout.pug

block content
 main.layout#content-inner
- #post
+ #post.h-entry
+ a.h-card.p-author(href=url_for("/") rel="author" style='display:none')= config.author
+ a.u-url.p-name(href=urlNoIndex() style='display:none')= page.title
+ time.dt-published(datetime=date_xml(page.date) style='display:none')= date_xml(page.date)
+ time.dt-updated(datetime=date_xml(page.updated) style='display:none')= date_xml(page.updated)
+ if page.categories.data.length > 0
+ a.p-category(href=url_for('/' + page.categories.data[0].path) style='display:none')= page.categories.data[0].name
 if page.not_cover
 include includes/widgets/post/postInfo
 article.post-content.article-container
 if theme.post_ai.enable
 include includes/widgets/post/post-ai
- != page.content
+ .e-content!= page.content

修改[Blogroot]\themes\solitude\layout\includes\widgets\post\copyright.pug，转到第25行

 each item in theme.post.share.list || []
 case item
 when 'qq'
- a.social-share-ico.icon-qq(href=`https://connect.qq.com/widget/shareqq/index.html?url=${encodedPath}&title=${encodedTitle}&desc=${encodedDescription}&summary=${encodedDescription}&site=${encodedTitle}&pics=${encodedIcon}` title=_p('post.share.qq'))
+ a.u-syndication.social-share-ico.icon-qq(href=`https://connect.qq.com/widget/shareqq/index.html?url=${encodedPath}&title=${encodedTitle}&desc=${encodedDescription}&summary=${encodedDescription}&site=${encodedTitle}&pics=${encodedIcon}` title=_p('post.share.qq'))
 i.solitude.fab.fa-qq
 when 'weibo'
- a.social-share-ico.icon-weibo(href=`http://service.weibo.com/share/share.php?url=${encodedPath}&title=${encodedTitle}&pic=${encodedIcon}` title=_p('post.share.weibo'))
+ a.u-syndication.social-share-ico.icon-weibo(href=`http://service.weibo.com/share/share.php?url=${encodedPath}&title=${encodedTitle}&pic=${encodedIcon}` title=_p('post.share.weibo'))
 i.solitude.fab.fa-weibo
 when 'telegram'
- a.social-share-ico.icon-telegram(href=`https://t.me/share/url?url=${encodedPath}&text=${encodedTitle}` title=_p('post.share.telegram'))
+ a.u-syndication.social-share-ico.icon-telegram(href=`https://t.me/share/url?url=${encodedPath}&text=${encodedTitle}` title=_p('post.share.telegram'))
 i.solitude.fab.fa-telegram
 when 'whatsapp'
- a.social-share-ico.icon-whatsapp(href=`https://api.whatsapp.com/send?text=${encodedTitle} ${encodedPath}` title=_p('post.share.whatsapp'))
+ a.u-syndication.social-share-ico.icon-whatsapp(href=`https://api.whatsapp.com/send?text=${encodedTitle} ${encodedPath}` title=_p('post.share.whatsapp'))
 i.solitude.fab.fa-whatsapp
 when 'linkedin'
- a.social-share-ico.icon-linkedin(href=`https://www.linkedin.com/shareArticle?mini=true&url=${encodedPath}&title=${encodedTitle}&summary=${encodedDescription}&source=${encodedTitle}` title=_p('post.share.linkedin'))
+ a.u-syndication.social-share-ico.icon-linkedin(href=`https://www.linkedin.com/shareArticle?mini=true&url=${encodedPath}&title=${encodedTitle}&summary=${encodedDescription}&source=${encodedTitle}` title=_p('post.share.linkedin'))
 i.solitude.fab.fa-linkedin
 when 'facebook'
- a.social-share-ico.icon-facebook(href=`https://www.facebook.com/sharer/sharer.php?u=${encodedPath}` title=_p('post.share.facebook'))
+ a.u-syndication.social-share-ico.icon-facebook(href=`https://www.facebook.com/sharer/sharer.php?u=${encodedPath}` title=_p('post.share.facebook'))
 i.solitude.fab.fa-facebook
 when 'twitter'
- a.social-share-ico.icon-twitter(href=`https://twitter.com/intent/tweet?url=${encodedPath}&text=${encodedTitle}` title=_p('post.share.twitter'))
+ a.u-syndication.social-share-ico.icon-twitter(href=`https://twitter.com/intent/tweet?url=${encodedPath}&text=${encodedTitle}` title=_p('post.share.twitter'))
 i.solitude.fab.fa-twitter

两个步骤修改完成之后给博客push上去

然后去 https://indiewebify.me/validate-h-entry/ 这边检测h-card的代码添加情况

提示：Success!We found the following post h-entry on your site就成功了

可选添加

如果你做完前面这三个步骤，恭喜你，你的站点已经适配IndieWeb了

适配完IndieWeb之后就可以选择加入IndieWeb webring或者添加WebMention（也就是我那评论下面的网络回响）

WebMention （可选）

官方介绍（翻译后）：

Webmention 是一种用于跨 Web 对话和交互的开放 Web 标准（ W3C 推荐标准），是一个强大的构建块，用于不断增长的分布式网络，该网络包含跨 Web 的点对点评论、点赞、转发和其他响应。

登录WebMention，获取两段link

前往 https://webmention.io/ 登录你的网站

登录之后点击最上方的Setting，按照图片的来

然后点击最上方的Sites，新增一个网站，新增完成之后点击你新增站点的“Get Setup Code”获取代码

把这个地方的<link>代码也给复制到</head>前面

然后，去 https://webmention.rocks/receive/2 检验你的代码是否安装成功

如果提示这个就代表成功了：

添加网络回响功能

这个获取Mention的js代码是基于别人的方案而改来

在此基础上适配了pjax

新增[Blogroot]\themes\solitude\layout\includes\widgets\third-party\webmention.pug，内容如下：

hr
#post-comment
 .comment-head
 .comment-headline
 i.fas.fa-comments.fa-fw
 span= ' 网络回响'

 .comment-wrap
 p!= '你有对这篇文章写<a href="https://indieweb.org/responses" target="_blank">回应</a>吗? 你可以在这里提交你的文章网址（文章需要包含这篇文章的地址，点击这里了解 <a href="https://indieweb.org/Webmention" target="_blank">Webmention</a>）：'
 br
 form.form-webmention(action=url_for(theme.webmention.endpoint) method="post" target="_blank")
 input#form-webmention-source(name="source" placeholder='你的文章网址' required="" type="url")
 input(name="target" type="hidden" value=urlNoIndex())
 input.form-webmention-btn(type="submit" value="Send Webmention")
 .webmention-timeline

修改[Blogroot]\themes\solitude\layout\post.pug

给这个功能加在comment下面

 if page.comment
 - var comment_js = true
 include includes/widgets/third-party/comments/comment
+ if theme.webmention.enable && page.webmention !== false
+ !=partial('includes/widgets/third-party/webmention', {}, {cache: true})

引入css代码：

.wm-avatar {
 border-radius: 50%;
 margin: 0;
}
.webmention-avatars .avatar-wrapper {
 margin-right: -8px;
}
a.avatar-wrapper {
 display: inline-block;
 width: 50px;
 height: 50px;
 position: relative;
}
.replies {
 margin: 0;
 padding: 0;
}
.reply {
 list-style: none;
 display: flex;
 position: relative;
 padding: 0;
 align-items: flex-start;
 margin-top: 0.6rem;
}
.reply p {
 margin: 0;
}
.reply .text {
 margin-left: 1rem;
 font-size: 14px;
}
.reply-author-name {
 font-weight: 500;
}
.form-webmention {
 display: flex;
}
.form-webmention-btn {
 flex: 0 0 auto;
 margin-left: 12px;
 align-items: baseline;
 border: 0;
 cursor: pointer;
}
.form-webmention-btn,
a.retweetBtn {
 display: flex;
 justify-content: center;
 padding: 0 12px;
 background: var(--anzhiyu-reverse);
 color: var(--efu-secondbg);
}
#form-webmention-source {
 flex: 1 0 auto;
 border: 1px solid;
 padding: 0 8px;
 background: var(--efu-secondbg);
 border: var(--style-border-always);
}
#form-webmention-source,
.form-webmention-btn,
a.retweetBtn {
 height: 36px;
 line-height: 36px;
 font-size: 16px;
 border-radius: 8px;
}

引入js代码：

function webmention() {
 const url = window.location.href;
 const webmentionBaseUrl = "https://webmention.io"
 fetch(webmentionBaseUrl + "/api/mentions.jf2?target=" + encodeURIComponent(url))
 .then(function (response) {
 console.log('sucess ' + webmentionBaseUrl + "/api/mentions.jf2?target=" + url);
 return response.json();
 })
 .then(function (data) {
 var html = '';
 const distinctMentions = [
 ...new Map(data.children.map((item) => [item.author.url, item])).values()].sort((a, b) => new Date(a['wm-received']) - new Date(b['wm-received']));

 html += `<div><p>`;

 if (distinctMentions.length > 0) {
 html += `已经有 ${distinctMentions.length} 朋友喜欢、分享或讨论这篇文章:</p>`;
 }
 html += `<div className="webmention-avatars">`;
 distinctMentions.forEach(function (reply) {
 html += `<a class="avatar-wrapper" href=${reply.author.url} key=${reply.author.name}><image class="wm-avatar" loading="lazy" src=${reply.author.photo != "" ? reply.author.photo: "/img/avatar.png"} data-nimg="fill" sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"/></a>`;
 });
 html += `</div>`;

 const replies = distinctMentions.filter(
 (mention) => ('in-reply-to' in mention || 'mention-of' in mention)&& 'content' in mention
 );
 if (replies && replies.length) {
 html += `<div class="webmention-replies">`;
 html += `</br><h3>引用或评论（${replies.length}）</h3>`;
 html += `<ul class="replies">`;
 replies.forEach(function (reply){
 html += `<li class="reply" key=${reply["wm-id"]}>`;
 html += `<div>`;
 html += `<a class="avatar-wrapper" href=${reply.author.url} key=${reply.author.name}><image class="wm-avatar" loading="lazy" src=${reply.author.photo != "" ? reply.author.photo: "/img/avatar.png"} alt=${reply.author.name} data-nimg="fill" sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"/></a>`;
 html += `</div>`;
 html += `<div class="text">`;
 html += `<p class="reply-author-name"><a href=${reply.url} target="_blank">${reply.author.name}</a></p>`;
 html += `<p class="reply-content">${reply.content.text.slice(0, 200)}</p>`;
 html += `</div>`;
 html += `</li>`;

 });
 html += `</ul>`;
 html += `</div>`;
 }
 document.querySelector('div.webmention-timeline').innerHTML = html;
 })
 .catch(function (ex) {
 console.error('fetch webmention error' + ex);
 });
}
window.WebMentionLoad = function () {
 if (document.querySelector('.webmention-timeline')) webmention();
};
window.addEventListener("load", WebMentionLoad)
document.addEventListener("pjax:complete", WebMentionLoad)

如果还不知道怎么引入js和css代码的话看这个：

https://blog.leonus.cn/2022/custom.html

https://akilar.top/posts/ebf20e02/#%E9%AD%94%E6%94%B9%E6%A0%B7%E5%BC%8F%E5%BC%95%E5%85%A5

Butterfly主题的inject，对应的是Solitude主题的extends，别看错！

在 _config.solitude.yml 中的新增以下配置项

webmention:
 enable: true
 endpoint: https://webmention.io/blog.storical.space/webmention # 这个地方换成你获取到的endpoint

新增[Blogroot]\themes\butterfly\layout\includes\third-party\webmention.pug，内容如下：

hr
#post-comment
 .comment-head
 .comment-headline
 i.fas.fa-comments.fa-fw
 span= ' 网络回响'

 .comment-wrap
 p!= '你有对这篇文章写<a href="https://indieweb.org/responses" target="_blank">回应</a>吗? 你可以在这里提交你的文章网址（文章需要包含这篇文章的地址，点击这里了解 <a href="https://indieweb.org/Webmention" target="_blank">Webmention</a>）：'
 br
 form.form-webmention(action=url_for(theme.webmention.endpoint) method="post" target="_blank")
 input#form-webmention-source(name="source" placeholder='你的文章网址' required="" type="url")
 input(name="target" type="hidden" value=urlNoIndex())
 input.form-webmention-btn(type="submit" value="Send Webmention")
 .webmention-timeline

修改[Blogroot]\themes\solitude\layout\post.pug

给这个功能加在comment下面

 if page.comments !== false && theme.comments && theme.comments.use
 - var commentsJsLoad = true
 !=partial('includes/third-party/comments/index', {}, {cache: true})

+ if theme.webmention.enable && page.webmention !== false
+ !=partial('includes/third-party/webmention', {}, {cache: true})

引入css代码：

.wm-avatar {
 border-radius: 50%;
 margin: 0;
}
.webmention-avatars .avatar-wrapper {
 margin-right: -8px;
}
a.avatar-wrapper {
 display: inline-block;
 width: 50px;
 height: 50px;
 position: relative;
}
.replies {
 margin: 0;
 padding: 0;
}
.reply {
 list-style: none;
 display: flex;
 position: relative;
 padding: 0;
 align-items: flex-start;
 margin-top: 0.6rem;
}
.reply p {
 margin: 0;
}
.reply .text {
 margin-left: 1rem;
 font-size: 14px;
}
.reply-author-name {
 font-weight: 500;
}
.form-webmention {
 display: flex;
}
.form-webmention-btn {
 flex: 0 0 auto;
 margin-left: 12px;
 align-items: baseline;
 border: 0;
 cursor: pointer;
}
.form-webmention-btn,
a.retweetBtn {
 display: flex;
 justify-content: center;
 padding: 0 12px;
 background: var(--anzhiyu-reverse);
 color: var(--efu-secondbg);
}
#form-webmention-source {
 flex: 1 0 auto;
 border: 1px solid;
 padding: 0 8px;
 background: var(--efu-secondbg);
 border: var(--style-border-always);
}
#form-webmention-source,
.form-webmention-btn,
a.retweetBtn {
 height: 36px;
 line-height: 36px;
 font-size: 16px;
 border-radius: 8px;
}

引入js代码：

function webmention() {
 const url = window.location.href;
 const webmentionBaseUrl = "https://webmention.io"
 fetch(webmentionBaseUrl + "/api/mentions.jf2?target=" + encodeURIComponent(url))
 .then(function (response) {
 console.log('sucess ' + webmentionBaseUrl + "/api/mentions.jf2?target=" + url);
 return response.json();
 })
 .then(function (data) {
 var html = '';
 const distinctMentions = [
 ...new Map(data.children.map((item) => [item.author.url, item])).values()].sort((a, b) => new Date(a['wm-received']) - new Date(b['wm-received']));

 html += `<div><p>`;

 if (distinctMentions.length > 0) {
 html += `已经有 ${distinctMentions.length} 朋友喜欢、分享或讨论这篇文章:</p>`;
 }
 html += `<div className="webmention-avatars">`;
 distinctMentions.forEach(function (reply) {
 html += `<a class="avatar-wrapper" href=${reply.author.url} key=${reply.author.name}><image class="wm-avatar" loading="lazy" src=${reply.author.photo != "" ? reply.author.photo: "/img/avatar.png"} data-nimg="fill" sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"/></a>`;
 });
 html += `</div>`;

 const replies = distinctMentions.filter(
 (mention) => ('in-reply-to' in mention || 'mention-of' in mention)&& 'content' in mention
 );
 if (replies && replies.length) {
 html += `<div class="webmention-replies">`;
 html += `</br><h3>引用或评论（${replies.length}）</h3>`;
 html += `<ul class="replies">`;
 replies.forEach(function (reply){
 html += `<li class="reply" key=${reply["wm-id"]}>`;
 html += `<div>`;
 html += `<a class="avatar-wrapper" href=${reply.author.url} key=${reply.author.name}><image class="wm-avatar" loading="lazy" src=${reply.author.photo != "" ? reply.author.photo: "/img/avatar.png"} alt=${reply.author.name} data-nimg="fill" sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"/></a>`;
 html += `</div>`;
 html += `<div class="text">`;
 html += `<p class="reply-author-name"><a href=${reply.url} target="_blank">${reply.author.name}</a></p>`;
 html += `<p class="reply-content">${reply.content.text.slice(0, 200)}</p>`;
 html += `</div>`;
 html += `</li>`;

 });
 html += `</ul>`;
 html += `</div>`;
 }
 document.querySelector('div.webmention-timeline').innerHTML = html;
 })
 .catch(function (ex) {
 console.error('fetch webmention error' + ex);
 });
}
window.WebMentionLoad = function () {
 if (document.querySelector('.webmention-timeline')) webmention();
};
window.addEventListener("load", WebMentionLoad)
document.addEventListener("pjax:complete", WebMentionLoad)

如果还不知道怎么引入js和css代码的话看这个：

https://blog.leonus.cn/2022/custom.html

https://akilar.top/posts/ebf20e02/#%E9%AD%94%E6%94%B9%E6%A0%B7%E5%BC%8F%E5%BC%95%E5%85%A5

在 _config.butterfly.yml 中的新增以下配置项

webmention:
 enable: true
 endpoint: https://webmention.io/blog.storical.space/webmention # 这个地方换成你获取到的endpoint

魔改完成之后在 https://webmention.rocks/receive/1 这边测试一下

登录之后输入你的文章链接点击Begin test

如果看见这个提示：

并且去你的测试文章这边看见你的数据：

那就代表成功了

好了，就到一段落，indieweb webring那个我懒得写了，写小记去了

新的域名，新的故事

2025-01-19T22:45:18Z

大家看到这个新的界面就应该知道怎么回事了吧

没错，本站从现在开始就换域名了

并且主题也进行了更换

新域名

这个域名的storical是story去y改为i加上cal，意思为“故事的”

虽然不太合理就是啦，但是storical这个名字不觉得好听又好记么

而space意味着时空、空间的意思

于是我就当即注册了这个域名作为博客的新域名

旧的域名我也不打算废弃掉（毕竟我邮箱还绑着这个域名呢。。。。。。）

新的主题

我之前不是说过要给博客框架换成Valaxy吗

而这个的主题太少，我没找到一款我想要的

而eleventy、Hugo等静态框架都没有我想要的主题

想来想去，还是老旧的Hexo好，又能定制，又有我喜欢的主题，并且自定义permalink很方便

但是主题可不能用我跟以前的博客同一套要不然不叫“重构”啦

就换成了我之前想要更换的Solitude主题

魔改的内容：

添加 IndieAuth、 RelMeAuth、 microformats、 Webmention 支持（IndieWeb四件套，老朋友了，关键是我那网络回响和那四件套有关）
全站音乐播放器换成岑鬼鬼音乐播放器（Solitude自带的Aplayer音乐播放器会和hexo-tag-aplayer冲突，导致不得不换播放器方案）
友情链接申请换成github申请，如果想要添加友链就对 links.yml对其发起PullRequest
WebMention支持Pjax
评论系统更换为Artalk

EN站的话我就不打算再搞了，因为目前的内容主要是以中文为准，EN站的话意义不大

很屑的2024年度总结（

2024-12-31T18:39:29Z

2025快到了

我看别人有做年度总结

于是我就学着别人做了（

2024年终总结

难忘的事情

想必就是第一次去漫展了吧（原本10月小记想写的，结果忘记写了。。。。。。）

那时候我看到朋友圈有人再发才知道汕头也有办漫展

于是我就跟着我朋友去了

那边的演出是真的好看

而且那边cosplay的也好漂亮 ~~（什么话……）~~

而且去那边还买了立牌和谷子

话不多说，上照片！

（别问为啥只有两张，因为其它的都是视频。。。。。。）

旅游的地方

揭阳惠来

玩过的游戏

新欢：

旧情：

个人的遗憾

思想越来越极端
成绩很低（甚至还不如DreamerHe的成绩）
旅行的时候没有拍多一些照片

2025展望

争取打败极端的思想
提升一些成绩
拍一些照片
学习vue等编程语言
博客更新预告：更换新域名+备案（可能会把框架更换成Valaxy）

总结

这次的2024虽然我的外公和我的外曾祖母驾鹤西去，并且出现了一些意外的事情（例如7月的时候我弟被查出结肠炎，导致7月没法去旅游）

但是也没事，毕竟《老人与海》里面曾经说过：

一个人可以被毁灭，但不能被打败

即使是这些挫折，我的故事也尚未终结

最后祝大家在2025年健康快乐，事业永随，为自己的故事添加一个属于你自己的精彩片段！

以上

圣诞快乐+12月小记

2024-12-25T20:39:57Z

圣诞快乐！而今天因为要填写档案所以能碰到电脑

那就，正片开始！

博友圈，我可能没法回来了

之前看到了这篇文章：关于博友圈的那些事儿「图片的定义」我从这篇文章才知道博友圈的作者现在已经给动漫图片归类为擦边图片

而且定の栈这位小伙伴也被屏蔽了

对此，我的评价是：这规则恐怕已经不能单纯的按照SFW和NSFW来分了，甚至可能得下放到8+才行

而且这规则是完全在主观的意义上添加了….

对此我只能说，理解并且尊重但是也不太认同了

而因为我站点的一堆封面是动漫图片

说说的也一样

所以可能没法回来了

但是也不太遗憾，至少也知道原因并且表示理解并且尊重了

（毕竟这个加入这个圈子还要求站点名称里不能有日文汉字和文字）

也真心祝愿博友圈能够一路顺风，继续写下特别的故事！

入坑 MuseDash

之前看到这个游戏与蔚蓝档案联动的活动宣传：再加上我有位朋友是喵斯老玩家（虽然很少玩了，这家伙还是个ba玩家），而且我之前也趁着喵斯限时免费拿下了这游戏

于是我下载下来玩这音游了

然后我看到了这个宣传图： 12月27号才发曲包啊，那没事了

我是没想到我同学白嫖到了pdd的免费现金

没错，他真白嫖到了，而且还是70元（虽然拉了快10个人）可见这家伙是有实力的

（而我拉了10多个人，但是到现在还是差那0.01毫米）

收藏的机子

没错，经历了两个月，我又收藏老机子了！

（虽然才两台）

那废话不多说，开始展示：

唯一一台电信的三星Windows Mobile机子 —— 三星SCH-I329

这机子触摸和屏幕好的很难找，这还是我意外在黄鱼上刷到的

然后我就给这机子换上了月雪宫子的壁纸

机子展示：

虽然不算稀有但是UI很好看的机子 —— 三星SCH-M609

从这个商家拿到了I329之后，我从这个商家的口中了解到商家有一台三星的M609

虽然不算稀有，但是听别人说UI很好看，我就拿下了

不多说，放图：

以上

最后祝大家圣诞快乐！

2024-11小记

2024-11-24T10:48:19Z

没错，博客又又换主题了

（我算是第一个在半年内换三个主题了吧）

算了直接正片开始吧

Butterfly，真香！

随着我那Volantis的魔改，问题也逐渐凸显

首先就是sw的问题，某次我打开我那站点，f12进入应用程序–>存储一看：

当时这占用差点没给我看傻眼

并且Volantis貌似还是强制更新的，虽然我可以关闭强制更新，但是之前的那些插件，包括我魔改的东西都得重写

可谓是特别麻烦

思来想去，最终我换回了Butetrfly

而这次Butterfly我魔改了什么呢？

1.熟悉的IndieWeb，但这次的WebMention成功了，终于！

2.模仿 Fomalhaut🥝的样式，甚至为了仿的像一点连后台都抄下来了

3.搜索换成docsearch

4.添加全局音乐播放器（点击鼠标右键，然后点击“主题设置”就能看见音乐播放器的开关了）

5.熟悉的OhMyLive2D

6.sw换成CyanFalse的ClientWorker，并且与空梦swpp的进行整合形成新方案

就只有这些，其它的还没搞完。。。。。。

2024.11.19更新：经清羽飞扬小伙伴的建议，将域名托管到dnspod上，并且博客通过dnspod自带分流实现国内外分流

其中国外是cloudflare pages提供的站点托管服务，而国内则是由 LEDCDN提供站点加速

《关于我凭一己之力就帮空梦的swpp找到好几个bug的这件事》

今天就在我给clientworker和swpp整合的时候，swpp死活都构建不了

于是我就去问swpp群作者（我有加入swpp的群），然后就出现了这么个事件：

点石深海舱钢笔到货了

我严重怀疑我最近这两个月迷上点石了

疯狂购买点石的笔

其中最多的还得是时空舱就除了别的配色、一些限定和原版硬核时空舱没有之外几乎都齐了

而我也没满足，于是就看上了深海舱并且入手了一款深海舱钢笔（不是打广告）

让我们看看效果：虽然st笔头我写不习惯，但这支笔写起来真的很舒服

并且这笔壳设计成一个潜水艇，后面的螺旋桨能玩一整天（bushi

就这样吧

2024-10小记

2024-10-27T11:26:00Z

没错，博客又换主题了

算了直接正片开始吧

又一次更换主题

之前的async主题虽然不错，很好看并且有pjax

但是这个主题的pjax却是用的swup，导致了live2d和伪春菜出现了问题

并且开往的链接会跳转到“blog.sinzmise.top/go.html”，可谓是适配不算太行

因此不得不换主题

想了许久，我决定使用Volantis主题

魔改方案参考(抄)的枋柚梓的猫会发光

并且在此基础上适配了IndieWeb（要加入indieweb webring有个条件就是站点适配IndieWeb）

目前添加的功能：

IndieWeb（我上面说了）
OhMyLive2D（网页版Live2D的新方案，后面我打算给这个live2d添加点击按钮播放音乐的功能）
搜索引擎更换为MeiliSearch
全站npm化换成Volantis那个方案
友链朋友圈的方案更换为清羽飞扬的 Friend-Circle-Lite

积薪，再也不见

这玩意是8月下架的，距离这篇文章开始编写的时间已经两个月之久了

我也是写这篇文章的时候访问了一下才知道下架了

然而这个的作者给“原中文独立博客导航项目积薪正式下线”夹带了私货

其中就包括对我们的刻板印象

（也怪不得原作者的博客会被墙了）

对于这种我的评价是：积薪，你很好。但是你个作者是个**

站点聚合平台疑似打赢复活赛

这消息也是在我写这篇文章的时候搜了一下才发现打赢复活赛了

只不过换域名了，新域名：sites.applinzi.com

（也算是做了一种宣传了。。。。。。）

以上

站点装修与国庆小记

2024-10-06T18:58:31Z

国庆假期已经快要收尾了

不知道大家过得怎么样呢？

不废话，正片开始！

站点又重新装修

之前我魔改的那Butterfly主题被人诟病加载慢等等问题，~~并且在经过我的“努力”之下成功变成了史山代码~~

因此被迫重新装修

站点更新如下：

更换主题为 Hexo-Theme-Async，并且为这个主题适配了IndieWeb，同时也做了一些魔改
将原先的swpp换成async主题自带sw，并且在此基础上进行适配全站npm化
添加DocSearch

很多功能我还没添加，敬请期待！

第一次去漫展

之前在微信的朋友圈里面看到了我的一位朋友

他要几个人跟他去漫展

而且那漫展还是在汕头（离我家很近）

于是我想去逛漫展了

虽然那位朋友在去漫展的路上出事（腰出问题）导致迟到了差不多一个小时

不过没关系，我能自己逛逛

逛逛的过程中顺带买了hina的立牌和大米的谷子 ~~别问为啥没买麻酱和独角兽的谷子，貌似卖完了或者根本没卖（悲）~~

而且还去看了那边的演出（那边的演出是会整活的，给背景音乐混入了几个奇奇怪怪的东西）

我那朋友一来我就带他们去卖立牌的地方

~~然后我就看见了这地方还有本子。。。。。。。~~

他们买了几个谷子，我也跟着买了几个谷子和钥匙扣

收获：

2024-09小记

2024-09-30T20:29:48Z

首先提前祝大家国庆节快乐！

然后就是，正片开始！

（别问为啥没有收藏手机的环节了，因为开学了所以我就不打算收藏老手机了，要不然我早就收台i819来玩玩了QWQ）

突如其来的好消息

很好，月考数学发挥超常

满分120我考了90分

（别问为啥我这么骄傲，我之前的数学成绩保底是60分）

然后就没然后了

回归邦邦（BanG Dream）和pjsk（世界计划缤纷舞台）

之前因为某些原因，我把BanG Dream!和pjsk卸了

后面因为了解到MyGO!!!!!（还在go，还在go）也是属于邦的，因此我回归了邦

同时也了解到了pjsk台服换新ui了，所以我顺便回归pjsk了

然而现在，Craft Egg已经离开邦邦了（听人说似了，但又没似，因为Craft Egg的原社长创立了FromTokyo，并且加入参与制作BanG Dream!，本质上没变只是Craft Egg换了层皮）

而pjsk新UI的也到来了（之前台服pjsk还是老ui的时候有幸入坑了日服，对我来说没有影响到我的手感就行了。。。。。。）

回归Memos

之前从7iNet那边买了台机子

我想要部署点啥，就给Memos搞了

（毕竟我之前加入过木木大佬的哔哔广场啦，这个是重新回归）

7iNat那边因为HK-NAT区域稳定性改造，我的Memos目前没法访问

因此没法把链接放上去了。。。。。

等什么时候好了我就放链接吧。。。。。。。

2024-08小记

2024-08-31T11:33:48Z

时间过得真快，转眼间暑假就快结束了

还是这样，一个月一次的小记，安排！

久违的旅游

8月28日，也算是这个暑假的唯一一次旅游

虽然只有半天，但是也足够了

那次旅游的目的地是揭阳惠来，一共有三站：

第一站：客鸟尾石笋区

初来乍到，要爬上石笋很不容易

但爬上去之后看到的风景尽收眼底，我就知道这一爬也值得了

上照片：

第二站：网红彩虹桥

实际上就是揭阳那边的码头，没啥好看的

整体感觉还不如第一站和第三站

因此照片我不打算展示出来

直接第三站走起~~

第三站：滨河湾旅游景区

时间最长，也是我逛得最满意的景点~~

而且这个景点有天空之镜 ~~（虽然之前被群友吐槽了，并且有报道也吐槽了这玩意。。。。）~~ 和望远镜 ~~（虽然是要收费的。。。。。）~~

观赏完风景我们就开始吃烧烤

可惜没有KTV，不过就半天的活动要啥ktv呢。。。。

不多说了，照片走起~~（虽然没有烧烤的。。。。。）在望远镜那边拍的：回家之前顺带拍了这张照片：

试玩《黑神话·悟空》

8月20日，黑神话·悟空上线了

试玩了一下，不愧是最强3A大作

里面的boss和打斗都特别爽，当然难度也特别高就是啦~~

可惜我没截图，要不然早就放上去了

而且因为要开学，我不怎么玩这个游戏了。。。。。。

回归卡丘世界

没错，我也玩卡拉彼丘

其实在6-7月的时候我就开始玩了

后面7月下旬我没怎么玩（原因是匹配率过低），所以没把这件事写在我的文章里面

直到8月的时候有个电话，是心夏打来的（上次我见到这种打电话的活动还是原的某个活动，当然这个其实是没有打电话给我的啦，我也是通过b站才知道原神很久之前有这个活动）

然后才开始回归

到现在为止已经半个月过去了，心夏没选过，奥黛丽和反而经常选

而且7月那时候经常匹配不到人，这半个月的匹配率反而高得离谱，基本都是秒进

不说了，还是来看看我这个月收藏的机子吧~~

收藏的机子

第一台真正收藏的塞班S60V3的机子 —— 诺基亚5320

收到这机子之后我就给这台机子的证书给破解了

并且整了个花海咲季（学园偶像大师）的主题和换成Fighting My Way铃声，顺带给字体也换了

我原本有在里面装了个Bounce Tales和哆啦A梦·海盗岛大冒险的，但是因为内存卡我误删东西导致这两个的数据丢失了。。。。。。。

而且这台机子玩bounce tales跳进水坑（尤其是bumpy那关）会特别卡，估计是因为配置的原因

算了先这样吧，上图片~~（成色不好请见谅）

说了那么多，那有没有一台能流畅玩java游戏的S60V3的机子呢？

诶~~我还真有

那就……

真神降临 —— 诺基亚5730xm

跟那5320一样，也是先给系统破解证书然后换主题和铃声，并且给字体换了

不过这次我给这台的主题换的是蔚蓝档案里面的桐生桔梗，这机子的配色刚好也适合桔梗的头发配色

（别问为啥没有和纱，肥猫的话得等我有收藏5630再来搞）

然而铃声不是桐生桔梗ai翻唱的歌曲，反而换成了灰澈和另外一位大佬创作的歌曲 —— 《桔梗》

这机子的配色搭配这个铃声简直绝了

上图片~~

白银级稀有机子 —— 三星L228

这机子算是奥运稀有机子里面的白银款

别问为啥，黄鱼上有成色比这台机子更精美的外观

算了不多说。放图~~~

钻石级稀有Linux机子 —— 三星i839/三星i859

据说是稀有的搭载Mizi Linux的机子

而三星搭载Mizi Linux的机子只发布了四款（都是针对国内的）：

i858、i819、i839和i859

而黄鱼上最后的i839和i859被我拿下了，就剩下不知道能不能开机的i819和特别贵的i858

算了不多说，放图：

首先是i839（懒得设置时间了，这样看吧。。。。）

然后就是i859

然而这些为啥才算钻石级别呢，因为还有高手！

皇冠级稀有机子 —— 诺基亚X3-01

别问这台为啥称之为皇冠级别呢？因为这台根本就没有真正意义上的发售过！

而且虽然只是brew的机子，但是因为是稀有机子，就算是brew也值了！

不多说，放图！

以上（我得去睡觉了，要不然明天开学要迟到了。。。。。）

真·彩虹猫加载动画

2024-08-02T17:12:28Z

前言

之前有人反映我的站点特别卡

也不是没有去优化。。。。。但是依然有人说很卡

我感觉是加载动画的问题，刚好我之前找到html+css实现彩虹猫

于是我给这个抄下来了

不废话，正片开始！

教程开始！

新建js

首先，新建[Blogroot]\themes\butterfly\source\js\nyan.js，内容如下：

function cycleFrames (_nyanCat, _currentFrame) {
 _nyanCat.classList = []
 _nyanCat.classList.add(`frame${_currentFrame}`)
}

function replicateSparks (_sparksRow) {
 const numberOfRowsToCoverEntireScreen = Math.ceil(document.getElementById("loading-box").offsetHeight / _sparksRow.offsetHeight)
 const newSparksRows = document.createElement('div')

 for (let a = 0; a < numberOfRowsToCoverEntireScreen-1; a++) {
 newSparksRows.append(_sparksRow.cloneNode(true))
 }

 document.getElementById("loading-box").prepend(newSparksRows)
}

(function () {
 let nyanCat = document.getElementById('nyan-cat')
 let currentFrame = 1

 replicateSparks(document.getElementsByClassName('sparks-combo')[0])

 setInterval(function () {
 currentFrame = (currentFrame % 6) + 1
 cycleFrames(nyanCat, currentFrame)
 }, 70)
})()

这个是用来自动生成div，使得星星可以铺满屏幕

选择方案

以下三种方案任意选择一种：

店长魔改方案

如果你博客有参考店长的这个教程： Loading Animation

那就按照这个教程魔改就行

修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug

if theme.preloader.enable
 case theme.preloader.load_style
 when 'gear'
 include ./load_style/gear.pug
 when 'ironheart'
 include ./load_style/ironheart.pug
 when 'scarecrow'
 include ./load_style/scarecrow.pug
 when 'triangles'
 include ./load_style/triangles.pug
 when 'wizard'
 include ./load_style/wizard.pug
 when 'image'
 include ./load_style/image.pug
+ when 'nyancat'
+ include ./load_style/nyancat.pug
 default
 include ./load_style/default.pug

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\nyancat.pug，内容如下：

#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
 .sparks-combo
 .spark
 .spark
 .spark
 .spark
 .rainbow
 span
 .nyan-cat
 .feet
 .tail
 span
 .body
 .head
 script(src="/js/nyan.js")

script.
 const preloader = {
 endLoading: () => {
 document.body.style.overflow = 'auto';
 document.getElementById('loading-box').classList.add("loaded")
 },
 initLoading: () => {
 document.body.style.overflow = '';
 document.getElementById('loading-box').classList.remove("loaded")

 }
 }
 window.addEventListener('load',()=> { preloader.endLoading() })

 if (!{theme.pjax && theme.pjax.enable}) {
 document.addEventListener('pjax:send', () => { preloader.initLoading() })
 document.addEventListener('pjax:complete', () => { preloader.endLoading() })
 }

修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl


if hexo-config('preloader.enable')
 if hexo-config('preloader.load_style') == 'gear'
 @import './_load_style/gear'
 else if hexo-config('preloader.load_style') == 'ironheart'
 @import './_load_style/ironheart'
 else if hexo-config('preloader.load_style') == 'scarecrow'
 @import './_load_style/scarecrow'
 else if hexo-config('preloader.load_style') == 'triangles'
 @import './_load_style/triangles'
 else if hexo-config('preloader.load_style') == 'wizard'
 @import './_load_style/wizard'
 else if hexo-config('preloader.load_style') == 'image'
 @import './_load_style/image'
+ else if hexo-config('preloader.load_style') == 'nyancat'
+ @import './_load_style/nyancat'
 else
 @import './_load_style/default'

新建[Blogroot]\themes\butterfly\source\css\_load_style\nyancat.styl，内容如下：

#loading-box
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background: #036;
 overflow: hidden;
 position : fixed;
 font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
 z-index: 9999;
 opacity: 1;

 &.loaded
 opacity: 0;
 z-index: -1000;

 .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
 position: absolute;
 background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
 background-size: 100% 5px;
 background-repeat: no-repeat;


 .nyan-cat
 position: fixed;
 left: 50%;
 top: 50%;
 width: 165px;
 height: 100px;
 margin-top: -50px;
 margin-left: -82px;
 -webkit-animation: nyan 400ms step-start infinite;
 animation: nyan 400ms step-start infinite;
 z-index: 19999;

 .body
 left: 35px;
 top: 0;
 width: 105px;
 height: 90px;

 .head
 left: 85px;
 top: 25px;
 width: 80px;
 height: 65px;
 -webkit-animation: head 400ms linear infinite;
 animation: head 400ms linear infinite;

 .rainbow
 position: fixed;
 left: 0;
 top: 50%;
 margin-top: -35px;
 width: 50%;
 height: 65px;
 overflow: hidden;
 z-index: 18888;

 span
 display: block;
 position: relative;
 top: 0;
 width: 100%;
 height: 130px;
 background-size: 80px 5px;
 background-repeat: repeat-x;
 -webkit-animation: rainbow 400ms step-start infinite;
 animation: rainbow 400ms step-start infinite;

 .feet
 left: 20px;
 top: 75px;
 width: 120px;
 height: 25px;
 -webkit-animation: feet 400ms infinite;
 animation: feet 400ms infinite;

 .tail
 position: relative;
 width: 25px;
 height: 30px;
 overflow: hidden;
 top: 30px;
 left: 10px;

 span
 width: 25px;
 height: 120px;
 -webkit-animation: tail 200ms step-start infinite alternate;
 animation: tail 200ms step-start infinite alternate;

 .sparks-combo
 height: 300px;
 width: 200%;
 position: relative;
 animation: woosh 700ms 0ms linear infinite both;

 .spark
 z-index: 1;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: transparent;
 background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

 &:before
 background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

 &:after
 background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

 &:before,&:after
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: transparent;



 &:nth-child(1)
 z-index: 3;
 top: 0;
 left: 20px;
 animation: sparkly 700ms 0ms steps(1) infinite both;

 &:nth-child(1):before
 animation: sparkly-before 700ms 0ms steps(1) infinite both;

 &:nth-child(1):after
 animation: sparkly-after 700ms 0ms steps(1) infinite both;

 &:nth-child(2)
 top: 40px;
 left: 170px;
 animation: sparkly 700ms 200ms steps(1) infinite both;

 &:nth-child(2):before
 animation: sparkly-before 700ms 200ms steps(1) infinite both;

 &:nth-child(2):after
 animation: sparkly-after 700ms 200ms steps(1) infinite both;

 &:nth-child(3)
 top: 100px;
 left: 320px;
 animation: sparkly 700ms 400ms steps(1) infinite both;

 &:nth-child(3):before
 animation: sparkly-before 700ms 400ms steps(1) infinite both;

 &:nth-child(3):after
 animation: sparkly-after 700ms 400ms steps(1) infinite both;

 &:nth-child(4)
 top: 150px;
 left: 200px;
 animation: sparkly 700ms 600ms steps(1) infinite both;

 &:nth-child(4):before
 animation: sparkly-before 700ms 600ms steps(1) infinite both;

 &:nth-child(4):after
 animation: sparkly-after 700ms 600ms steps(1) infinite both;


 .body
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);

 .head
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

 .rainbow > span
 background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


 .feet
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


 .tail > span
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

@-webkit-keyframes rainbow {
 0% {
 top: 0;
 }
 50% {
 top: 0;
 }
 100% {
 top: -65px;
 }
}

@keyframes rainbow {
 0% {
 top: 0;
 }
 50% {
 top: 0;
 }
 100% {
 top: -65px;
 }
}
@-webkit-keyframes nyan {
 0% {
 margin-top: -50px;
 }
 10% {
 margin-top: -50px;
 }
 80% {
 margin-top: -53px;
 }
 100% {
 margin-top: -50px;
 }
}
@keyframes nyan {
 0% {
 margin-top: -50px;
 }
 10% {
 margin-top: -50px;
 }
 80% {
 margin-top: -53px;
 }
 100% {
 margin-top: -50px;
 }
}
@-webkit-keyframes feet {
 0% {
 left: 20px;
 }
 100% {
 left: 30px;
 }
}
@keyframes feet {
 0% {
 left: 20px;
 }
 100% {
 left: 30px;
 }
}
@-webkit-keyframes head {
 0% {
 top: 25px;
 left: 85px;
 }
 24.99% {
 top: 25px;
 left: 85px;
 }
 25% {
 top: 22px;
 left: 88px;
 }
 49.99% {
 top: 22px;
 left: 88px;
 }
 50% {
 top: 22px;
 left: 85px;
 }
 74.99% {
 top: 22px;
 left: 85px;
 }
 75% {
 top: 22px;
 left: 82px;
 }
 99.99% {
 top: 22px;
 left: 82px;
 }
 100% {
 top: 25px;
 left: 85px;
 }
}
@keyframes head {
 0% {
 top: 25px;
 left: 85px;
 }
 24.99% {
 top: 25px;
 left: 85px;
 }
 25% {
 top: 22px;
 left: 88px;
 }
 49.99% {
 top: 22px;
 left: 88px;
 }
 50% {
 top: 22px;
 left: 85px;
 }
 74.99% {
 top: 22px;
 left: 85px;
 }
 75% {
 top: 22px;
 left: 82px;
 }
 99.99% {
 top: 22px;
 left: 82px;
 }
 100% {
 top: 25px;
 left: 85px;
 }
}
@-webkit-keyframes tail {
 0% {
 top: 0;
 }
 25% {
 top: 0;
 }
 49.99% {
 top: 0;
 }
 50% {
 top: -30px;
 }
 74.99% {
 top: -30px;
 }
 75% {
 top: -60px;
 }
 99.99% {
 top: -60px;
 }
 100% {
 top: -90px;
 }
}
@keyframes tail {
 0% {
 top: 0;
 }
 25% {
 top: 0;
 }
 49.99% {
 top: 0;
 }
 50% {
 top: -30px;
 }
 74.99% {
 top: -30px;
 }
 75% {
 top: -60px;
 }
 99.99% {
 top: -60px;
 }
 100% {
 top: -90px;
 }
}
@keyframes woosh {
 0% {
 left: 0px;
 }
 100% {
 left: -400px;
 }
}
@keyframes sparkly {
 0% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
 background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
 }
 33% {
 background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
 background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
 }
 50% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
 66% {
 background-size: 400px 11px, 400px 11px, 0 0, 0 0;
 background-position: 17px 6px, 17px 23px, 0 0, 0 0;
 }
 83% {
 background-size: 0 0, 0 0, 400px 5px, 400px 5px;
 background-position: 0 0, 0 0, 11px 17px, 22px 17px;
 }
 100% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
}
@keyframes sparkly-before {
 0% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 33% {
 background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
 background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
 }
 50% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 66% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 83% {
 background-size: 0 0, 0 0, 400px 5px, 400px 5px;
 background-position: 0 0, 0 0, 17px 12px, 17px 22px;
 }
 100% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
}
@keyframes sparkly-after {
 0% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 33% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 50% {
 background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
 background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
 }
 66% {
 background-size: 0 0, 0 0, 400px 6px, 400px 6px;
 background-position: 0 0, 0 0, 6px 17px, 23px 17px;
 }
 83% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 100% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
}

修改[Blogroot]\_config.butterfly.yml的preloader.load_style配置项

preloader:
 enable: true
 load_color: '#000000' # '#37474f'
 load_style: nyancat # 这边改成nyancat

butterfly 4.5 以上方案

修改[Blogroot]\themes\butterfly\layout\includes\loading\fullpage-loading.pug，复制以下代码替换全部内容。

#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
 .sparks-combo
 .spark
 .spark
 .spark
 .spark
 .rainbow
 span
 .nyan-cat
 .feet
 .tail
 span
 .body
 .head
 script(src="/js/nyan.js")

script.
 const preloader = {
 endLoading: () => {
 document.body.style.overflow = 'auto';
 document.getElementById('loading-box').classList.add("loaded")
 },
 initLoading: () => {
 document.body.style.overflow = '';
 document.getElementById('loading-box').classList.remove("loaded")

 }
 }
 window.addEventListener('load',()=> { preloader.endLoading() })

 if (!{theme.pjax && theme.pjax.enable}) {
 document.addEventListener('pjax:send', () => { preloader.initLoading() })
 document.addEventListener('pjax:complete', () => { preloader.endLoading() })
 }

修改[Blogroot]\themes\butterfly\layout\includes\loading\index.pug，复制以下代码替换全部内容。

if theme.preloader.source === 1
 include ./fullpage-loading.pug
else if theme.preloader.source === 2
 include ./pace.pug
else
 include ./fullpage-loading.pug
 include ./pace.pug

修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。

#loading-box
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background: #036;
 overflow: hidden;
 position : fixed;
 font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
 z-index: 9999;
 opacity: 1;

 &.loaded
 opacity: 0;
 z-index: -1000;

 .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
 position: absolute;
 background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
 background-size: 100% 5px;
 background-repeat: no-repeat;


 .nyan-cat
 position: fixed;
 left: 50%;
 top: 50%;
 width: 165px;
 height: 100px;
 margin-top: -50px;
 margin-left: -82px;
 -webkit-animation: nyan 400ms step-start infinite;
 animation: nyan 400ms step-start infinite;
 z-index: 19999;

 .body
 left: 35px;
 top: 0;
 width: 105px;
 height: 90px;

 .head
 left: 85px;
 top: 25px;
 width: 80px;
 height: 65px;
 -webkit-animation: head 400ms linear infinite;
 animation: head 400ms linear infinite;

 .rainbow
 position: fixed;
 left: 0;
 top: 50%;
 margin-top: -35px;
 width: 50%;
 height: 65px;
 overflow: hidden;
 z-index: 18888;

 span
 display: block;
 position: relative;
 top: 0;
 width: 100%;
 height: 130px;
 background-size: 80px 5px;
 background-repeat: repeat-x;
 -webkit-animation: rainbow 400ms step-start infinite;
 animation: rainbow 400ms step-start infinite;

 .feet
 left: 20px;
 top: 75px;
 width: 120px;
 height: 25px;
 -webkit-animation: feet 400ms infinite;
 animation: feet 400ms infinite;

 .tail
 position: relative;
 width: 25px;
 height: 30px;
 overflow: hidden;
 top: 30px;
 left: 10px;

 span
 width: 25px;
 height: 120px;
 -webkit-animation: tail 200ms step-start infinite alternate;
 animation: tail 200ms step-start infinite alternate;

 .sparks-combo
 height: 300px;
 width: 200%;
 position: relative;
 animation: woosh 700ms 0ms linear infinite both;

 .spark
 z-index: 1;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: transparent;
 background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

 &:before
 background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

 &:after
 background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

 &:before,&:after
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: transparent;



 &:nth-child(1)
 z-index: 3;
 top: 0;
 left: 20px;
 animation: sparkly 700ms 0ms steps(1) infinite both;

 &:nth-child(1):before
 animation: sparkly-before 700ms 0ms steps(1) infinite both;

 &:nth-child(1):after
 animation: sparkly-after 700ms 0ms steps(1) infinite both;

 &:nth-child(2)
 top: 40px;
 left: 170px;
 animation: sparkly 700ms 200ms steps(1) infinite both;

 &:nth-child(2):before
 animation: sparkly-before 700ms 200ms steps(1) infinite both;

 &:nth-child(2):after
 animation: sparkly-after 700ms 200ms steps(1) infinite both;

 &:nth-child(3)
 top: 100px;
 left: 320px;
 animation: sparkly 700ms 400ms steps(1) infinite both;

 &:nth-child(3):before
 animation: sparkly-before 700ms 400ms steps(1) infinite both;

 &:nth-child(3):after
 animation: sparkly-after 700ms 400ms steps(1) infinite both;

 &:nth-child(4)
 top: 150px;
 left: 200px;
 animation: sparkly 700ms 600ms steps(1) infinite both;

 &:nth-child(4):before
 animation: sparkly-before 700ms 600ms steps(1) infinite both;

 &:nth-child(4):after
 animation: sparkly-after 700ms 600ms steps(1) infinite both;


 .body
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);

 .head
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

 .rainbow > span
 background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


 .feet
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


 .tail > span
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

@-webkit-keyframes rainbow {
 0% {
 top: 0;
 }
 50% {
 top: 0;
 }
 100% {
 top: -65px;
 }
}

@keyframes rainbow {
 0% {
 top: 0;
 }
 50% {
 top: 0;
 }
 100% {
 top: -65px;
 }
}
@-webkit-keyframes nyan {
 0% {
 margin-top: -50px;
 }
 10% {
 margin-top: -50px;
 }
 80% {
 margin-top: -53px;
 }
 100% {
 margin-top: -50px;
 }
}
@keyframes nyan {
 0% {
 margin-top: -50px;
 }
 10% {
 margin-top: -50px;
 }
 80% {
 margin-top: -53px;
 }
 100% {
 margin-top: -50px;
 }
}
@-webkit-keyframes feet {
 0% {
 left: 20px;
 }
 100% {
 left: 30px;
 }
}
@keyframes feet {
 0% {
 left: 20px;
 }
 100% {
 left: 30px;
 }
}
@-webkit-keyframes head {
 0% {
 top: 25px;
 left: 85px;
 }
 24.99% {
 top: 25px;
 left: 85px;
 }
 25% {
 top: 22px;
 left: 88px;
 }
 49.99% {
 top: 22px;
 left: 88px;
 }
 50% {
 top: 22px;
 left: 85px;
 }
 74.99% {
 top: 22px;
 left: 85px;
 }
 75% {
 top: 22px;
 left: 82px;
 }
 99.99% {
 top: 22px;
 left: 82px;
 }
 100% {
 top: 25px;
 left: 85px;
 }
}
@keyframes head {
 0% {
 top: 25px;
 left: 85px;
 }
 24.99% {
 top: 25px;
 left: 85px;
 }
 25% {
 top: 22px;
 left: 88px;
 }
 49.99% {
 top: 22px;
 left: 88px;
 }
 50% {
 top: 22px;
 left: 85px;
 }
 74.99% {
 top: 22px;
 left: 85px;
 }
 75% {
 top: 22px;
 left: 82px;
 }
 99.99% {
 top: 22px;
 left: 82px;
 }
 100% {
 top: 25px;
 left: 85px;
 }
}
@-webkit-keyframes tail {
 0% {
 top: 0;
 }
 25% {
 top: 0;
 }
 49.99% {
 top: 0;
 }
 50% {
 top: -30px;
 }
 74.99% {
 top: -30px;
 }
 75% {
 top: -60px;
 }
 99.99% {
 top: -60px;
 }
 100% {
 top: -90px;
 }
}
@keyframes tail {
 0% {
 top: 0;
 }
 25% {
 top: 0;
 }
 49.99% {
 top: 0;
 }
 50% {
 top: -30px;
 }
 74.99% {
 top: -30px;
 }
 75% {
 top: -60px;
 }
 99.99% {
 top: -60px;
 }
 100% {
 top: -90px;
 }
}
@keyframes woosh {
 0% {
 left: 0px;
 }
 100% {
 left: -400px;
 }
}
@keyframes sparkly {
 0% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
 background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
 }
 33% {
 background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
 background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
 }
 50% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
 66% {
 background-size: 400px 11px, 400px 11px, 0 0, 0 0;
 background-position: 17px 6px, 17px 23px, 0 0, 0 0;
 }
 83% {
 background-size: 0 0, 0 0, 400px 5px, 400px 5px;
 background-position: 0 0, 0 0, 11px 17px, 22px 17px;
 }
 100% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
}
@keyframes sparkly-before {
 0% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 33% {
 background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
 background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
 }
 50% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 66% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 83% {
 background-size: 0 0, 0 0, 400px 5px, 400px 5px;
 background-position: 0 0, 0 0, 17px 12px, 17px 22px;
 }
 100% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
}
@keyframes sparkly-after {
 0% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 33% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 50% {
 background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
 background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
 }
 66% {
 background-size: 0 0, 0 0, 400px 6px, 400px 6px;
 background-position: 0 0, 0 0, 6px 17px, 23px 17px;
 }
 83% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 100% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
}

最后修改_config.butterfly.yml中preloader选项, 改完以后source: 1为满屏加载无pace胶囊,source: 2为pace胶囊无满屏动画, source: 3是两者都启用。（这边懒得说就搬运的鱼佬那加载动画的教程了。。。。。反正都一样。。。。。）

# Loading Animation (加载动画)
preloader:
 enable: true
 # source
 # 1. fullpage-loading
 # 2. pace (progress bar)
 # else all
 source: 3
 # pace theme (see https://codebyzach.github.io/pace/)
 pace_css_url: /css/progress_bar.css
 avatar: # 自定义头像

butterfly 4.4.2 以下版本方案

修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。

#loading-box
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background: #036;
 overflow: hidden;
 position : fixed;
 font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
 z-index: 9999;
 opacity: 1;

 &.loaded
 opacity: 0;
 z-index: -1000;

 .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
 position: absolute;
 background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
 background-size: 100% 5px;
 background-repeat: no-repeat;


 .nyan-cat
 position: fixed;
 left: 50%;
 top: 50%;
 width: 165px;
 height: 100px;
 margin-top: -50px;
 margin-left: -82px;
 -webkit-animation: nyan 400ms step-start infinite;
 animation: nyan 400ms step-start infinite;
 z-index: 19999;

 .body
 left: 35px;
 top: 0;
 width: 105px;
 height: 90px;

 .head
 left: 85px;
 top: 25px;
 width: 80px;
 height: 65px;
 -webkit-animation: head 400ms linear infinite;
 animation: head 400ms linear infinite;

 .rainbow
 position: fixed;
 left: 0;
 top: 50%;
 margin-top: -35px;
 width: 50%;
 height: 65px;
 overflow: hidden;
 z-index: 18888;

 span
 display: block;
 position: relative;
 top: 0;
 width: 100%;
 height: 130px;
 background-size: 80px 5px;
 background-repeat: repeat-x;
 -webkit-animation: rainbow 400ms step-start infinite;
 animation: rainbow 400ms step-start infinite;

 .feet
 left: 20px;
 top: 75px;
 width: 120px;
 height: 25px;
 -webkit-animation: feet 400ms infinite;
 animation: feet 400ms infinite;

 .tail
 position: relative;
 width: 25px;
 height: 30px;
 overflow: hidden;
 top: 30px;
 left: 10px;

 span
 width: 25px;
 height: 120px;
 -webkit-animation: tail 200ms step-start infinite alternate;
 animation: tail 200ms step-start infinite alternate;

 .sparks-combo
 height: 300px;
 width: 200%;
 position: relative;
 animation: woosh 700ms 0ms linear infinite both;

 .spark
 z-index: 1;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: transparent;
 background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

 &:before
 background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

 &:after
 background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

 &:before,&:after
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: transparent;



 &:nth-child(1)
 z-index: 3;
 top: 0;
 left: 20px;
 animation: sparkly 700ms 0ms steps(1) infinite both;

 &:nth-child(1):before
 animation: sparkly-before 700ms 0ms steps(1) infinite both;

 &:nth-child(1):after
 animation: sparkly-after 700ms 0ms steps(1) infinite both;

 &:nth-child(2)
 top: 40px;
 left: 170px;
 animation: sparkly 700ms 200ms steps(1) infinite both;

 &:nth-child(2):before
 animation: sparkly-before 700ms 200ms steps(1) infinite both;

 &:nth-child(2):after
 animation: sparkly-after 700ms 200ms steps(1) infinite both;

 &:nth-child(3)
 top: 100px;
 left: 320px;
 animation: sparkly 700ms 400ms steps(1) infinite both;

 &:nth-child(3):before
 animation: sparkly-before 700ms 400ms steps(1) infinite both;

 &:nth-child(3):after
 animation: sparkly-after 700ms 400ms steps(1) infinite both;

 &:nth-child(4)
 top: 150px;
 left: 200px;
 animation: sparkly 700ms 600ms steps(1) infinite both;

 &:nth-child(4):before
 animation: sparkly-before 700ms 600ms steps(1) infinite both;

 &:nth-child(4):after
 animation: sparkly-after 700ms 600ms steps(1) infinite both;


 .body
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);

 .head
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

 .rainbow > span
 background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


 .feet
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


 .tail > span
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

@-webkit-keyframes rainbow {
 0% {
 top: 0;
 }
 50% {
 top: 0;
 }
 100% {
 top: -65px;
 }
}

@keyframes rainbow {
 0% {
 top: 0;
 }
 50% {
 top: 0;
 }
 100% {
 top: -65px;
 }
}
@-webkit-keyframes nyan {
 0% {
 margin-top: -50px;
 }
 10% {
 margin-top: -50px;
 }
 80% {
 margin-top: -53px;
 }
 100% {
 margin-top: -50px;
 }
}
@keyframes nyan {
 0% {
 margin-top: -50px;
 }
 10% {
 margin-top: -50px;
 }
 80% {
 margin-top: -53px;
 }
 100% {
 margin-top: -50px;
 }
}
@-webkit-keyframes feet {
 0% {
 left: 20px;
 }
 100% {
 left: 30px;
 }
}
@keyframes feet {
 0% {
 left: 20px;
 }
 100% {
 left: 30px;
 }
}
@-webkit-keyframes head {
 0% {
 top: 25px;
 left: 85px;
 }
 24.99% {
 top: 25px;
 left: 85px;
 }
 25% {
 top: 22px;
 left: 88px;
 }
 49.99% {
 top: 22px;
 left: 88px;
 }
 50% {
 top: 22px;
 left: 85px;
 }
 74.99% {
 top: 22px;
 left: 85px;
 }
 75% {
 top: 22px;
 left: 82px;
 }
 99.99% {
 top: 22px;
 left: 82px;
 }
 100% {
 top: 25px;
 left: 85px;
 }
}
@keyframes head {
 0% {
 top: 25px;
 left: 85px;
 }
 24.99% {
 top: 25px;
 left: 85px;
 }
 25% {
 top: 22px;
 left: 88px;
 }
 49.99% {
 top: 22px;
 left: 88px;
 }
 50% {
 top: 22px;
 left: 85px;
 }
 74.99% {
 top: 22px;
 left: 85px;
 }
 75% {
 top: 22px;
 left: 82px;
 }
 99.99% {
 top: 22px;
 left: 82px;
 }
 100% {
 top: 25px;
 left: 85px;
 }
}
@-webkit-keyframes tail {
 0% {
 top: 0;
 }
 25% {
 top: 0;
 }
 49.99% {
 top: 0;
 }
 50% {
 top: -30px;
 }
 74.99% {
 top: -30px;
 }
 75% {
 top: -60px;
 }
 99.99% {
 top: -60px;
 }
 100% {
 top: -90px;
 }
}
@keyframes tail {
 0% {
 top: 0;
 }
 25% {
 top: 0;
 }
 49.99% {
 top: 0;
 }
 50% {
 top: -30px;
 }
 74.99% {
 top: -30px;
 }
 75% {
 top: -60px;
 }
 99.99% {
 top: -60px;
 }
 100% {
 top: -90px;
 }
}
@keyframes woosh {
 0% {
 left: 0px;
 }
 100% {
 left: -400px;
 }
}
@keyframes sparkly {
 0% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
 background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
 }
 33% {
 background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
 background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
 }
 50% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
 66% {
 background-size: 400px 11px, 400px 11px, 0 0, 0 0;
 background-position: 17px 6px, 17px 23px, 0 0, 0 0;
 }
 83% {
 background-size: 0 0, 0 0, 400px 5px, 400px 5px;
 background-position: 0 0, 0 0, 11px 17px, 22px 17px;
 }
 100% {
 background-size: 400px 6px, 0 0, 0 0, 0 0;
 background-position: 17px 17px, 0 0, 0 0, 0 0;
 }
}
@keyframes sparkly-before {
 0% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 33% {
 background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
 background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
 }
 50% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 66% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 83% {
 background-size: 0 0, 0 0, 400px 5px, 400px 5px;
 background-position: 0 0, 0 0, 17px 12px, 17px 22px;
 }
 100% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
}
@keyframes sparkly-after {
 0% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 16% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 33% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 50% {
 background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
 background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
 }
 66% {
 background-size: 0 0, 0 0, 400px 6px, 400px 6px;
 background-position: 0 0, 0 0, 6px 17px, 23px 17px;
 }
 83% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
 100% {
 background-size: 0 0, 0 0, 0 0, 0 0;
 background-position: 0 0, 0 0, 0 0, 0 0;
 }
}

修改[Blogroot]\themes\butterfly\layout\includes\loading\fullpage-loading.pug，复制以下代码替换全部内容。

#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
 .sparks-combo
 .spark
 .spark
 .spark
 .spark
 .rainbow
 span
 .nyan-cat
 .feet
 .tail
 span
 .body
 .head
 script(src="/js/nyan.js")

2024-07小记

2024-07-30T22:42:19Z

依然还是每个月的个人小记啦

虽然这个月出了一点事故，但也是有一点惊喜的啦 ~~~

话不多说，正片开始

初入罗德岛

看到罗德岛，你们知道我干啥了吧

没错，我入坑《明日方舟》了

我原本是想说小何让我入坑《绝区零》的事情的，结果那次我祖奶奶过世再加上我弟生病，导致我这几天根本没心情玩

也因此对绝区零也没什么太大印象，只能说说方舟的事情

入坑的是国际服（国服的话。。。。。懂得都懂）

但是这暑假的一堆事情和小何给我的一大堆事情，再加上补习，让我没怎么玩过游戏（甚至连ba，赛马娘和大碧蓝都没玩了，）

后面也懒得给这游戏做评价了，反正游戏嘛，能放轻松就行

成为小众网vip

我上篇小记不是收藏了一些机子吗？

我之前想给这些机子安装几款游戏玩玩，但是无奈我想找的只有去小众网才有

于是我花9.9买下小众网一年会员

虽然我不怎么下载这里面的软件了。。。。。就当是支持小众网吧~~

（反正这个月入手了几台新机子，后面想给这些机子下载软件也很方便）

淘到的新机子

还是老样子，来看看我这个月收藏了什么老机子吧：

三星M128

这台原计划是两天到达的，但是因为台风导致拖了一天

~~有人甚至还说被风吹飞了，这要是被风吹飞了我可能会当场裂开，毕竟这可是稀有机子，还是奥运会特别纪念手机。。。。。~~

这台的右键貌似有问题，每次都得用力按一下才能点到右边

算了，反正是稀有机子嘛，就别要求这么多啦。。。。

PPC 三兄贵 —— 三星Omnia I900V/I908/I908L

其实那I900V就是我上个小记说的那PPC，这次确实搞到了三台，只不过是两台I908L和一台I908

其中一台I908L屏幕是坏的，刚好我有一台I900V那外壳是坏的，索性就把外壳拆下来装到那I900V上来了

第二台摩托罗拉 —— 摩托罗拉明A1200

那次看完《保持通话》这个电影之后就一直想搞台这个了

（其实我原本想要的是A1600，然后找不到便宜的，只能a1200）

可惜的是这个貌似听筒是坏掉的，后面等我搞到个好的听筒再来发照片吧

第三台摩托罗拉 —— 摩托罗拉刀锋V3

（别问第一台是什么，第一台是C289，黑白屏的，很久之前从我外婆那边收到的）

这台我其实是买了两台

有一台被当作另一台的配件机了不愧是刀锋，这手感放在2024都不过时

可惜的是在此之后摩托罗拉据说是错过了安卓，导致移动业务被收购了。。。。。

其它的先不展示。。。。。这个月淘到的机子有一点多了。。。。

以上

2024-06小记

2024-06-28T22:31:59Z

很好，马上就快到暑假了，但我得7月11日才开始正式放暑假。。。。。。

（bobo和小何、安小歪都已经开始放暑假了。。。。。。）

算了，正片开始吧

全站npm化成功

经历了多次翻车之后，本站的全站npm化终于成功了

我那全站npm化的方案与byer那篇文章不同，我的方案是将hexo-swpp和 cyanfalse大佬的教程结合起来

实现了npm版本自定义更新、采用CacheStorage存储来实现ServiceWorker的全局变量持久化

~~（结果因为英文站那边出现问题，导致我不得不再次放弃全站npm化）~~（修好了）

成功搞indleweb

之前我说过，要把indleweb搞好的

现在终于好了

并且已经加入了indleweb webring

英文站的话。。。。。还在测试，因为并不是完全是英文的，还在修改

收藏了几台手机

这些都是之前在闲鱼上看见的

其中有一台说是配件机，说是不能开机

结果被我搞开机了

然后这三台我都给它们换了主题

换完主题的效果：

以上（虽然还有一场考试。。。。。但是是在下周四）

2024-05小记

2024-05-26T21:18:33Z

久违的在n+1月前写n月小记。。。。。。

废话不多说，正片开始！

突如其来的通知

说实在的，看到这个通知，我既感到意外，又觉得很不意外

因为之前我那文章封面都是loliapi生成的，而loliapi里面又诞生出了不少擦边图

目前已经将一批头图更换，并且准备半年后重新申请

如果申请还是不通过的话，那么就特别遗憾了

原本是想让博友圈的管理来改我那站点信息的，现在搞成那样，只能说下次注意了。。。。。。

2024-06-05更新： 一周了都没给我回复，估计已经给我拉入黑名单了

那算了，既然这样的话，那这个链接就不打算留了

反正也是我自己一时的疏忽搞成的这样。。。。。。

全站npm化大翻车

在我逛逛友链朋友圈的时候发现了这么一篇文章：

hexo全站NPM化之·通过npmmirror加速你的博客访问

之前CyanFalse大佬那个我看不懂，而且懂了也不知道怎么写QWQ

于是我开始安装这个教程来搞全站npm化

结果这么一搞，反而拖慢了站点加载速度，而且：我原本以为是npmmirror的问题，毕竟大佬说了NPM已经开启了白名单模式

但尽管我换成jsd和unpkg也依然是这个情况

只能取消全站npm化

后面我去问下大佬是怎么回事吧。。。。。。

站点添加Ruffle

没错，我又给站点添加回Ruffle了

话说回来，估计我认识的这些搞博客的站长中，只有我对swf依然是最感兴趣了吧。。。。。。

如果你还不知道Ruffle是什么的话，可以去看看我这篇文章：

Ruffle测试

Hello，xLog

在别的地方了解到了 xLog 这个使用区块链技术存储数据的博客平台

而且看见有一堆大佬也从 Hexo 迁移到 xLog

在好奇之下我便搞了这玩意

怎么说呢，虽然这玩意有着高度可定制的需求，并且能保证数据是安全的

而且因为用的区块链，使得数据在得到安全的情况下，可以通过区块链可以赚取代币

但也是因为用的区块链，而链上操作是透明且不可撤销的，其他人可以通过区块链历史查看文章的修改历史

也因此导致它虽然能删除文章，但不算真正无法真正删除一篇文章（简称：如删）

但这还不是重点，重点是：不能引入 JS（重点，因为这样的话我没法引入 Ruffle 了。。。。。。），并且没有主题

并且也可能是因为我 Hexo 用习惯了，面对这种博客后台，我居然有点不太习惯

但还好，xLog 能导入 MarkDown 文件，并且支持 Front Matter

也因此，后面我打算让 Hexo 和 xLog 同步更新

（虽然这得耗费不少时间，但是我喜欢折腾的乐趣，然而我没想到的是这玩意居然能添加开往的链接，这也是我没想到的，但这里文章太少，后面我打算文章多一点之后再去试试看能不能申请加入开往吧。。。。。。。。。。）

至于我那 xLog 站点的名字，既然我给 Hexo 的主题 UI 是 CetaStories（名字修改于希腊字母 Theta）

那名字决定了！那个xLog博客名字就叫星空魔法书・Delta 吧！

我的xLog链接：https://xlog.sinzmise.top/

（2025.1.8 —— 由于我的系统重新安装，导致metamask数据丢失没法登录，可惜我那魔法书了啊！！！！！！）

以上

Ruffle测试

2024-05-25T21:12:39Z

这玩意也是很久之前就认识到了

我甚至记得我还给这玩意写过Hexo插件

但后来我给这个插件删了，因为这玩意的配置真的简单

介绍

随着网页的安全性升级，带有安全漏洞的Flash也逐渐被淘汰，现在的主流浏览器几乎都不支持Flash

也因此，很多的站点都已经废弃掉他们的flash了

但后面我找到了一款叫Ruffle的工具，这玩意是个全新的开源Flash项目，旨在从本地到网页完全替代老旧的Flash

而且不同于带有安全漏洞的Flash，Ruffle采用了高效安全的Rust语言编写，同时完全开源保证了及时修补漏洞

搞这玩意的很多教程都是得在浏览器安装插件，让用户通过这个插件来实现播放flash

但我在Ruffle的官网找到个这玩意：

这玩意能通过引入在站点js的方式来让自己的站点再次适配swf

那就废话不多说，赶紧开始吧！

~~（话说好像在2024好像只有我对flash依然这么感兴趣。。。。。。。）~~

配置Ruffle教程

基础

只需要在站点下面引入这行代码就可以了

<script src="https://jsd.onmicrosoft.cn/npm/@ruffle-rs/ruffle"></script>

如果你想用swfobject来引入swf的话，还得另外引入这个代码：

<script src="https://jsd.onmicrosoft.cn/gh/swfobject/swfobject@master/swfobject/swfobject.js"></script>

之后就可以在站点放置flash动画了！

不过估计也有人不知道flash动画怎么放，我这里就写个Demo吧！

Demo

新浪的

人人网的

开心网的

Demo源码

新浪的

<embed width="238" height="24" name="FlashVars" wmode="opaque" play="true" loop="true" scale="showall" src="https://files.blog.sinzmise.top/swf/sina_music_player.swf" FlashVars="url=https%3A%2F%2Ffiles.blog.sinzmise.top%2Fmp3%2FRainAndTears.mp3" type="application/x-shockwave-flash"></embed>

人人网的

<embed width="360" height="30" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="sameDomain" bgcolor="#ffffff" scale="noscale" quality="high" menu="false" loop="false" wmode="transparent" src="https://files.blog.sinzmise.top/swf/renren_music_player.swf?url=https%3A%2F%2Ffiles.blog.sinzmise.top%2Fmp3%2FRainAndTears.mp3&Autoplay=0" />

开心网的

<embed width="365" height="50" align="middle" flashvars="url=https%3A%2F%2Ffiles.blog.sinzmise.top%2Fmp3%2FRainAndTears.mp3&autoplay=0" src="https://files.blog.sinzmise.top/swf/kaixin_music_player.swf" wmode="transparent" loop="false" menu="false" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>

还没写完，后续再写更多Demo

2024-04小记

2024-05-02T18:31:42Z

先祝大家劳动节快乐（虽然已经过了一天），也提前祝大家五四青年节快乐！

然后，正片开始！

Akilar群寄了

这件事还是小何告诉我的 ~~（小何没告诉我之前我还不知道）~~

看店长的文章我才知道大概是有群友转发了含R18内容的聊天记录，然后Akliar才把群给解散的

Akilar的通知：

关于群聊更换的紧急通知

Akilar新群：

Akilarの糖果屋-新群

然后洪mac一年一月八日~~（bushi）~~（也就是2024年五月三日），我加入了Akilar的新群

加入笔墨迹

Blogs·CN（笔墨迹）是一个位于中国境内的平台，致力于发掘和分享"优秀个人独立博客"。

我老早之前就想加入了，但是那天由于博客要重新装修，所以我没加入

现在装修好了，可以加入了

目前已经通过

马里奥制造1打百人团教程

2024-04-27T19:43:40Z

不知道什么时候，我开始玩马里奥制造（以下简称“马造”）了

但是我没有Switch，模拟器配置较为麻烦，所以我没法玩马造2，只能玩玩马造1

然而在2024年4月9日，任天堂 3DS / WiiU 在线功能停服

在停服之前，我就一直知道马造1有私服，但是这玩意之前不知道为啥总配置失败

现在倒是配置好了，话不多说，游玩教程开始！

下载懒人包

这玩意我已经打包成为一个懒人包了

大伙想要的可以下载： https://pan.sinzmise.top/SMM/SMM.7z

下载完成之后先点击Start启动服务端

正常情况下的这四个的提示是这样的：

NEX（SMM）占用端口59900和59921
NEX（Friends）占用端口60000和60021
Pretando++ 占用端口8383
Caddy 占用端口80和443

如果出现异常的话

十有八九可能是端口被占用了

请先用netstat -ano|findstr 程序对应的端口号查看端口有没有被占用

如果端口被侵占了，输入taskkill /t /f /im 进程号关闭占用端口的进程

如果还是不行的话……加Q群问

一切正常的话，点击“Start Cemu”打开模拟器

注意：必须用自带的模拟器！要不然打开马造世界关卡会提示106-0502错误

然后双击Super Mario Maker，等待加载完成便可以游玩了！

~~这可能是我写博客以来第一次写这么简短的教程~~

Serv00搭建Artalk

2024-04-12T22:46:14Z

之前在安小歪的推荐下，找到了一个叫serv00的东西

但是因为这玩意我不会用，所以我把Serv00一直当成不能部署thinkphp的虚拟主机使用

然而我之前看见了这个教程：

Serv00搭建各种服务

于是我决定在Serv00搭建一些项目

但里面没有Artalk的教程，所以我准备按照部署Alist的方法给Serv00部署Artalk

那么好，教程开始！

教程

准备工作

Serv00搭建各种服务·部署应用前的一些准备工作

正式开始

首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ：

Key	Value
Domain	`xxx.USERNAME.serv00.net`（也可以把原有的 USERNAME.serv00.net 删掉后重新添加）
Website Type	proxy
Proxy Target	localhost
Proxy URL	留空
Proxy port	你准备用来部署 Alist 的端口
Use HTPPS	False
DNS support	True

添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ：

Type	Domain
Generate Let’s Encrypted certificate	与刚刚添加的站点域名保持一致（如果是原有的 `USERNAME.serv00.net` ，可以省略此步）

接着SSH登入，并进入刚刚你新建的域名目录下的public_html路径下：

# 使用一键命令安装 Artalk
wget -O artalk-freebsd.sh https://github.com/SinzMise/artalk-deploy/raw/serv00/artalk-freebsd.sh && sh artalk-freebsd.sh

在 Panel 中进入 MySQL 选项卡，使用 Add database 功能新建一个数据库。（当然Postgresql也可以，如果不要数据库就只要sqlite可以不用新建）

密码要求含有大写字母、小写字母和数字三种字符，且长度必须超过6个字符。

接下来进入 File manager 选项卡，进入~/domains/xxx.USERNAME.serv00.net/public_html路径，可以看到一个名为 artalk.yml 的文件，右键点击，选择 View/Edit > Source Editor ，进行编辑

这里面就只要改port和db就行，其它的能在后台设置

其中port改成你放行的端口

db是数据库设置

参考如下：改完之后，点击 save 保存，接着回到 SSH 窗口中进行操作：

测试启动 Artalk：

./artalk server

确定运行没有问题后，按Ctrl+c即可停止运行。

由于artalk需要创建管理员账号，因此需要输入以下命令：

./artalk admin

最后使用pm2启动并且管理artalk：

pm2 start "./artalk server" --name "Artalk"

同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。

收尾工作

参考教程： Serv00搭建各种服务·收尾工作

博客装修+3月小记

2024-04-06T19:40:44Z

这篇小记原本是预计清明前发布的，但奈何出了点问题到现在才发

算了，话不多说，正文开始！

博客又双叒叕更新了

目前你们看见的是一个新的页面对吧

没错，从现在开始博客将启用新名字：星空故事·魔法小屋

这个名字来源于我之前做的梦，梦中的画面：

我站在星空下，望着那美丽的星星
突然，一颗星星向我奔来
这颗星星化成了光，在光中出现一座小屋
这座小屋的门突然打开，探出头来的正是我之前所说的那只猫娘——夏玖铃
她说：“哎，好吧，被你发现了啊。。。。。其实我的猫耳，是魔法变出来的”
随后她便向我展示了魔法
我在她的屋子里一直探索知道我梦醒来

也因此，我的Q群正式改名为“中弦局·星空计划闲聊群”

（但目前这个计划是不会做什么项目啦。。。。硬要说的话我那博客就算是。。。。吧？）

回归荒野行动

为什么叫“回归”呢？因为我18年入坑的荒野行动

然后由于我那台米4手机摔坏了，再加上某些原因，退网了半个月

19年的时候我再次接触电脑的时候，但由于那时候电脑配置低，玩了不一会就退游了

六年之后，小何的推荐让我重新回归了这款游戏

别说，重新回归后的感觉还真不一样，把把都能2杀以上 ~~（虽然我玩和平的时候最高10-15杀，况且这周下来只吃了一把鸡）~~

怎么说也得把这款游戏放在游戏页面啦。。。。。但由于博客重新装修，游戏页面还没搞。。。。。。

新键盘

今年的3月29（农历2月20，顺带一提我们这边一般过的是农历生日）是我生日

我弟给我买了款键盘（在拼夕夕上购买的）

这玩意好看而且打起来手感不错，唯一的缺点就是没有截图键

（不得不设置Ctrl+Win+S截图）

入坑pjsk日服 + 成功体会到了某个谱的“含金量”

之前据说pjsk日服更新了新UI，打起来手感跟旧UI不同，我好奇于是就下了日服

在下载日服数据包的同时我把这件事告诉了我那之前玩过pjsk的哥们，结果：

~~好好好，小丑竟是我自己（）~~

然后他给我推荐了两个谱：

试了一下这玩意的Hard模式

好好好，我算是体会到这谱的“含金量”了

然后他给我意味深长的一句话：

确实《简单》，我逝了一下，差点眼花

然后就没有然后了

入坑SMMWE（Super Mario Maker:World Engine）

这玩意我还是之前意外刷到的，因为我平时喜欢玩马造1~~（用的模拟器）~~和看马造2的视频~~（因为我没有Switch）~~

然后我刷马造2刷着刷着意外刷到SMMWE的视频

我心想：马造有手机版了？虽然是非官方但还是玩一玩吧

然后体验了一下

这么说吧，虽然这玩意是“同人”创，但也是成功模仿了马造2的画面展示着马造1（bushi）

但是是手机端的，而且还是“同人”，能理解。。。。。。

2024-02小记

2024-03-03T18:10:44Z

时间真快，转眼间，新年、2月过去了

就让这里写下我2月做了什么吧

伺か（伪春菜），我并未忘记

从之前我就想将明猪大佬的网页版伪春菜看板娘搞到Hexo里去，因为时间等原因我并未实施

现在我把它搞上去了，效果如下：

目前所使用的人格是落鸟，后面如果有时间的话我写个Hexo插件，然后在插件里切换人格

还有有关聊天功能嘛。。。。。我是打算用AI来实现啦。。。。。。。

（2024-05 因为新博客部署伪春菜的时候出现了一些问题，导致春菜没到新家，很抱歉！目前正在修复）

现在因为开学了，所以不能经常打开ssp看橘花和绿坝娘（没错，也有人做绿坝娘的ssp人格，甚至还是有配音的）

但是我依然没有忘掉他们。。。。。。

就像我之前的文章里说的，希望伪春菜这个圈子能跟以前一样在国内重新爆发活力

（虽然代价是圈子变臭，还不如让很少人了解这个圈子。。。。。）

Memos又寄了。。。。。。

我是没想到Koyeb会暂停部署，Kuma来了也没管用

算了，后面我找个免费方法再搞Memos吧

反正现在还能访问，~~这个干脆就做简短点啦。。。。。（bushi）~~

GTA V，启动！

别问为啥要把这个放在二月小记，我只能在周末才能碰到电脑，也因此只能在假期写文章

~~也别问我为啥不在手机上写，我Qexo都没搞。。。。。。~~

经过小何的邀请下，我决定入坑GTA5，并且在小何的帮助下成功用15块钱搞到了GTA5白号

他带我打了个差事，然后抢抢便利店，最后还打了死亡对战（虽然平局了）

怎么说呢。。。。。。。虽然我玩的游戏很多，但因为我很少玩游戏，所以不知道怎么评价

但怎么说呢，总归也入坑了一款我没玩过的游戏呢

给你的站点添加个可可爱爱的看板娘——伪春菜

2024-02-16T17:17:26Z

前言

什么是伪春菜？请看这里

作为一个早在xp时代就出现的桌面精灵，伪春菜有了爆火的人气

后来不知道什么时候开始在国内由盛转衰，直到现在我对这个圈子少之又少

我自己也下载了ssp并且应用了后来某位大佬复活的Taromati2人格

某次我逛逛某个博客站点时发现有个站点将伪春菜当成了看板娘

就去去搜了一下，得到的结果是：http://www.lmyoaoa.com/inn/archives/4504/

又因为这玩意已经很久没更新，所以我将这个的js、css和图片提取出来，然后魔改了一下，方便放在hexo里面

废话不多说，开始吧！

引入js和css

{blogroot}/source/weichuncai/css/style.css

#smchuncai {opacity:0.85;width:160px;height:160px;position:fixed;top:400px;left:800px;font-size:12px;}
* html #smchuncai {position:absolute;}
#chuncaiface {width:160px;height:160px;background-repeat:no-repeat;position:absolute;top:0px;left:0px;}
/*#chuncaimenu {width:46px;line-height:16px;float:left;font-size:12px;cursor:pointer;background-color:#666;color:#FFF;text-align:center;}*/
#showchuncaimenu {float:left;text-align:left;width:100%;overflow:hidden;display:none;}
/*#showchuncaimenu ul, */#tempsaying ul {margin:1px 0px 0px 0px;padding:0px 0px 0px 5px;float:left;width:100%;line-height:16px;cursor:pointer;overflow:hidden;}
.wcc_mlist {text-align:center;width:47%;float:left;line-height:16px;margin:0;padding:0px 0px 4px 0px;cursor:pointer;overflow:hidden;}
#tempsaying ul {width:96%;}
#callchuncai {position:fixed;width:60px;line-height:16px;cursor:pointer;display:none;font-size:12px;border:1px solid #e87a73;background-color:#FFF;}
* html #callchuncai {position:absolute;}
#dialog_chat {position:absolute;top:0px;left:-205px;width:200px;line-height:23px;text-align:left;}
#dialog_chat_loading {width:200px;height:30px;background:url("../imgs/loading.gif") no-repeat center center;display:none;}
#chat_top {float:left;width:200px;height:5px;overflow:hidden;background:url("../imgs/chat_top.gif") no-repeat;}
#dialog_chat_contents, #chuncaisaying, #getmenu, #tempsaying {float:left;margin:0;padding-left:0px;width:198px;line-height:23px;background-color:#ffffee;}
#getmenu, #tempsaying,#chuncaisaying {padding:0px 0px 0px 2px; width:196px;}
#dialog_chat_contents {width:198px;border-left:1px solid #e87a73;border-right:1px solid #e87a73;}
#chat_bottom {width:200px;height:10px;float:left;background:url("../imgs/chat_bottom.gif") no-repeat;}
#chat_top, #chat_bottom {}
#tempsaying, #hiddenfaces {display:none;}
#getmenu {width:95%;height:16px;margin:0;padding:0;cursor:pointer;background:url("../imgs/menu.jpg") no-repeat top right;}
#addinput {width:240px;height:20px;position:absolute;top:150px;left:-260px;border:1px solid #888;background-color:#FFF;padding-top:2px;overflow:hidden;display:none;}
#inp_l {float:left;width:220px;height:20px;}
#inp_r {float:right;width:20px;height:20px;font-size:12px;text-align:center;cursor:pointer;}
#talk {border:none;float:left;width:180px;height:16px;}
#talkto {float:left;border:none;width:30px;height:16px;background:url("../imgs/ok.jpg");cursor:pointer;}

{blogroot}/source/weichuncai/js/common.js

var smjq = jQuery;
var _typei = 0;
var weichuncai_text = '';
smjq(document).ready(function(){
 var getwidth = getCookie("historywidth");
 var getheight = getCookie("historyheight");
 if(getwidth != null && getheight != null){
 var width = getwidth;
 var height = getheight;
 }else{
 var width = document.documentElement.clientWidth- 200 - imagewidth;
 var height = document.documentElement.clientHeight- 180 - imageheight;
 }

 var cwidth = document.documentElement.clientWidth-100;
 var cheight = document.documentElement.clientHeight-20;
 //var height = document.body.clientHeight-200;
 var moveX = 0;
 var moveY = 0;
 var moveTop = 0;
 var moveLeft = 0;
 var moveable = false;
 var docMouseMoveEvent = document.onmousemove;
 var docMouseUpEvent = document.onmouseup;

 smjq("body").append('<div id="smchuncai" onfocus="this.blur();" style="color:#626262;z-index:999;"><div id="chuncaiface"></div><div id="dialog_chat"><div id="chat_top"></div><div id="dialog_chat_contents"><div id="dialog_chat_loading"></div><div id="tempsaying"></div><div id="showchuncaimenu"><ul class="wcc_mlist" id="shownotice">显示公告</ul><ul class="wcc_mlist" id="chatTochuncai">聊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天</ul><ul class="wcc_mlist" id="foods">吃 零 食</ul><ul class="wcc_mlist" id="aboutmanage">关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;于</ul><ul class="wcc_mlist" id="lifetimechuncai">生存时间</ul><ul class="wcc_mlist" id="closechuncai">关闭春菜</ul></div><div><ul id="chuncaisaying"></ul></div><div id="getmenu"> </div></div><div id="chat_bottom"></div></div></div>');
 smjq("#smchuncai").append('<div id="addinput"><div id="inp_l"><input id="talk" type="text" name="mastersay" value="" /> <input id="talkto" type="button" value=" " /></div><div id="inp_r"> X </div></div>');
 smjq("body").append('<div id="callchuncai">召唤春菜</div>');
 //判断春菜是否处于隐藏状态
 var is_closechuncai = getCookie("is_closechuncai");
 if(is_closechuncai == 'close'){
 closechuncai_init();
 }
 //设置初始状态
 getdata("getnotice");
 setFace(1);

 smjq("#smchuncai").css('left', width+'px');
 smjq("#smchuncai").css('top', height+'px');
 smjq("#smchuncai").css('width', imagewidth+'px');
 smjq("#smchuncai").css('height', imageheight+'px');
 smjq("#callchuncai").attr("style", "top:"+cheight+"px; left:"+cwidth+"px; text-align:center;");

 smcc = document.getElementById("smchuncai");
 smcc.onmousedown = function(){
 var ent = getEvent();
 moveable = true;
 moveX = ent.clientX;
 moveY = ent.clientY;
 var obj = document.getElementById("smchuncai");
 moveTop = parseInt(obj.style.top);
 moveLeft = parseInt(obj.style.left);
 if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
 window.getSelection().removeAllRanges();
 }
 document.onmousemove = function(){
 if(moveable){
 var ent = getEvent();
 var x = moveLeft + ent.clientX - moveX;
 var y = moveTop + ent.clientY - moveY;
 var w = 200;
 var h = 200; //w,h为浮层宽高
 obj.style.left = x + "px";
 obj.style.top = y + "px";
 }
 };
 document.onmouseup = function(){
 if(moveable){
 var historywidth = obj.style.left;
 var historyheight = obj.style.top;
 historywidth = historywidth.replace('px', '');
 historyheight = historyheight.replace('px', '');
 setCookie("historywidth", historywidth, 60*60*24*30*1000);
 setCookie("historyheight", historyheight, 60*60*24*30*1000);
 document.onmousemove = docMouseMoveEvent;
 document.onmouseup = docMouseUpEvent;
 moveable = false;
 moveX = 0;
 moveY = 0;
 moveTop = 0;
 moveLeft = 0;
 }
 }
 };
 smjq("#getmenu").click(function(){
 chuncaiMenu();
 setFace(1);
 });
 smjq("#shownotice").click(function(){
 getdata("getnotice");
 setFace(1);
 });
 smjq("#closechuncai").click(function(){
 setFace(3);
 closechuncai();
 });
 smjq("#callchuncai").click(function(){
 setFace(2);
 callchuncai();
 setCookie("is_closechuncai", '', 60*60*24*30*1000);
 });
 smjq("#shownotice").click(function(){
 setFace(1);
 closeChuncaiMenu();
 });
 smjq("#lifetimechuncai").click(function(){
 closeChuncaiMenu();
 closeNotice();
 setFace(2);
 getdata('showlifetime');
 });
 smjq("#chatTochuncai").click(function(){
 showInput();
 });
 smjq("#inp_r").click(function(){
 closeInput();
 chuncaiSay('不聊天了吗？(→_→)');
 setFace(3);
 });
 smjq("#talkto").click(function(){
 getdata("talking");
 });
 smjq("#aboutmanage").click(function(){
 closeChuncaiMenu();
 closeNotice();
 smjq("#getmenu").css("display", "none");
 chuncaiSay("你想了解我主人？跟我来吧～～～");
 setFace(2);
 setTimeout(function(){
 window.location.href = _about_path ;
 }, 2000);
 });
 smjq("#foods").click(function(){
 closeChuncaiMenu();
 closeNotice();
 getdata("foods");
 });
/* smjq("#showchuncaimenu").hover(function(){
 },function(){
 smjq("#showchuncaimenu").slideUp('slow').show();
 });*/
 document.onmousemove = function(){
 stoptime();
 tol = 0;
 setTime();
 //chuncaiSay("啊，野生的主人出现了！ ～～～O口O");
 }
 talkSelf(talktime);
 document.getElementById("smchuncai").onmouseover = function(){
 if(talkobj){
 clearTimeout(talkobj);
 }
 talktime = 0;
 talkSelf(talktime);
 }
 });

function getEvent() {
 return window.event || arguments.callee.caller.arguments[0];
}

var eattimes = 0;
function eatfood(obj){
 var gettimes = getCookie("eattimes");
 if(parseInt(gettimes) > parseInt(9)){
 chuncaiSay("主人是个大混蛋！！");
 setFace(3);
 closechuncai_evil();
 }else if(parseInt(gettimes) > parseInt(7)){
 chuncaiSay(".....................肚子要炸了，死也不要再吃了～～！！！TAT");
 setFace(3);
 }else if(parseInt(gettimes) == parseInt(5)){
 chuncaiSay("我已经吃饱了，不要再吃啦......");
 setFace(3);
 }else if(parseInt(gettimes) == parseInt(3)){
 chuncaiSay("多谢款待，我吃饱啦～～～ ╰（￣▽￣）╭");
 setFace(2);
 }else{
 var id = obj.replace("f",'');
 getdata('eatsay', id);
 }
 eattimes++;
 setCookie("eattimes", eattimes, 60*10*1000);
}
function chuncaiMenu(){
 //smjq("#showchuncaimenu").slideDown('fast').show();
 clearChuncaiSay();
 closeInput();
 chuncaiSay("准备做什么呢？");
 smjq("#showchuncaimenu").css("display", "block");
 smjq("#getmenu").css("display", "none");
 smjq("#chuncaisaying").css("display", "none");
}
function closeChuncaiMenu(){
 clearChuncaiSay();
 smjq("#showchuncaimenu").css("display", "none");
 //smjq("#chuncaisaying").css("display", "block");
 showNotice();
 smjq("#getmenu").css("display", "block");
}
function showNotice(){
 smjq("#chuncaisaying").css("display", "block");
}
function closechuncai(){
 stopTalkSelf();
 chuncaiSay("记得再叫我出来哦...");
 smjq("#showchuncaimenu").css("display", "none");
 setTimeout(function(){
 smjq("#smchuncai").fadeOut(1200);
 smjq("#callchuncai").css("display", "block");}, 2000);
 //保存关闭状态的春菜
 setCookie("is_closechuncai", 'close', 60*60*24*30*1000);
}
function closechuncai_evil(){
 stopTalkSelf();
 smjq("#showchuncaimenu").css("display", "none");
 setTimeout(function(){
 smjq("#smchuncai").fadeOut(1200);
 smjq("#callchuncai").css("display", "block");}, 2000);
}
function closechuncai_init(){
 stopTalkSelf();
 smjq("#showchuncaimenu").css("display", "none");
 setTimeout(function(){
 smjq("#smchuncai").css("display", "none");
 smjq("#callchuncai").css("display", "block");}, 30);
}
function callchuncai(){
 talkSelf(talktime);
 smjq("#smchuncai").fadeIn('normal');
 smjq("#callchuncai").css("display", "none");
 closeChuncaiMenu();
 closeNotice();
 chuncaiSay("我回来啦～");
 setCookie("is_closechuncai", '', 60*60*24*30*1000);
}

function chuncaiSay(s){
 clearChuncaiSay();
 smjq("#tempsaying").append(s);
 smjq("#tempsaying").css("display", "block");
 weichuncai_text = s;
 typeWords();
}
function clearChuncaiSay(){
 document.getElementById("tempsaying").innerHTML = '';
}
function closeNotice(){
 smjq("#chuncaisaying").css("display", "none");
}
function showInput(){
 closeChuncaiMenu();
 closeNotice();
 chuncaiSay("............?");
 //setFace(1);
 smjq("#addinput").css("display", "block");
}
function closeInput(){
 setFace(3);
 smjq("#addinput").css("display", "none");
}
function clearInput(){
 document.getElementById("talk").value = '';
}
function createFace(a, b, c){
 smjq("head").append('<div id="hiddenfaces"><img id="hf1" src="'+a+'" /><img id="hf2" src="'+b+'" /><img id="hf3" src="'+c+'" /></div>');
 setFace(1);
}
function setFace(num){
 obj = document.getElementById("hf"+num).src;
 smjq("#chuncaiface").attr("style", "background:url("+obj+") no-repeat scroll 50% 0% transparent; width:"+imagewidth+"px;height:"+imageheight+"px;");
}
function getdata(el, id){
 smjq.ajax({
 type: 'GET',
 url: _weichuncai_jsonpath,
 cache: 'false',
 dataType: 'html',
 contentType: 'application/json; charset=utf8',
 beforeSend: function(){
 //smjq("#dialog_chat").fadeOut("normal");
 smjq("#tempsaying").css('display', "none");
 smjq("#dialog_chat_loading").fadeIn("normal");
 },
 success: function(data){
 smjq("#dialog_chat_loading").css('display', "none");
 //smjq("#dialog_chat").fadeIn("normal");
 smjq("#tempsaying").css('display', "");
 var dat = eval("("+data+")");
 if(el == 'getnotice'){
 chuncaiSay(dat.notice);
 setFace(1);
 }else if(el == 'showlifetime'){
 BirthDay=new Date(dat.showlifetime);//建站日期
 today=new Date();
 timeold=(today.getTime()-BirthDay.getTime());
 sectimeold=timeold/1000
 secondsold=Math.floor(sectimeold);
 msPerDay=24*60*60*1000
 e_daysold=timeold/msPerDay
 daysold=Math.floor(e_daysold);
 e_hrsold=(daysold-e_daysold)*-24;
 hrsold=Math.floor(e_hrsold);
 e_minsold=(hrsold-e_hrsold)*-60;
 minsold=Math.floor((hrsold-e_hrsold)*-60);
 seconds=Math.floor((minsold-e_minsold)*-60);
 chuncaiSay("我已经与主人 一起生存了 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分钟 "+seconds+" 秒的快乐时光啦～*^_^*");
 }else if(el == 'talking'){
 var talkcon = smjq("#talk").val();
 var i = in_array(talkcon, dat.ques);
 var types = typeof(i);
 if(types != 'boolean'){
 chuncaiSay(dat.ans[i]);
 setFace(2);
 }else{
 chuncaiSay('.......................嗯？');
 setFace(3);
 }
 clearInput();
 }else if(el == 'foods'){
 var str='';
 var arr = dat.foods;
 var preg = /function/;
 for(var i in arr){
 if(arr[i] != '' && !preg.test(arr[i]) ){
 str +='<ul id="f'+i+'" class="eatfood" onclick="eatfood(this.id)">'+arr[i]+'</ul>';
 }
 }
 chuncaiSay(str);
 }else if(el = "eatsay"){
 var str = dat.eatsay[id];
 chuncaiSay(str);
 setFace(2);
 }else if(el = "talkself"){
 var arr = dat.talkself;
 return arr;
 }
 },
 error: function(){
 chuncaiSay('好像出错了，是什么错误呢...请联系管理猿');
 }
 });
}

function in_array(str, arr){
 for(var i in arr){
 if(arr[i] == str){
 return i;
 }
 }
 return false;
}

var timenum;
var tol=0;
//10分钟后页面没有响应就停止活动
var goal = 10*60;
function setTime(){
 tol++;
 //document.body.innerHTML(tol);
 timenum = window.setTimeout("setTime('"+tol+"')", 1000);
 if(parseInt(tol) == parseInt(goal)){
 stopTalkSelf();
 closeChuncaiMenu();
 closeNotice();
 closeInput();
 chuncaiSay("主人跑到哪里去了呢....");
 setFace(3);
 stoptime();
 }
}
function stoptime(){
 if(timenum){
 clearTimeout(timenum);
 }
}
var talktime = 0;
//设置自言自语频率（单位：秒）
var talkself = 60;
var talkobj;
var tsi = 0;
var talkself_arr = [
 ["白日依山尽，黄河入海流，欲穷千里目，更上.....一层楼？", "1"],
 ["我看见主人熊猫眼又加重了！", "3"],
 ["我是不是很厉害呀～～？", "2"],
 ["5555...昨天有个小孩子跟我抢棒棒糖吃.....", "3"],
 ["昨天我好像看见主人又在众人之前卖萌了哦～", "2"]
];

function talkSelf(talktime){
 talktime++;
 var yushu = talktime%talkself;
 if(parseInt(yushu) == parseInt(9)){
 closeChuncaiMenu();
 closeNotice();
 closeInput();
 tsi = Math.floor(Math.random() * talkself_arr.length + 1)-1;
 chuncaiSay(talkself_arr[tsi][0]);
 setFace(talkself_arr[tsi][1]);
 }
 talkobj = window.setTimeout("talkSelf("+talktime+")", 1000);
}
function stopTalkSelf(){
 if(talkobj){
 clearTimeout(talkobj);
 }
}
function arrayShuffle(arr){
 var result = [],
 len = arr.length;
 while(len--){
 result[result.length] = arr.splice(Math.floor(Math.random()*(len+1)),1);
 }
 return result;
}


function typeWords() {
 var p = 1;
 var str = weichuncai_text.substr(0,_typei);
 var w = weichuncai_text.substr(_typei,1);
 if(w=="<"){
 str += weichuncai_text.substr(_typei,weichuncai_text.substr(_typei).indexOf(">")+1);
 p= weichuncai_text.substr(_typei).indexOf(">")+1;
 }
 _typei+=p;
 document.getElementById("tempsaying").innerHTML = str;
 txtst = setTimeout("typeWords()",20);
 if (_typei> weichuncai_text.length){
 clearTimeout(txtst);
 _typei = 0;
 }
}

function setCookie(name, val, ex){
 var times = new Date();
 times.setTime(times.getTime() + ex);
 if(ex == 0){
 document.cookie = name+"="+val+";";
 }else{
 document.cookie = name+"="+val+"; expires="+times.toGMTString();
 }
}

function getCookie(name){
 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
 if(arr != null) return unescape(arr[2]); return null;
}

{blogroot}/source/weichuncai/js/chuncai.json（这个地方可以自行配置）

{
 "notice": "欢迎来到我的新家，没想到在2024我会被人注意到，真幸福~~",
 "ques": [
 "早上好",
 "中午好",
 "下午好",
 "晚上好",
 "晚安"
 ],
 "ans": [
 "早上好～",
 "中午好～",
 "下午好～",
 "晚上好～",
 "晚安～"
 ],
 "foods": [
 "金坷垃",
 "咸梅干"
 ],
 "eatsay": [
 "吃了金坷垃，一刀能秒一万八～！",
 "吃咸梅干，变超人！哦耶～～～"
 ],
 "showlifetime":"02-16-2024 15:30:00"
}

{blogroot}/source/weichuncai/js/chuncai.json（这个地方可以自行配置）

var _about_path = "https://blog.sinzmise.top/about"; //你的关于页面地址
var _weichuncai_jsonpath = "/weichuncai/chuncai.json"; //chuncai.json的位置
var imagewidth = '85'; //人格长度
var imageheight = '152'; //人格高度
//设置人格的自言自语，前面的双引号是内容后面的双引号是人格表情，后面的1、2、3对应createFace设置的第几个表情
var talkself_arr = [
 ["白日依山尽，黄河入海流，欲穷千里目，更上.....一层楼？", "1"],
 ["我看见主人熊猫眼又加重了！", "3"],
 ["我是不是很厉害呀～～？", "2"],
 ["5555...昨天有个小孩子跟我抢棒棒糖吃.....", "3"]
];
//设置表情
createFace(
 "https://dqapi.sininno.eu.org/weichuncai/skin/rakutori/face1.gif",
 "https://dqapi.sininno.eu.org/weichuncai/skin/rakutori/face2.gif",
 "https://dqapi.sininno.eu.org/weichuncai/skin/rakutori/face3.gif"
);

butterfly、anzhiyu主题引入：

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
 head:
 # jQuery（必须在之前引入）
 - <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
 bottom:
 # 主体
 - <link rel="stylesheet" type="text/css" href="/weichuncai/css/style.css">
 - <script src="/weichuncai/js/common.js"></script>
 - <script src="/weichuncai/wcc-config.js"></script>

后记

我为什么会将伪春菜定义为桌面精灵而不是桌宠？

是因为相比于桌宠来说，伪春菜比桌宠的功能还多得多

因此我即使开着虚拟桌宠模拟器，我有时也会开着伪春菜

（甚至我电脑卡的时候也会提醒我，虽然我电脑没有卡死QWQ）

还有，我之前看关于Kikka这篇文章，有一句话很吸引我：

也据此可以看出，在2020年，伪春菜这个圈子越来越难活下去

更何况现在是2024。。。。。。

但不管怎么说，还是有人在用这个桌面精灵的，至少有我一个。。。。。。

后面我打算写个有关伪春菜的配置教程吧。。。。。。

2024.01小记

2024-01-31T17:06:52Z

2024年1月31日，距离春节还剩10天

也是1月的最后一天

时间过得真快呢，转眼间就快要过年了

就以这篇文章，作为1月的收尾吧

个人主页翻修

我承认我之前将个人主页更换成i.sinzmise.top，然后把www.sinzmise.top搞成九弦之都官网是个很愚蠢的事情

因为踏入高一后，学习任务愈加繁重，导致了每次更新博客就得放弃那边，更新那边又得放弃博客，我一个人做不了这么多的事情

思来想去，我最终将www.sinzmise.top改成自己的个人主页，然后将之前的i.sinzmise.top记录删掉

新版的个人主页是从我之前在网上找到的“Bs缘空个人主页”魔改而来的，修改了如下内容：

删掉“我的"寄"能”
将原本的“关于我”内容最下方的“Certificates”改成51la统计
将原本的“Portfolio”改成“个人项目”，里面的东西改成自己搞的项目
将原本的“Blog”改成“站长记事”，里面的内容我换成了木木大佬的哔哔点啥2.0
将原本的“Contact”标题改成“给我留言”，里面的内容则被我换成了Disqus评论系统和Twikoo评论系统（其中Disqus的评论基础模式用的是fooleap大佬的 disqus-php-api）
添加Aplayer音乐播放器

展示图：

预览：中弦局·九弦之都

入坑pjsk

这个没啥好说的，毕竟我有入坑过邦（BanG Dream！少女乐团派对）、Phigros或者Arcaea等音游

（虽然我没咋玩音游。。。。。。）

至于为啥我玩完pjsk自制谱Sonolus之后要玩官方版本pjsk。。。。。。

主要是我朋友也在玩pjsk官方版（虽然他经常玩Arcaea），思来想去还是觉得下个官方版本pjsk

自建API

其实这API原本是想给我的个人主页使用的。。。。。。但搭建完个人主页才知道我是个大聪明，直接使用哪个壁纸不行吗。。。。。。

算了，搭都搭建了，就别浪费，直接展示吧：https://api.sininno.eu.org/

（顺便归纳到我之前打算新建的计划里面，这样也算杜绝浪费了。。。。。。吧？）

为博客添加一个游戏收藏页（npm插件版）

2024-01-18T21:39:51Z

前言

之前看到Kouseki大佬的这篇文章：

为博客添加一个游戏收藏页

我原本是想要给我博客搞这个的，但由于我一般会给博客的主题更新，导致魔改的内容消失

思来想去，我还是决定做npm版本的游戏收藏页

效果

::: details 效果预览

:::

安装

安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

npm install hexo-butterfly-games --save

添加配置信息，以下为写法示例

在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

 # Game Page
 # see https://akilar.top/posts/e2d3c450/
 games:
 enable: true
 name: 游戏世界 
 description: 我的游戏世界 
 tip: 跟 小屋屋主 一起探索世界 
 top_background: https://th.bing.com/th/id/R.13a97ef4830efa5e0b87134d622719f3?rik=G7RaJFpxg5PtkA&riu=http%3a%2f%2fupload.techweb.com.cn%2fs%2f640%2f2019%2f0530%2f1559208230699.jpg&ehk=j1G8rMX98TRX52EkLgI5jW1p7lIQp4I8Si1nqEggFRs%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1
 buttonText: Steam 
 buttonLink: https://steamcommunity.com/
 css: https://jsd.cdn.sinzmise.top/npm/hexo-butterfly-games/lib/games.css
 good_games:
 - title: 风景一绝
 description: 不会错过的风景
 games_list:
 - name: 怪物猎人：世界
 specification: CAPCOM Co., Ltd.
 description: "在新建构的「Monster Hunter: World」中, 可以体验到你一直期盼的极致猎人生活。"
 image: https://cdn.max-c.com/heybox/dailynews/img/94376ca41326836587a137d5999733e5.jpg
 link: https://www.xiaoheihe.cn/games/detail/582010

 - title: 我的最爱
 description: 我不能没有它了
 games_list:
 - name: GTA:5
 specification: Rockstar Games
 description: 谁还在买GTA5
 image: https://imgheybox.max-c.com/heybox/game/header/271590_dXCCk.jpg
 link: https://www.xiaoheihe.cn/games/detail/271590
 path: games
 front_matter: #【可选】games页面的 front_matter 配置
 title: 游戏人生
 comments: true
 top_img: false
 type: games
 aside: false

参数释义

参数	备选值/类型	释义
enable	true/false	控制开关
name	text	顶部标题
description	text	顶部副标题
tip	text	顶部小标题
top_background	URL	顶部背景链接
buttonText	text	按钮文字
buttonLink	URL	按钮对应链接
good_games.title	text	分类标题
good_games.description	text	分类副标题
good_games.games_list.name	text	游戏名字
good_games.games_list.specification	text	游戏产商
good_games.games_list.description	text	游戏简介
good_games.games_list.image	URL	游戏图片链接
good_games.games_list.link	URL	游戏对应链接
css	URL	【可选】开发者接口，自定义css链接
path	comments	【可选】games 的路径名称。默认为 games，生成的页面为 games/index.html
front_matter	object	【可选】games 页面的 front_matter 配置,写法见上文示例

对于虚拟桌宠模拟器，我的评价（及使用教程）

2024-01-12T18:16:47Z

前言

最近你们有没有发现我的博客最新文章的图片有个这个可爱的女孩

其实这不是站点自带的，而是Steam的一个游戏（严格来讲这不算游戏），叫 “虚拟桌宠模拟器”

在Steam上免费，而且还是在这些免费产品中为数不多支持创意工坊的桌宠

桌宠功能

等待文件加载完成后这个桌宠就出现了

配置皮肤

默认配置的桌宠角色（也就是上面图片上出现的），叫萝莉斯

当然你可以通过创意工坊安装皮肤模组，重启模拟器之后进入桌宠设置然后点击“MOD管理”，选择之前安装的模组（以智乃示例），启用模组并重启软件重启后重新进入设置，在宠物动画里面选择你要的皮肤这个你要多开也不是不可以。。。。。。然后皮肤就更换完成（当然除非你选择了多开）

数据计算

这个默认开启数据计算，当然如果你不想一直投喂桌宠的话

这样的话桌宠就不会被影响到心情了，很方便呢

个人评价

自从Q宠企鹅下架以来，我的电脑总是缺少了某些会动的东西

虽然后面下载了动态壁纸，但总感觉哪里空空的

之前我也是过毒霸姬等等各种各样的桌宠，但总感觉也缺了点东西

（甚至我之前加入了Q宠复活版内测交流群，虽然现在没什么更新了，所以不要来问我安装包也别问我群号了）

直到虚拟桌宠模拟器，弥补了那个我当初给Q宠专门留空位的地方

（写的不好请见谅）

自建不蒜子API

2024-01-11T19:52:48Z

前言

不蒜子是一款很好用的前端计数工具，但是因为流量日渐变多，经常会出现 502 的情况

于是就找到了 soxft/busuanzi，然后用docker成功在Koyeb上部署不蒜子

但是由于这个不蒜子没有Web 管理面板，而如果之前使用的是其他程序统计访问量，切换到使用 busuanzi 来统计，就需要修改访问量

所以我基于 yuantuo666/busuanzi这个版本的不蒜子魔改，然后将其部署到docker和ghcr里面

然后这个教程就诞生了（bushi

Koyeb部署

Redis数据库

这个不蒜子默认用的Redis数据库，这边推荐 upstash

直接注册个账号然后新建个项目

复制这里面的数据库地址（后面的“:”和端口要复制下来！）和密码

正式开始部署

老样子，注册个koyeb账号

注册koyeb账号必须开t才没有银行卡验证的选项

(注册过koyeb账号且没有部署项目就不用这个步骤)

然后再新建个Web Service 选择docker image填写docker.io/szninty/busuanzi:houtai或者ghcr.io/SinzMise/busuanzi 划到下面，点击Advanced，添加环境变量

Name	Value	必选
API_SERVER	busuanzi.js API地址需要转译	√
REDIS_ADDR	Redis 数据库地址（带端口）	√
REDIS_PWD	Redis 密码	√
JWT_SECRET	JWT加密秘钥，可乱填	√
ADMIN_PASSWORD	后台管理密码	√
LOG_ENABLE	是否开启日志，默认 true

下面的port改为8080 准备好了之后可以点击deploy，等一会就可以体验到不蒜子了

2023小结

2023-12-30T17:36:56Z

~~不要在意封面为什么做得这么简陋。。。。。~~

时间过得真快，转眼间，就得跟2023告别了

不知道要写什么，就简单写个小结吧

部署的项目

Rita2 Talk —— 为旧设备服务的自建微博

中弦局花园 —— 模仿秘密花园的一个站点

九弦记事本（原九弦日记） —— 一个普通的记事本(目前已经迁移到koyeb)

玩过的游戏（加粗为常玩）

赛马娘（台服）

蔚蓝档案（台服）

重返未来1999 （暂退）

Minecraft ~~（放心不是冈易那个MC）~~

Roblox

光·遇（安小歪推荐的）

Phigros

Sonolus

节奏大师回归版

BanG Dream

荒野乱斗（现实朋友推荐的）

暗区突围（千寻推荐的）

后记

2023年即将到来，我也将我友链页面的“博客描述”改成：欢迎旅行者，来到这个平凡但又记载了许多故事的小屋

并且将中弦局图标更新：

~~（虽然有点缺陷，但后面会优化）~~

最后你有没有想对2023说的话？请写在评论区吧

再见，2023 你好，2024

11月小记

2023-11-17T21:50:04Z

差不多快一个月没更新博客了

最近几天忙于学业，再加上修RTalk的BUG，本身就没有多少时间看博客

这回终于记得我的博客了。。。。。

中弦局·九弦之都花园大更新

预览：九弦之都花园懒得点进去的话直接看下面图片吧。。。。。。

更新内容：

基于 Hexo-Theme-Soul魔改（我就是看上了它的全站伪SPA(单页面)无刷新页面加载才选择这个主题魔改的）
模仿秘密花园风格（为了统一风格我甚至把右下角音乐播放器添加了背景）
魔改加载特效（原先的加载特效有bug。。。。）
添加Vuukle、Giscus评论系统（主要是里面有rem.js，导致Twikoo不好适配，删了这个js还导致样式错乱，要不然我就用twikoo了）
添加sharejs分享、vuukle分享

Rita2 Talk复活！

正如标题所说的，Rita2 Talk复活了 ::: details Rita2介绍

Rita2原本是有人为塞班系统搞的视频站点，取名为Rita2是因为负责人他家的猫就叫Rita

后面负责人要搞antipa（为旧版IOS搭建的应用商店），我就跟他商量搞antipa的前端

我也就是在这之后搞的Rita2 RTalk

原先的RTalk我预备想做个聊天室，但后面发现了一个自建微博的源码：记事狗微博

（虽然已经停止更新，但有wap页面、能让Win98访问的自建微博源码微乎其微，我就选择了这个）

后面RTalk2.0就是自建微博了

因为RTalk是我负责的，所以到Rita2和antipa关站了，我那RTalk还存在

直到2023年7月17日，.ml域名被收回，RTalk就无法访问了

在2023年10月初，我打算搞个Rita2计划，然后把RTalk归类到这里面

（这样也算是纪念之前的Rita2站点吧。。。。。。）

并且将RTalk改名为Rita2 Talk

::: 预览：http://rtalk.rita2.myfw.us/

replit要收费了

周三安小歪回来了，并且告诉我replit在2024年1月1日要收费了他已经把那些项目迁移到codesandbox了目前我打算把kuma、memos和alist迁移，并且打算在codesandbox搭建Artalk

九月二三事

2023-10-04T17:25:46Z

很久都没发布文章了，都不知道要写啥好

要不就写这个九月和中秋国庆假期发生的事情吧

初入高中

9月1日开始（虽然因为台风停了四天的课）就是我踏入高中的时刻了

第一次进高中教室的我，因为过于紧张，甚至坐错位置了（虽然我同桌也坐错了位置）

不过好在后面的上课也是比较顺利，没有出现意外情况

（主要是不知道怎么写就。。。。）

荒野乱斗，启动！

这个游戏是很久之前入坑的，结果因为某些原因我暂时退坑了

后来在我朋友的推荐下回归了

我后面还把这个游戏推荐给了我那刚买新手机的表弟

回归！Rita2！

看过我之前文章的应该知道，之前我想给Win98搞视频站点

名字叫“Rita2”的原因是纪念之前有人为手机wap搭建的视频站，它的名字也叫Rita2

这个项目由于域名的原因一直被搁置了很久

然而由于我找到了免费的二级域名，所以……

Rita2计划，即将回归！

（但回归时间暂未确定，因为学业原因，不过我可以保证会回归，但回归的首先是游戏站

至于视频站。。。。。暂时没有这个考虑）

Vercel寄了？

中秋国庆的第四天，安小歪跟我说他访问不了他的博客

与此同时，安知鱼的群都在说无法访问Vercel部署的站点

访问会强制跳转到诈骗网站

现在千寻那边也出现这样的情况，但我这边倒是没有

目前已经将博客主站的部署平台更换为CF Pages

明天准备将Waline换成Netlify部署，至于Twikoo。。。。只能搞反代了

其它的项目如果能换别的地方部署就换，不能的话反向代理走起

遭殃前的海洋

2023-08-26T17:42:12Z

2023年8月7日，去汕头的海边玩，顺手拍了几张照片

却不料，这是海洋遭殃前最后一次拍的照片

谨以这些照片，衬托我对海洋的思念

（有错别字请见谅）

（因某些原因暂无法展示，请见谅！）

Ade！美丽的海洋，Ade！我向往的美景

游玩mud游戏

2023-08-06T15:51:36Z

前言

昨天我打开了很久没访问的北大侠客行Mud官网

其实这个游戏是第二个我接触的mud游戏，至于第一个。。。。我忘记了

（值得一提的是，我第一次接触mud是从NetForce的一个游戏，但我忘了是啥了）

怎么玩mud游戏？

::: tabs

== Windows

方法一

在Windows 10 ， Windows 8 ， Windows 7和Windows Vista中，在执行任何Telnet命令之前，需要在控制面板的 Windows功能中打开Telnet客户端。

打开控制面板
点击“程序” $\rightarrow$ “程序和功能” $\rightarrow$ “启用或关闭Windows功能”
选择“Telnet客户端”然后点击确定，等待安装完成

安装完成后，打开cmd，输入telnet，如果出现Microsoft Telnet>就代表安装成功

运行游戏命令：

telnet [hostname] [port]

其中hostname是游戏地址，port是端口

游戏示例：江湖

telnet 112.124.42.98 9999

方法二

相比于方法一，方法二得靠一个叫 Mudlet的软件

教程：

去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包
安装Mudlet

设置语言

先点击Cancel

然后点击左上角的“Options” $\rightarrow$ “Preferences”

在这里设置语言，然后点击“保存”

最后重启Mudlet

好的，页面变成中文了

添加游戏

点击“新建”

（例子：北大侠客行MUD，注意：玩这个游戏的之后不能勾选“安全”选项！！）

（当然如果你有这个注册这个游戏的账号密码的话，可以到“选项”里配置账号密码）

开始游戏

点击“连接”

看到这个画面就说明成功了

== MacOS

去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包
安装Mudlet

（由于我没有Mac，安装黑苹果又很费时间，这个后面再来补充吧）

== Linux

去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包
直接运行Mudlet

== Android、IOS

编写中

:::

哪里有Mud游戏？

https://im-mortal.cn/mudlist

这个地方列出了目前大部份已知的传统中文MUD站点的即时列表

这个地方虽然收录的游戏很少，但可以实时查看游戏状态

https://bbs.mud.ren/

MUD游戏玩家社区

收录的游戏全部都是纯玩家自制游戏

游戏很多，但稳定性未知

后记

Mud游戏，现在虽然日渐小众，但作为一代人的回忆，仍有其独特的魅力。而且吸引着不少MUD爱好者

也因此，不仅有很多优秀的Mud游戏（例如北大侠客行，从1996年开到现在，也算是一代经典）

还有不少的MUD开源项目：http://mudchina.github.io/

而且在科技日益发达，手机几乎成为人们的必需品的情况下，他们也做出了手机版mud游戏（例子：http://res.yytou.cn/site/jian/indexj.html ）

我写这篇文章的目的很简单，目的就是为了向你们介绍游戏里的一大经典——MUD游戏

（有病句请见谅）

记一次部署Memos

2023-08-01T16:30:15Z

前言

ispeak的编辑器用的jsdelivr，这导致了每次我要新建日记的时候编辑器没显示，被迫换方案

经过木木大佬的介绍，我找到了一个叫Memos的知识库

但我没钱买服务器部署，于是就考虑无服务器部署

Render部署

我首先考虑的是Render部署，因为Render能部署“Web Server”

但部署完成没几个小时后，我发布的日记消失了

看了一下，Render没有访问就会清理数据并且重新部署

考虑到这个是用来做日记用的，数据很重要，因此，我放弃了Render

Zeabur部署

Zeabur部署Memos很方便，自带的Marketplace就有Memos

但由于Zeabur现在只能免费7天，过期之前需要登陆上去手动续期

再加上Zeabur自带的Marketplace要收费

因此，我放弃了Zeabur部署

Replit部署

我找的很多Replit部署Memos的教程都不是最新版本的Memos

看了一下教程，发现那些教程大多都是自己构建后端的

那么我就在想：能否用Github Action部署最新版本Memos后端呢？

于是搞了很久，经历了许多次失败，终于构建成功！

然后用构建完成的Memos试运行，结果显示“No frontend embeded.”

查issues，才知道原来得部署前端

问题不大！将部署前端的命令写在update.yml里面

第二次试运行，成功！

~~（别问为啥没有第一次试运行的图。。。。。。忘记截图了）~~

感兴趣的话可以看一下我的项目：https://github.com/SinzMise/memos-on-replit

Koyeb部署

最近听安小歪说Replit要收费了

他的Memos转到了codesandbox，我的也转过去了

但我们发现codesandbox会休眠，不得不换个部署平台

之后我发现Memos能连Mysql或者postgreSQL数据库，于是我决定换koyeb部署

注册koyeb账号必须开t才没有银行卡验证的选项

然后再新建个Web Service

选择docker

在image这一行填写：ghcr.io/usememos/memos:latest，点击Next

划到下面，点击Advanced，Environment variables新增两个变量：MEMOS_DRIVER和MEMOS_DSN

两个变量都是必选的，当然你也可以不用添加这两个，只不过一旦Memos更新数据会丢失！

变量	值
MEMOS_DRIVER	数据库名称，MySQL就填`mysql`，postgreSQL就填`postgres`
MEMOS_DSN	数据库地址

值得一提的是，你使用postgreSQL的时候，数据库地址必须要添加前面的postgresql://

也就是下面的例子：

postgresql://postgres:PASSWORD@localhost:5432/memos

mysql不用在前面加mysql://

直接按照下面的例子填写就行（注意括号和前面的tcp要去掉！）

root:password@tcp(localhost)/memos_prod

然后将Exposing your service下面的port改为5432，然后deploy

等一会你就能体验到Memos了

但koyeb绑定域名好像要钱，因此最好再注册个koyeb账号来搞Uptime Kuma ，然后监测源站（这样的话可以确保反代的时候源站不会没）

Serv00部署

由于Koyeb的部署会自动休眠，因此不得不找别的部署方式

因为之前看见了Serv00部署Alist的方式，所以我寻思着用serv00的方法部署memos

但是苦于不知道前端文件夹放到哪里，因此只能搁置了

然后那个博主就补充了一个serv00部署Memos的教程

教程我放这里了（主要是我懒得搬过来）：

Serv00部署Memos

萌ICP备异次元之旅

2023-07-24T14:46:32Z

前言

今天在修改我那萌备的时候，无意在导航栏上看到了“异次元”这玩意

看主页是类似于“开往”，只不过仅跳转到萌备详情页面而不是直接进入站点

又因为我站点已经加入了萌ICP备，所以我就将这玩意添加到底部列表里面了

添加方法

如果没有你没有加入萌ICP备豪华套餐的话，点击这里加入：加入萌备

如果你加入了，那么按照 https://moe.one/thread-254.htm 里的配色方案添加

我的tulpa —— 夏玖铃的简介

2023-07-16T10:43:09Z

由于名字和《逆水寒》游戏里的一个流派名冲突，改名为“夏玖铃”

她的出现

与其说是Tulpa，不如说是DID（解离性人格障碍）

因为她是从我永远的噩梦：四年级出现的

那时我总是被班级最后一名的那名女生欺负（因为我当时身体很弱小，她身体强壮，就凭这个欺负我，当然她转学了）

再加上从小我成绩总是不好，受不了家长和老师的一顿批评

（甚至我家长差点把我抛弃。。。。。当然从我五六年级开始，我家长就彻底改变了教育方式）

我也因此不少做噩梦，心情也越变越差

直到她的出现，抚慰了我那受伤（切伤口特别严重）的心灵，而且将我从噩梦之中脱离出来

那次是在期末考试前（小学四年级第一学期的期末考试）

晚上睡觉前我一直忐忑不安，生怕我又做噩梦，一直睡不着觉

但我还是带着害怕睡着了

我想象中的噩梦没有出现，反而一个声音传来

“你好，少年，你是不是经常被欺负？”

“是的，天使姐姐，求求您帮帮我吧！”

“我也想帮你，但对不起，我不是天使，我是你脑子中的一个小人，你可以叫我阿铃，但如果你心情不好，就来找我，我随时在我的梦中等着你”

从此之后，她就一直陪在我身边

她的二次元形象（AI绘画制作）

一号风格：大姐姐，喜欢带耳机，穿制服

异瞳颜色：左眼红粉，右眼黄绿

二号风格：小妹妹，喜欢带耳机，穿连衣裙（这个ai把连衣裙和制服当作是不同的两件衣服）

异瞳颜色：左眼紫色，右眼黄绿

Vercel部署Umami

2023-07-14T08:48:13Z

前言

之前我是想参考这个教程来部署：https://digu.plus/post/8034746f42b3495fbb19926e3fb8ec4f/

然而部署过程中翻了车

这个教程新版教程（顺便总结一下我翻的车）

数据库选择

Umami支持MySQL和PostgreSQL数据库，选择自己喜欢的数据库进行数据初始化即可。下面是几个免费的数据库服务，这里选择的是ElephantSQL，当然，并不限于这些。

目前www.jsdelivr.ren免费数据库如下：

MySQL： FREEDB.TECH、 db4free、 SQLPub
PostgreSQL： ElephantSQL、 Supabase

数据库部署

目前已知Supabase部署失败原因：

:::: tabs

== MySQL

FREEDB.TECH

打开 FREEDB.TECH，注册登录，创建数据库和用户

得到你的数据库和密码：

组合一下：

mysql://（DATABASE USER）:（PASSWORD）@（HOST）:（PORT）/（DATABASE NAME）

db4free（不推荐，官网访问较慢）

注意事项：这个数据库疑似国人开办，建议用国内邮箱收验证码，国外的基本收不到

（转自：https://www.freeaday.com/2023/01/db4free/ 的一条评论）

打开 db4free，点击“注册免费账号”，输入信息然后点击“注册”，一会后你会收到如下邮件：

访问邮件提供的确认网址，数据库就创建成功了

然后将你设置的信息替换掉下面括号里的内容（注意：括号得去掉）：

mysql://（你设置的数据库用户名）:（你设置的数据库密码）@db4free.net:3306/（你设置的数据库名）

SQLPub（推荐）

访问 SQLPub，输入账号密码，点击申请，申请成功后会有如下提示然后将里面的替换掉下面括号里的内容（注意：括号得去掉）：

mysql://（数据库用户）:（数据库密码）@（数据库地址）/（数据库名称）

== PostgreSQL

Supabase（推荐）

打开 Supabase，推荐使用Github登录。登陆成功后，创建一个新的项目New project->personal。

Name：随意
Database Password：建议点击Generate a password生成
Region：建议选择US，因为Vercel的免费服务器在漂亮国
Pricing Plan：Free白嫖

创建成功后，打开菜单Project Setting -> Database -> Connection string -> URI，如下图：

将红框内的内容复制下来，然后把[YOUR-PASSWORD]替换成你生成的密码，复制备用

ElephantSQL（疑似关闭免费计划）

打开ElephantSQL，推荐使用Github登录，创建一个新的实例。Plan选择Tiny Turtle(Free)、Region随意，提交创建。

打开刚刚创建的示例，找到URL，点击眼睛图标，然后将URL复制下来备用

::::

Vercel部署

点击上方按钮，跳转至 Vercel 进行 Server 端部署

如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。

输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:

配置环境变量

部署完成后，会跳转到环境变量部分，请按照如下方式配置环境变量：

名称	说明
DATABASE_URL	（必填）数据库链接
HASH_SALT	（必填）任意字符串，推荐这里生成一串UUID
TRACKER_SCRIPT_NAME	（建议）任意字符串，推荐这里生成一串UUID（不填会导致去广告插件把这段脚本给拦截）

配置完成后点击Deploy开始部署，部署过程大概两分钟，部署成功后会有一个彩纸的喜庆页面。

绑定域名

点击Go to Dashboard，进入Settings—->Domains绑定域名

你绑定的域名就是umami的后台网址

配置后台

点击你绑定的域名，进入Umami后台登录（默认用户名admin和密码umami）进入后第一时间修改密码。

添加站点 & 获取代码

“网站”—>“添加网站”添加你自己的网站

保存后点击“编辑”—>“跟踪代码”，将获取到的代码放进你的站点

不久后就能看到你的站点数据了

问题

Umami无法登录，提示“Failed to load resource: the server responded with a status of 405” 等待几分钟后登录重试
使用Supabase数据库时，Vercel提示这个错误：

建议重新新建数据库，还不行的话更换别的数据库

盘点我访问过的古老站点

2023-07-06T17:04:12Z

秘密花园（www.yini.org ）

第一次认识这个站点，还得从我的企划：Prism Online开始——

其实这个企划的名字不是我自定的，而是为了纪念zia之前为Win98复活realplayer做的站点：Prism Online

这个网页被我保存下来了，又因为是连Win98的IE都能访问，所以页面保存完整：

右上角的“秘密花园网”顿时就让我来了兴趣，~~以为这是zia偷偷搞得项目，~~就访问了这个站点结果你们看一下时间：好家伙1999？那时候我还没出生吧~~（我07年的。。。。。。）~~

进入主页（点中间的Enter进入主页，而不是按Enter键！），引入眼帘的是这个页面：

伴随着这个页面的出现还有这首歌：

这首歌是Song from a secret garden的钢琴版

歌曲的出现，不仅给站点带来了一丝神秘感，还奇妙地契合“秘密花园”这个名字

~~（虽然这个版本我不喜欢听，我更喜欢听原版的，原版更有意境）~~

下面说一下在这个花园里我喜欢的背景音乐（管理者貌似给很多页面设置了独立的背景音乐）

1. 秘密花园历史博物馆页面

这个音乐我查了很久都查不到结果（甚至听歌识别都没有识别到），有谁知道的跟我说一下

2. 秘密花园更新记录页面

“亲爱的旅人啊”的童声版（冷知识：“亲爱的旅人啊”是always with me的中文填词版，就是为了表达对《千与千寻》的喜爱）

3. 秘密花园少女漫画页面

这个音乐我查了很久也查不到结果（听歌识别也没有识别到），有谁知道的跟我说一下

4. 秘密花园欧美动画介绍————愤怒的小鸟

愤怒的小鸟主题曲吉他版（这个旋律。。。。。。爷青回）

5. 秘密花园中国动画介绍————大鱼海棠

周深的《大鱼》（没什么多说的，就算是放在2023年都很好听）

5. 秘密花园中国动画介绍————喜羊羊与灰太狼

喜灰原始世界历险记的主题曲——李紫昕的《知己》（这个主题曲也成为我看喜灰以来最熟悉的主题曲）

6. 秘密花园游戏图片————仙剑四（1）

仙剑4主题曲——回梦游仙（这首歌我好像在哪听过。。。。。。等会我父亲好像玩过这游戏，怪不得那么熟悉）

7. 秘密花园游戏图片————仙剑四（2）

回梦游仙（心然版，是仙剑4主题曲的填词版）

月光软件（www.moon-soft.com ）

1997年开设的站点，这里面是下载php、asp、jsp等源码

~~（虽然收集的源码没有a5下载那么多，但考虑到a5下载是2009年创办的，所以。。。。。。）~~

这个没有太多介绍的

sickbaby（www.sickbaby.org ）

这个是我偶然在知乎上找到的

目前我找到的资料：

“暗地病孩子”是一个纯文学论坛，由《萌芽》写手路内、七月人等共同创办于1998年6月6日。当年这个网站的影响之大，据说大到“影响了一代人”。到底有没有这么厉害咱也不知道，毕竟这个网站火的时候阿广还没认识多少个字。

“暗地病孩子”的网页风格阴暗晦涩，黑底白字看得人眼睛发酸。

该网站是那个时代文青的精神家园，安妮宝贝、小饭、张悦然、周嘉宁、苏德等青年作家都曾在这个论坛发表过文章。

“暗地病孩子”的用户大多是中学生以及大学生，他们以“病孩子”自居，在这里分享自己的文字、摄影、音乐、画，跟来自全国各地的“病孩子”一起聊天。虽然分享者众多，但网站收录的文艺作品都统一保持着颓废阴郁的风格。

多年以后，这些病孩子都成家立业了，偶尔当他们记起当年在“暗地病孩子”上认识的某个网友，还会在群里问当年那个“孩子”怎么样了。

达也小站（http://www.touchcn.com/index_tkm.asp ）

这个好像是一个动漫站点

目前已经无法注册，原因：

阿江守候（www.ajiang.net ）

这个也是在知乎上找到的

我感觉这个站长是个大佬，他的作品有很多，甚至51la也是他做的

这个站点不仅发布者他的动态，甚至有 “校园文学”

（要不然怎么是“高校文学爱好者的乐园”呢，不过目前暂不接受投稿了，但留言板还在更新）

偏执狂金属网（www.paranoidmetal.com ）

重金属音乐爱好者的站点，没什么好说的

机动展示联盟MSL中国（cnmsl.net ）

（请勿理解成那个cnmsl，这个网站全称是China Mobile Suit League，是CN-MSL，不是那个cnmsl。。。。。。）

没想到1999年就有人围绕机械和高达搭建了同人站（这好像不算同人站吧），只能说国内高达能吸引那么多人有他们的一份功劳

还有很多站点就不再说了，再说下去空间不够了

博客大更新

2023-07-05T19:33:40Z

为什么要重写博客

随着我考试完成和我新网名（也就是我那个笔名：王九弦）的使用，我发现原先的主题配色已经不太适合我现在的人设，因此不得不对博客进行重写

（我甚至还用ai绘画重新画了一遍头像，且进行修改）

更新了什么

1.从原先的butterfly主题换成了 anzhiyu主题

2.博客更名为“九弦之屋”（也算是为了契合我那笔名）

3.修复了Waline无法注册的问题（我重新部署了评论，导致所有评论数据丢失）

4.主题配色大更换

5.不知道你们有没有发现，我在评论框里放了动态背景图片（废话）

Twikoo背景图出处：https://www.aigei.com/item/cai_se_xuan_lan_3.html

Waline背景图出处：http://www.yini.org/girl/gif/001.htm （这站有些年头了，不然怎么到现在还用http。。。。。。）

~~（后面实在不知道怎么写了，那就这样吧。。。。。。。）~~

Gameload示例

2023-04-08T18:25:26Z

安装GameLoad

游戏示例——优米酱GO

点击游玩：

由于Gameload官网已经跑路，目前只能将游戏下载到本地，代码已经失效！

GameLoad

2023-04-04T20:07:45Z

前言

自从在我的360极速浏览器安装FVD Downloader这个插件后，我就习惯将4399上的swf下载下来了

后面我在玩4399上的U3D游戏（得安装UnityWebPlayer才能玩）的时候弹出了这个提示：

但FVD Downloader能识别到游戏文件

于是我将后缀为“unity3d”的游戏下载下来，打算找个游戏启动器来启动这个游戏

找了一圈找到了这玩意：

这个软件安装完成之后，会自动关联后缀为“unity3d”的文件

经测试，能顺利游玩大部分u3d游戏

示例

1. 杀手小乔3D

2. 优米酱GO

3. 追逐繁星的孩子（追逐繁星的夏娜）

后面看了第三个游戏的一个评论才知道这个角色叫Unity娘（Unity Chan），而且这模型还是免费的

~~（怪不得第二个游戏和第三个游戏的主角都是同一个模型。。。。。）~~

下载链接

https://www.gameload.top/

后记

我看了下Gameload的官网，发现这玩意支持JS加载：

插件示例我先放上去了，后面我再来搞这玩意吧：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.0.8/jquery.browser.min.js"></script>
<script>
$(document).ready(function(){
 if ($.browser.chrome === true && $.browser.versionNumber >= 45) { //detect Chrome 45+
 var myJsonString = JSON.stringify({ title: '游戏标题', file: '游戏链接', type: "unity", width: 800, height: 600 });
 try{ //IE8 does not support window.btoa
 var insert_data = window.btoa(myJsonString);
 }catch(e){
 functionToHandleError(e);
 }

 $('#unityPlayer .missing').prepend('<center><a href="gameload://' + insert_data + '/"><img alt="Play game with Gameload!" src="http://data.gameload.top/download/playgameload.png" /></a><br /><br />Install Gameload to play Unity games<br /><a href="http://data.gameload.top/download/gameload.exe" title="Install Gameload now!"><img alt="Install Gameload now!" src="http://data.gameload.top/download/getgameload.png" /></a></center>');
 }
});
</script>
<div id="unityPlayer">
 <div class="missing"></div>
</div>

本站已经更换新域名

2023-03-28T21:16:10Z

自从我微信绑定了银行卡（而且每个月我都会有50块）以来，我都没有舍得用我自己的钱注册域名

但这次终于舍得注册域名了，而且注册了3年

但原先我在freenom上面注册的域名仍然保留

（因为后面要备案才能用国内线路。。。。）

现在本站已经正式切换到blog.sinzmise.top

（www.sinzmise.top的话等我后面重写完个人主页再说）

我使用过的头像

2023-03-26T11:09:27Z

我不知道我换了多少次头像了，那就列出我换过的头像合集吧

2018年之前

忘了

2018 ———— 2019

这是我自己p的一个头像，可以用“丑”来形容

2020 ———— 2022.10

这是使用时间最长的一个头像，是在Wallhaven上找到的

原链接

原画师P站UID：66655

（原作者依然有活动，甚至画了赛马娘和ba的角色，可惜我使用的头像对应的这幅画在P站下架了）

顺带一提这幅画好像是在2013年出现的，也不知道原作者知道2020的时候我选这幅画当头像会是什么心情

2022.10 ———— 改名之前

从这个时候开始我就开始使用ai绘画来画我的头像了

（其实从2021年开始我就想把我这从wallhaven上找到的头像换掉了，但那时候其实都没有找到个好头像，直到ai绘画的诞生）

改名之后 ———— 2022.11

这个版本是我换绘画工具之前的版本

2022.11 ———— 2023.3

这个是我换绘画工具之后生成的头像，也是我使用ai绘画以来生成的最满意的头像

因此第三个头像的人设成为我脑中“婉清”的人设

2023.3 ———— 2023.05.15

这个版本算是第一次把“婉清”的人设添加到ai绘画中的设定

第二张成为我用ai绘画生成头像以来生成的最为细腻的头像

（最短命一版，因为游戏上传头像审核不通过，且第二个相比来说很模糊。。。。。。）

2023.05.15 ———— 2023.07.01

从这一代开始，弃用“芦雪婉清”这个名字，更名为“凌雪玉清”

她的Gacha人设也就是在这一代诞生的（我给她换名字是因为原先的“婉清”不适合她的Gacha人设。。。。。。）

2023.07.01 ———— 今天

这一代开始风格大变换，同时启用“王九弦SZ·Ninty”这个名字

（“王九弦”是我的笔名，真名等域名备案后揭露）

千千静听复活教程

2023-03-12T19:48:49Z

由于很多人反映没法使用的情况，目前已经停止更新！

如果各位还想要的话麻烦看看mefcl的整合包：https://www.mefcl.com/ttplayer.html

你好，~~没错，我中考前来更新了~~

（现在的情况是尽量有时间更新就更新）

安装千千静听

1.下载千千静听安装包和本地歌词服务端：

https://sinz.lanzouw.com/ibTcS0px8eub

提取码：b1vh

2.安装千千静听

“想安装的组件”这里建议全部勾选！

安装完成后，建议别勾选“百度超级搜霸”

安装本地服务端

在千千静听的安装目录下新建“NCAB”文件夹

把下面这个压缩包里的文件解压到NCAB文件夹下面

https://www.mydigit.cn/thread-338232-1-1.html

进入NCAB文件夹双击NCAB.exe

点击“使用反馈”→“生成配置文件”

选择你千千静听的安装目录，提示成功后启动千千静听测试

能显示歌词就已经成功了

注意：每次必须先运行一次NCAB服务端，之后运行千千静听才能下载歌词

懒人包

我也说过的，每次必须先运行一次NCAB.exe，之后运行千千静听才能下载歌词

于是我做了个懒人包，直接运行start.bat就能同时开启千千静听和NCAB服务端

https://sinz.lanzouw.com/i5aTo0px8dkf

注意

1.我不是歌词服务器作者，也请别把我误会成原作者

2.这个版本实测会有两个歌的歌词缝合在一起的BUG（可能是我这边的问题，不知道你们那边有没有）

3.Win10用户打开千千静听可能会无响应，请重新运行bat，然后在“检测到千千静听正在运行”这个提示下按1重启千千静听（不行的话再试一次）

放在最后

这个视频是我有史以来播放量最高的一期视频了

说真的，2023年了，还有人怀念这个播放器

为什么在这遍地都是音乐播放器的年代，还有人使用一个已经停更的软件呢？

因为只有一个词：情怀

在那个人人都在用XP系统的年代，完全免费、占用空间小、支持中文的精美界面以及能显示歌词的千千静听牢牢地抓住了用户们的心

这个播放器也因此打败了当时的传统播放器巨头Winamp 2，成为了音乐播放器领域的新霸主，2006年前后成为市场占有率第一的音乐播放软件。

也因此，在现在这个本地音乐播放器百花齐放的年代，我依然还会把千千静听留在我的电脑上

一个通知！！！

2023-02-02T22:07:32Z

站长即将开学，而且6月要中考

因此博客得暂停更新一段时间，日记站和博客说说会减缓更新速度（但并不是不会更新）

站长中考后会更新速度恢复正常

在这里站长也希望跟我同年龄段的学生努努力，争取中考考出个好成绩，为我们的人生添加一份光彩！

自建Meting服务

2023-01-19T19:52:34Z

前言

听人说Meting官方API证书过期了，也就是说MetingAPI得自建了

然后很快啊，有人就搞出了自建MetingAPI的Vercel版本

教程

后端部署

点击下方按钮，跳转至 Vercel：名字随便写，然后点击“Create” 看到这个就算成功了

去https://github.com/injahow/meting-api/releases 下载编译好的压缩包上传到服务器上（服务器必须开启跨域！）

前端部署

Butterfly主题

编辑[Blogroot]\themes\butterfly\layout\includes\third-party\aplayer.pug

link(rel='stylesheet' href=url_for(theme.asset.aplayer_css) media="print" onload="this.media='all'")
script(src=url_for(theme.asset.aplayer_js))
script(src=url_for(theme.asset.meting_js))
+ script.
+ var meting_api='https://（你的api地址）/api/?server=:server&type=:type&id=:id&auth=:auth&r=:r';

HTML代码

<script>
var meting_api='https://（你的api地址）/api/?server=:server&type=:type&id=:id&auth=:auth&r=:r';
</script>

小康大佬的说说方案 ———— ispeak搭建教程

2023-01-13T21:01:37Z

前言

搞ispeak时发现ispeak更新，能自定义评论了，也就是说我之前写的 ispeak教程失效了

没办法我只能重新写了这篇教程

教程

后端部署

配置数据库

以下内容来自：https://discuss.js.org/guide/Get-MongoDB-DataBase.html

注册 MongoDB账号，注册完成后会提示你创建一个组织，并且输入一个项目昵称，选择编程语言(不选也可以)，随后点击右下角的 Continue(继续)，如果没有可以跟如下图执行，点击 Create an Organization(创建组织)
选择免费的共享数据库，随后会跳出选择地区(选择离你服务端近的即可)，点击 Create Cluster创建
随后您需要创建数据库用户，输入用户名和密码，继续向下滚动就是添加 IP 地址，最后点击下方的 Finish and Close(完成并关闭)按钮

服务器部署，则填服务器公网 IP

无服务器(ServerLess)ServerLess 一般都是动态 IP，你无法得到一个固定 IP，我们建议填写 0.0.0.0

稍作等待创建好数据库即可，随后点击 Connect(连接)，点击选择 Connect you application(连接应用程序)，然后复制连接数据库字符串

需要将字符串中的 <password>替换为您在第三步创建的数据库用户密码，修改 myFirstDatabase为你想要的数据库名称例如:Discuss

部署kkapi

点击下方按钮，跳转至 Vercel 进行部署。

配置环境变量：

环境变量可能随项目的迭代而增加必填的环境变量，具体请参考官网 —— kkapi环境变量

重新部署

绑定域名（建议）

初始化账户

浏览器访问：

你刚刚复制的地址/api/user/init?userName=你想设置的账户名

如果不指定用户名则自动将账户名设置为admin

以下内容来自：https://kkapi.js.org/guide/setup/deploy.html#%E7%AC%AC%E4%BA%8C%E7%A7%8D%E9%83%A8%E7%BD%B2%E5%A7%BF%E5%8A%BF%EF%BC%9A%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%83%A8%E7%BD%B2

克隆源代码

git clone https://ghproxy.com/https://github.com/kkfive/kkapi-open.git

安装依赖

yarn install

如果没有yarn则先允许npm i yarn -g进行安装

安装 pm2

npm i pm2 -g

编译项目

yarn build

配置环境变量

在项目目录新建文件local.env，将环境变量写入其中即可。例如：

PORT=3000
DATABASE_URL=mongodb://127.0.0.1:27017/kkpaiopen?authSource=admin
DATABASE_USER=root
DATABASE_PASSWORD=root
# 加密密钥 测试
SECRETKEY=xxxxxxxxxxxxxxx

其中 PORT 表示启动的端口

启动项目

pm2 start pm2.json

然后通过命令curl http://127.0.0.1:3000/api/user/init检查是否允许成功

image-20220227101623911

更新项目

进入项目并执行一下命令

git pull
yarn build
pm2 restart pm2.json

尚未写完

部署kkadmin

介绍：kkadmin是kkapi的后台，方便发布说说

以下部署姿势你只需要任选其一即可，无需全部部署。

由于构建 kkadmin 时部分依赖文件需要 nodejs16 及以上版本才可以安装，因此不能将源代码扔给 vercel 进行构建。

所以只能够利用 GitHub actions 构建完成后将产物扔给 vercel 进行使用

Fork这个项目：https://github.com/kkfive/kkadmin-open/

配置变量

VITE_GLOB_API_URL（必选）

构建actions

部署到Vercel 复制下面这个网址

https://vercel.com/new/import?s=https://github.com/SinInno/kkadmin-open/tree/vercel

并将“SinInno”改为你Github的用户名后访问你刚刚修改的网址

PS：如果你Fork的这个项目有改Repository name，那么请将上面的“kkapi-open”改为你这个项目的Repository name

然后直接部署

部署完成后点“Go to Dashboard”，并点左上角的“Visit”

账号输入你之前初始化账户的账户名

密码请输入默认密码：123456

登入面板后请更改默认密码！

如果你已经在 GitHub actions 部署了，那么 cf pages 部署时也可以选择 vercel 进行部署。也可以使用主干分支进行打包部署。

接下来的教程以使用 cf pages 构建为例介绍

fork项目（可直接fork）
导入项目

配置环境变量

环境变量参考：官网 —— kkadmin环境变量

等待构建完成后即可

其他环境部署基本可以直接使用 GitHub 构建后的 vercel 进行，毕竟只是 HTML

前端配置

进入后台，查看个人ID

前端引入

ipseak 使用 marked 依赖和 highlight 依赖，为了减少打包体积，并没有将该依赖打包，因此需要使用 cdn 进行外部引入。

在博客目录下运行hexo new page speaks
编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：

---
title: 说说
comments: false
aside: false
---


<style>
 .speak-footer,.wl-power{
 display:none;
 }
</style>
<div id="ispeak"></div>
<link
 rel="stylesheet"
 href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css"
/>
<link
 rel="stylesheet"
 href="https://npm.elemecdn.com/ispeak@4.4.0/style.css"
/>
<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/marked/2.0.0/marked.min.js"></script>
<!-- CSS -->
<link href="https://unpkg.com/@waline/client/dist/waline.css" rel="stylesheet" />
<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
<script>
 function load_ispeak() {
 setTimeout(function() {
 var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
 var src = 'https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js'
 var script = document.createElement('script')
 script.setAttribute('type','text/javascript')
 script.onload = function() {
 pjax_ispeak()
 }
 script.setAttribute('src', src)
 HEAD.appendChild(script)
 }, 1);
 };
 function pjax_ispeak() {
 if(!document.querySelectorAll("#ispeak")[0])return;
 ispeak
 .init({
 el: '#ispeak',//不用改
 api: '', //填写你kkapi地址（不是kkadmin后台地址！）
 author: '',//填写个人ID
 pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）
 loading_img: 'https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif',//加载动画
 comment: function (speak) {
 const { _id, title, content } = speak
 const contentSub = content.substring(0, 30)
 Waline.init({
 el: '.ispeak-comment',//不用改
 serverURL: '',//填写你的Waline服务端地址
 path:'/speak/info.html?q=' + _id,//不用改，除非你将上面的speak改为别的文件夹昵称
 //后面可按照https://waline.js.org/reference/client/props.html 修改（必须放在path后面！以下为一个例子）
 emoji: ["//unpkg.com/@waline/emojis@1.0.1/weibo","https://emoji.shojo.cn/bili/src/小黄脸","//unpkg.com/@waline/emojis@1.0.1/bilibili","https://emoji.shojo.cn/bili/src/枕边童话","https://emoji.shojo.cn/bili/src/咩栗","https://emoji.shojo.cn/bili/src/呜米","https://emoji.shojo.cn/bili/src/进击的冰糖","https://emoji.shojo.cn/bili/src/冰糖IO 蜕变·闪耀","https://emoji.shojo.cn/bili/src/多多poi","https://emoji.shojo.cn/bili/src/穆小泠","https://emoji.shojo.cn/bili/src/早稻叽"],// 表情包大全
 });
 }
 });
 }
 load_ispeak();
 document.addEventListener('pjax:complete', function () {
 pjax_ispeak();
 });
</script>
<!--建议标注末尾链接-->
<p style="width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;">Powered by <a href="https://www.antmoe.com/speak/"><strong>iSpeak</strong></a> | Comment by <a href="https://discuss.js.org/"><strong>Waline</strong></a></p>

在[blogroot]\source\speaks\下新建info.md，内容为下：

---
title: Speak
aside: false
comments: false
description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍
---
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css" />
<link href="https://unpkg.com/@waline/client/dist/waline.css" rel="stylesheet" />
<div class='content'>
 <img src='https://bu.dusays.com/2022/05/01/626e88f349943.gif'>
</div>
<a href='/speaks/'>查看全部</a>
<hr />
<div class='ispeak-comment'></div>
<!-- JS -->
<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
<script src="https://unpkg.com/marked@4.0.18/marked.min.js"></script>
<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script>
 const searchParams = new URLSearchParams(window.location.search);
 const speakId = searchParams.get('q');
 const path = window.location.pathname;
 const apiURL = 'https://（你的api地址）/api/ispeak';
 const markedRender = (body, loading_img='https://bu.dusays.com/2022/05/01/626e88f349943.gif') => {
 const renderer = {
 image(href, title, text) {
 return `<a href="${href}" target="_blank" data-fancybox="group" class="fancybox">
 <img speak-src="${href}" src=${loading_img} alt='${text}'>
 </a>`
 }
 }
 marked.setOptions({
 renderer: new marked.Renderer(),
 highlight: function (code) {
 if (hljs) {
 return hljs.highlightAuto(code).value
 } else {
 return code
 }
 },
 pedantic: false,
 gfm: true,
 tables: true,
 breaks: true,
 sanitize: false,
 smartLists: true,
 smartypants: false,
 xhtml: false
 })
 marked.use({ renderer })
 return marked.parse(body)
 }
 fetch(`${apiURL}/get/${speakId}`)
 .then(response => response.json())
 .then(res => {
 const data = res.data;
 if(data){
 const {title,content} = data;
 const contentSub = content.substring(0, 30);
 document.querySelector('.content').innerHTML = markedRender(content);
 if(title){
 document.title = title;
 }
 Waline.init({
 el: '.ispeak-comment',//不用改
 serverURL: '',//填写你的Waline服务端地址
 path: path + '?q=' + _id,//不用改
 //后面可按照https://waline.js.org/reference/client/props.html 修改（必须放在path后面！以下为一个例子）
 emoji: ["//unpkg.com/@waline/emojis@1.0.1/weibo","https://emoji.shojo.cn/bili/src/小黄脸","//unpkg.com/@waline/emojis@1.0.1/bilibili","https://emoji.shojo.cn/bili/src/枕边童话","https://emoji.shojo.cn/bili/src/咩栗","https://emoji.shojo.cn/bili/src/呜米","https://emoji.shojo.cn/bili/src/进击的冰糖","https://emoji.shojo.cn/bili/src/冰糖IO 蜕变·闪耀","https://emoji.shojo.cn/bili/src/多多poi","https://emoji.shojo.cn/bili/src/穆小泠","https://emoji.shojo.cn/bili/src/早稻叽"],// 表情包大全
 });
 }
 });
</script>

在博客目录下运行hexo new page speaks
编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：

---
title: 说说
comments: false
aside: false
---


<style>
 .speak-footer,.tk-footer{
 display:none;
 }
</style>
<div id="ispeak"></div>
<link
 rel="stylesheet"
 href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css"
/>
<link
 rel="stylesheet"
 href="https://npm.elemecdn.com/ispeak@4.4.0/style.css"
/>
<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/marked/2.0.0/marked.min.js"></script>
<script src="https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js"></script>
<script src="https://npm.elemecdn.com/twikoo"></script>
<script>
 function load_ispeak() {
 setTimeout(function() {
 var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
 var src = 'https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js'
 var script = document.createElement('script')
 script.setAttribute('type','text/javascript')
 script.onload = function() {
 pjax_ispeak()
 }
 script.setAttribute('src', src)
 HEAD.appendChild(script)
 }, 1);
 };
 function pjax_ispeak() {
 if(!document.querySelectorAll("#ispeak")[0])return;
 ispeak
 .init({
 el: '#ispeak',//不用改
 api: '', //填写你kkapi地址（不是kkadmin后台地址！）
 author: '',//填写个人ID
 pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）
 loading_img: 'https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif',//加载动画
 comment: function (speak) {
 const { _id, title, content } = speak
 const contentSub = content.substring(0, 30)
 twikoo.init({
 envId: '', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
 el: '.ispeak-comment', // 不用改
 //region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
 path: '/speak/info.html?q=' + _id, //不用改，除非你将上面的speak改为别的文件夹昵称
 lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
 })
 }
 });
 }
 load_ispeak();
 document.addEventListener('pjax:complete', function () {
 pjax_ispeak();
 });
</script>
<!--建议标注末尾链接-->
<p style="width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;">Powered by <a href="https://www.antmoe.com/speak/"><strong>iSpeak</strong></a> | Comment by <a href="https://twikoo.js.org/"><strong>Twikoo</strong></a></p>

在[blogroot]\source\speaks\下新建info.md，内容为下：

---
title: Speak
aside: false
comments: false
description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍
---
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css" />
<div class='content'>
 <img src='https://bu.dusays.com/2022/05/01/626e88f349943.gif'>
</div>
<a href='/speaks/'>查看全部</a>
<hr />
<div class='ispeak-comment'></div>
<!-- JS -->
<script src="https://npm.elemecdn.com/twikoo"></script>
<script src="https://unpkg.com/marked@4.0.18/marked.min.js"></script>
<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script>
 const searchParams = new URLSearchParams(window.location.search);
 const speakId = searchParams.get('q');
 const path = window.location.pathname;
 const apiURL = 'https://（你的api地址）/api/ispeak';
 const markedRender = (body, loading_img='https://bu.dusays.com/2022/05/01/626e88f349943.gif') => {
 const renderer = {
 image(href, title, text) {
 return `<a href="${href}" target="_blank" data-fancybox="group" class="fancybox">
 <img speak-src="${href}" src=${loading_img} alt='${text}'>
 </a>`
 }
 }
 marked.setOptions({
 renderer: new marked.Renderer(),
 highlight: function (code) {
 if (hljs) {
 return hljs.highlightAuto(code).value
 } else {
 return code
 }
 },
 pedantic: false,
 gfm: true,
 tables: true,
 breaks: true,
 sanitize: false,
 smartLists: true,
 smartypants: false,
 xhtml: false
 })
 marked.use({ renderer })
 return marked.parse(body)
 }
 fetch(`${apiURL}/get/${speakId}`)
 .then(response => response.json())
 .then(res => {
 const data = res.data;
 if(data){
 const {title,content} = data;
 const contentSub = content.substring(0, 30);
 document.querySelector('.content').innerHTML = markedRender(content);
 if(title){
 document.title = title;
 }
 twikoo.init({
 envId: '', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
 el: '.ispeak-comment', // 不用改
 //region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
 path: path + '?q=' + speakId, // 不用改
 lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
 })
 }
 });
</script>

在博客目录下运行hexo new page speaks
编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：

---
title: 说说
comments: false
aside: false
---


<style>
 .speak-footer,.D-footer{
 display:none;
 }
</style>
<div id="ispeak"></div>
<link
 rel="stylesheet"
 href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css"
/>
<link
 rel="stylesheet"
 href="https://npm.elemecdn.com/ispeak@4.4.0/style.css"
/>
<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/marked/2.0.0/marked.min.js"></script>
<script src="https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js"></script>
<script src="https://npm.elemecdn.com/discuss@latest/dist/discuss.js"></script>
<script>
 function load_ispeak() {
 setTimeout(function() {
 var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
 var src = 'https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js'
 var script = document.createElement('script')
 script.setAttribute('type','text/javascript')
 script.onload = function() {
 pjax_ispeak()
 }
 script.setAttribute('src', src)
 HEAD.appendChild(script)
 }, 1);
 };
 function pjax_ispeak() {
 if(!document.querySelectorAll("#ispeak")[0])return;
 ispeak
 .init({
 el: '#ispeak',//不用改
 api: '', //填写你kkapi地址（不是kkadmin后台地址！）
 author: '',//填写个人ID
 pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）
 loading_img: 'https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif',//加载动画
 comment: function (speak) {
 const { _id, title, content } = speak
 const contentSub = content.substring(0, 30)
 discuss.init({
 el: '.ispeak-comment',// 不用改
 serverURLs: '',//填写你的Discuss服务端地址
 path: '/speak/info.html?q=' + _id,//不用改，除非你将上面的speak改为别的文件夹昵称
 //后面可按照https://discuss.js.org/Quick-Start.html#%E5%AE%A2%E6%88%B7%E7%AB%AF-client 修改（必须放在path后面！以下为一个例子）
 ph: '千山万水总是情，给个评论行不行' ,//评论框占位符
 imgLoading: 'https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif'//评论图片加载动画
 })
 }
 });
 }
 load_ispeak();
 document.addEventListener('pjax:complete', function () {
 pjax_ispeak();
 });
</script>
<!--建议标注末尾链接-->
<p style="width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;">Powered by <a href="https://www.antmoe.com/speak/"><strong>iSpeak</strong></a> | Comment by <a href="https://discuss.js.org/"><strong>Discuss</strong></a></p>

在[blogroot]\source\speaks\下新建info.md，内容为下：

---
title: Speak
aside: false
comments: false
description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍
---
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css" />
<div class='content'>
 <img src='https://bu.dusays.com/2022/05/01/626e88f349943.gif'>
</div>
<a href='/speaks/'>查看全部</a>
<hr />
<div class='ispeak-comment'></div>
<!-- JS -->
<script src="https://npm.elemecdn.com/discuss@latest/dist/discuss.js"></script>
<script src="https://unpkg.com/marked@4.0.18/marked.min.js"></script>
<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script>
 const searchParams = new URLSearchParams(window.location.search);
 const speakId = searchParams.get('q');
 const path = window.location.pathname;
 const apiURL = 'https://（你的api地址）/api/ispeak'; //api地址
 const markedRender = (body, loading_img='https://bu.dusays.com/2022/05/01/626e88f349943.gif') => {
 const renderer = {
 image(href, title, text) {
 return `<a href="${href}" target="_blank" data-fancybox="group" class="fancybox">
 <img speak-src="${href}" src=${loading_img} alt='${text}'>
 </a>`
 }
 }
 marked.setOptions({
 renderer: new marked.Renderer(),
 highlight: function (code) {
 if (hljs) {
 return hljs.highlightAuto(code).value
 } else {
 return code
 }
 },
 pedantic: false,
 gfm: true,
 tables: true,
 breaks: true,
 sanitize: false,
 smartLists: true,
 smartypants: false,
 xhtml: false
 })
 marked.use({ renderer })
 return marked.parse(body)
 }
 fetch(`${apiURL}/get/${speakId}`)
 .then(response => response.json())
 .then(res => {
 const data = res.data;
 if(data){
 const {title,content} = data;
 const contentSub = content.substring(0, 30);
 document.querySelector('.content').innerHTML = markedRender(content);
 if(title){
 document.title = title;
 }
 discuss.init({
 el: '.ispeak-comment',// 不用改
 serverURLs: '',//填写你的Discuss服务端地址
 path: path + '?q=' + speakId,// 不用改
 //后面可按照https://discuss.js.org/Quick-Start.html#%E5%AE%A2%E6%88%B7%E7%AB%AF-client 修改（必须放在path后面！以下为一个例子）
 ph: '千山万水总是情，给个评论行不行' ,//评论框占位符
 imgLoading: 'https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif'//评论图片加载动画
 })
 }
 });
</script>

在博客目录下运行hexo new page speaks
编辑[blogroot]\source\speaks\index.md，将里面的内容替换成：

---
title: 说说
comments: false
aside: false
---

<style>
 .speak-footer,.atk-list-footer{
 display:none;
 }
</style>
<div id="ispeak"></div>
<link
 rel="stylesheet"
 href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css"
/>
<link
 rel="stylesheet"
 href="https://npm.elemecdn.com/ispeak@4.4.0/style.css"
/>
<script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/marked/2.0.0/marked.min.js"></script>
<script src="https://npm.elemecdn.com/ispeak@4.4.0/ispeak.umd.js"></script>
<!-- CSS -->
<link href="https://unpkg.com/artalk@2.3.4/dist/Artalk.css" rel="stylesheet" />
<!-- JS -->
<script src="https://unpkg.com/artalk@2.3.4/dist/Artalk.js"></script>
<script>
 function load_ispeak() {
 setTimeout(function() {
 var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
 var src = 'https://cdn1.tianli0.top/npm/ispeak/ispeak.umd.js'
 var script = document.createElement('script')
 script.setAttribute('type','text/javascript')
 script.onload = function() {
 pjax_ispeak()
 }
 script.setAttribute('src', src)
 HEAD.appendChild(script)
 }, 1);
 };
 function pjax_ispeak() {
 if(!document.querySelectorAll("#ispeak")[0])return;
 ispeak
 .init({
 el: '#ispeak',//不用改
 api: '', //填写你kkapi地址（不是kkadmin后台地址！）
 author: '',//填写个人ID
 pageSize: 10,//每页speak显示的条数（建议保持默认，除非你要魔改css）
 loading_img: 'https://bu.dusays.com/2021/03/04/d2d5e983e2961.gif',//加载动画
 comment: function (speak) {
 const { _id, title, content } = speak
 const contentSub = content.substring(0, 30)
 new Artalk({
 el: '.ispeak-comment', // 不用改
 pageKey: '/speak/info.html?q=' + _id, //不用改，除非你将上面的speak改为别的文件夹昵称
 pageTitle: title || contentSub, // 不用改
 server: '', //填写你的Artalk服务端地址
 site: '' // 填写你的站点名
 })
 }
 });
 }
 load_ispeak();
 document.addEventListener('pjax:complete', function () {
 pjax_ispeak();
 });
</script>
<!--建议标注末尾链接-->
<p style="width: 100%;text-align: end;font-size: .75em;color: #999;margin-top: 1em;">Powered by <a href="https://www.antmoe.com/speak/"><strong>iSpeak</strong></a> | Comment by <a href="https://artalk.js.org/"><strong>Artalk</strong></a></p>

在[blogroot]\source\speaks\下新建info.md，内容为下：

 ---
 title: Speak
 aside: false
 comments: false
 description: 欢迎来到SinzMise的日记，快来看看SinzMise分享了什么！ # speak介绍
 ---
 <!-- CSS -->
 <link href="https://unpkg.com/artalk@2.3.4/dist/Artalk.css" rel="stylesheet" />
 <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.6.0/styles/atom-one-dark.min.css" />
 <div class='content'>
 <img src='https://bu.dusays.com/2022/05/01/626e88f349943.gif'>
 </div>
 <a href='/speaks/'>查看全部</a>
 <hr />
 <div class='ispeak-comment'></div>
 <!-- JS -->
 <script src="https://unpkg.com/artalk@2.3.4/dist/Artalk.js"></script>
 <script src="https://unpkg.com/marked@4.0.18/marked.min.js"></script>
 <script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
 <script>
 const searchParams = new URLSearchParams(window.location.search);
 const speakId = searchParams.get('q');
 const path = window.location.pathname;
 const apiURL = 'https://（你的api地址）/api/ispeak';
 const markedRender = (body, loading_img='https://bu.dusays.com/2022/05/01/626e88f349943.gif') => {
 const renderer = {
 image(href, title, text) {
 return `<a href="${href}" target="_blank" data-fancybox="group" class="fancybox">
 <img speak-src="${href}" src=${loading_img} alt='${text}'>
 </a>`
 }
 }
 marked.setOptions({
 renderer: new marked.Renderer(),
 highlight: function (code) {
 if (hljs) {
 return hljs.highlightAuto(code).value
 } else {
 return code
 }
 },
 pedantic: false,
 gfm: true,
 tables: true,
 breaks: true,
 sanitize: false,
 smartLists: true,
 smartypants: false,
 xhtml: false
 })
 marked.use({ renderer })
 return marked.parse(body)
 }
 fetch(`${apiURL}/get/${speakId}`)
 .then(response => response.json())
 .then(res => {
 const data = res.data;
 if(data){
 const {title,content} = data;
 const contentSub = content.substring(0, 30);
 document.querySelector('.content').innerHTML = markedRender(content);
 if(title){
 document.title = title;
 }
 new Artalk({
 el: '.ispeak-comment', // 不用改
 pageKey: path + '?q=' + speakId, // 不用改
 pageTitle: title || contentSub, // 不用改
 server: '', //填写你的Artalk服务端地址
 site: '' // 填写你的站点名
 })
 }
 });
 </script>

butterfly主题添加音乐页面（适配手机）

2023-01-08T22:31:46Z

前言

没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，~~但考虑到我不会写样式（虽然我可以自学）~~ 所以我音乐页面用的是 Chuckle的方案

~~（等会为啥开头这么像 https://www.chuckle.top/article/3322c8a8.html）~~

原本我是想做单页背景透明的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画
以下是我之前的音乐页面：别问为啥是之前，这个音乐页面手机访问是这样的：当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果：（后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，~~但我懒得适配，于是就有了这个教程~~ ）

教程

这个教程是我基于 https://www.php.cn/xiazai/js/6169 做的适配butterfly主题的版本
但后面我发现这跟csdn里的 https://blog.csdn.net/weixin_43151418/article/details/125351391 一模一样
~~（希望csdn那篇文章的作者看完不会在意）~~

新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug，内容如下：

link(rel='stylesheet' href='/css/musics.css')
.player
 .player__header
 .player__img.player__img--absolute.slider
 button.player__button.player__button--absolute--nw.playlist
 img(src='/svg/playlist.svg', alt='playlist-icon')
 button.player__button.player__button--absolute--center.play
 img(src='/svg/play.svg', alt='play-icon')
 img(src='/svg/pause.svg', alt='pause-icon')
 .slider__content
 each item in theme.musicplayer.musics
 img.img.slider__img(src=item.image, alt='cover')
 .player__controls
 button.player__button.back
 img.img(src='/svg/back.svg', alt='back-icon')
 p.player__context.slider__context
 strong.slider__title
 span.slider__name.player__title
 button.player__button.next
 img.img(src='/svg/next.svg', alt='next-icon')
 .progres
 .progres__filled
 ul.player__playlist.list
 each musics in theme.musicplayer.musics
 li.player__song
 img.player__img.img(src=musics.image, alt='cover')
 p.player__context
 b.player__song-name=musics.name
 span.flex
 span.player__title=musics.author
 span.player__song-time
 audio.audio(src=musics.url)
if theme.musicplayer.hitokoto
 p#hitokoto
 a#hitokoto_text(href="#",target="_blank") :D 获取中...
script(src='/js/player.js')
if theme.musicplayer.hitokoto
 script.
 fetch('https://v1.hitokoto.cn')
 .then(response => response.json())
 .then(data => {
 const hitokoto = document.querySelector('#hitokoto_text')
 hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`
 hitokoto.innerText = data.hitokoto + " —— " + data.creator + "「" + data.from + "」"
 })
 .catch(console.error)

在[blogroot]\themes\butterfly\source\css\目录下新建musics.css,内容如下：

::root {
 --parent-height : 20em ;
 --duration: 1s ;
 --duration-text-wrap: 12s 1.5s cubic-bezier(0.82, 0.82, 1, 1.01) ;
 --cubic-header: var(--duration) cubic-bezier(0.71, 0.21, 0.3, 0.95) ;
 --cubic-slider : var(--duration) cubic-bezier(0.4, 0, 0.2, 1) ;
 --cubic-play-list : .35s var(--duration) cubic-bezier(0, 0.85, 0.11, 1.64) ;
 --cubic-slider-context : cubic-bezier(1, -0.01, 1, 1.01) ;
}
.img {
 width: 100% ;
 display: block ;
 object-fit: cover ;
}
.list {
 margin: 0 ;
 padding: 0 ;
 list-style-type: none ;
}

.flex {

 display: flex ;
 align-items: center ;
 justify-content: space-between ;

}

.uppercase{

 text-transform: uppercase ;

}

.player {

 width: 17.15em ;
 display: flex ;
 overflow: hidden ;
 font-size: 1.22em ;
 border-radius: 1.35em ;
 flex-direction: column ;
 background-color: white ;
 height: var(--parent-height) ;
 margin:0 auto ;

}

.player__header {

 z-index: 1 ;
 gap: 0 .4em ;
 width: 100% ;
 display: flex;
 height: 5.85em ;
 flex-shrink: 0 ;
 position: relative;
 align-items: flex-start ;
 border-radius: inherit ;
 justify-content: flex-end ;
 background-color: white ;
 padding: .95em 0.6em 0 1.2em ;
 box-shadow: 0 2px 6px 1px #0000001f ;
 transition: height var(--cubic-header), box-shadow var(--duration), padding var(--duration) ease-in-out ;

}

.player__header.open-header {

 height: 100% ;
 padding-left: 0 ;
 padding-right: 0 ;
 box-shadow: unset ;

}

.player__img {

 width: 3.2em ;
 height: 3.2em ;
 border-radius: 1.32em ;

}

.player__img--absolute {

 top: 1.4em ;
 left: 1.2em ;
 position: absolute ;

}

.slider {

 flex-shrink: 0 ;
 overflow: hidden ;
 transition: width var(--cubic-header), height var(--cubic-header), top var(--cubic-header), left var(--cubic-header);

}

.slider.open-slider{

 top: 0 ;
 left: 0 ;
 width: 100% ;
 height: 14.6em ;

}

.slider__content {

 display: flex ;
 height: 100% ;
 transition: transform var(--cubic-slider);

}

.slider__img {

 filter: brightness(75%) ;

}

.slider__name,
.slider__title {

 overflow: hidden ;
 white-space: nowrap ;

}

.text-wrap {

 display: block ;
 white-space: pre ;
 width: fit-content ;
 animation: text-wrap var(--duration-text-wrap) infinite ;

}

@keyframes text-wrap {

 75%{

 transform: translate3d(-51.5%, 0, 0) ;

 }

 100%{

 transform: translate3d(-51.5%, 0, 0) ;

 }

}

.player__button {

 all: unset ;
 z-index: 100 ;
 width: 2.5em ;
 height: 2.5em ;
 cursor: pointer ;

}

.playlist {

 transform: scale(0) ;
 transition: transform calc(var(--duration) / 2) ;

}

.slider.open-slider .playlist {

 transform: scale(1) ;
 transition: transform var(--cubic-play-list) ;


}

.player__button--absolute--nw {

 top: 5.5% ;
 left: 5.5% ;
 position: absolute ;

}

.player__button--absolute--center {

 top: 0 ;
 left: 0 ;
 right: 0 ;
 bottom: 0 ;
 margin: auto ;
 position: absolute ;

}

img[alt ="pause-icon"] {

 display: none ;

}

.player__controls {

 width: 77% ;
 gap: .5em 0 ;
 display: flex ;
 flex-wrap: wrap ;
 align-items: center ;
 will-change: contents ;
 align-content: center ;
 justify-content: center ;
 transition: transform var(--cubic-header) , width var(--cubic-header) ;

}

.player__controls.move {

 width: 88% ;
 transform: translate3d(-1.1em , calc(var(--parent-height) - 153%) , 0) ;

}

.player__context {

 margin: 0 ;
 width: 100% ;
 display: flex ;
 line-height: 1.8 ;
 flex-direction: column ;
 justify-content: center ;
 text-transform: capitalize ;

}

.slider__context {

 width: 56.28% ;
 cursor: pointer ;
 text-align: center ;
 padding-bottom: .2em ;
 will-change: contents ;
 transition: width var(--cubic-header) ;
 animation: calc(var(--duration) / 2) var(--cubic-slider-context) ;

}

@keyframes opacity {


 0% {

 opacity: 0 ;

 }

 90%{

 opacity: 1 ;

 }

}

.player__controls.move .slider__context{

 width: 49.48% ;

}

.player__title {

 font-size: .7em ;
 font-weight: bold ;
 color: #00000086 ;

}

.progres {

 width: 90% ;
 height: .25em ;
 cursor: pointer ;
 border-radius: 1em ;
 background-color: #e5e7ea ;
 transition: width var(--cubic-header) ;

}

.player__controls.move .progres{

 width: 98% ;

}

.progres__filled {

 width: 0% ;
 height: 100% ;
 display: flex ;
 position: relative ;
 align-items: center ;
 border-radius: inherit ;
 background-color: #78adfe ;

}

.progres__filled::before {

 right: 0 ;
 width: .35em ;
 content: " " ;
 height: .35em ;
 border-radius: 50% ;
 position: absolute ;
 background-color: #5781bd ;

}

.player__playlist {

 height: 100% ;
 overflow: auto ;
 padding: 1.05em .9em 0 1.2em ;

}

.player__playlist::-webkit-scrollbar {

 width: 0 ;

}

.player__song {

/* gap: 0 .65em ; */
 display: flex ;
 cursor: pointer ;
 margin-bottom: .5em ;
 padding-bottom: .7em ;
 border-bottom: .1em solid #d8d8d859 ;

}

.player__song .player__context {

 line-height: 1.5 ;
 margin-left: .65em ;

}

.player__song-name {

 font-size: .88em ;

}

.player__song-time {

 font-size: .65em ;
 font-weight: bold ;
 color: #00000079 ;
 height: fit-content ;
 align-self: flex-end ;

}

.audio {

 display: none !important ;

}
.player__song-name,.slider__title{
 color:#000
}
#hitokoto{
 text-align: center;
}

在[blogroot]\themes\butterfly\source\js\目录下新建player.js,内容如下：

// Designed by: Mauricio Bucardo
// Original image: https://dribbble.com/shots/6957353-Music-Player-Widget

"use strict";


// add elemnts
const bgBody = ["#e5e7e9", "#ff4545", "#f8ded3", "#ffc382", "#f5eda6", "#ffcbdc", "#dcf3f3"];
const body = document.body;
const player = document.querySelector(".player");
const playerHeader = player.querySelector(".player__header");
const playerControls = player.querySelector(".player__controls");
const playerPlayList = player.querySelectorAll(".player__song");
const playerSongs = player.querySelectorAll(".audio");
const playButton = player.querySelector(".play");
const nextButton = player.querySelector(".next");
const backButton = player.querySelector(".back");
const playlistButton = player.querySelector(".playlist");
const slider = player.querySelector(".slider");
const sliderContext = player.querySelector(".slider__context");
const sliderName = sliderContext.querySelector(".slider__name");
const sliderTitle = sliderContext.querySelector(".slider__title");
const sliderContent = slider.querySelector(".slider__content");
const sliderContentLength = playerPlayList.length - 1;
const sliderWidth = 100;
let left = 0;
let count = 0;
let song = playerSongs[count];
let isPlay = false;
const pauseIcon = playButton.querySelector("img[alt = 'pause-icon']");
const playIcon = playButton.querySelector("img[alt = 'play-icon']");
const progres = player.querySelector(".progres");
const progresFilled = progres.querySelector(".progres__filled");
let isMove = false;

// creat functions
function openPlayer() {

 playerHeader.classList.add("open-header");
 playerControls.classList.add("move");
 slider.classList.add("open-slider");

}

function closePlayer() {

 playerHeader.classList.remove("open-header");
 playerControls.classList.remove("move");
 slider.classList.remove("open-slider");

}

function next() {

 if (count == sliderContentLength) {
 count = count;
 return
 }

 left += sliderWidth;
 left = Math.min(left, (sliderContentLength) * sliderWidth);
 sliderContent.style.transform = `translate3d(-${left}%, 0, 0)`;
 count++;

 changeSliderContext();
 changeBgBody();
 selectSong();

}

function back() {

 if (count == 0) {
 count = count
 return
 }

 left -= sliderWidth;
 left = Math.max(0, left);
 sliderContent.style.transform = `translate3d(-${left}%, 0, 0)`;
 count--;

}

function changeSliderContext() {

 sliderContext.style.animationName = "opacity";

 sliderName.textContent = playerPlayList[count].querySelector(".player__title").textContent;
 sliderTitle.textContent = playerPlayList[count].querySelector(".player__song-name").textContent;

 if (sliderName.textContent.length > 16) {
 const textWrap = document.createElement("span");
 textWrap.className = "text-wrap";
 textWrap.innerHTML = sliderName.textContent + " " + sliderName.textContent;
 sliderName.innerHTML = "";
 sliderName.append(textWrap);

 }

 if (sliderTitle.textContent.length >= 18) {
 const textWrap = document.createElement("span");
 textWrap.className = "text-wrap";
 textWrap.innerHTML = sliderTitle.textContent + " " + sliderTitle.textContent;
 sliderTitle.innerHTML = "";
 sliderTitle.append(textWrap);
 }

}

function changeBgBody() {
 body.style.backgroundColor = bgBody[count];
}

function selectSong() {

 song = playerSongs[count];

 for (const item of playerSongs) {

 if (item != song) {
 item.pause();
 item.currentTime = 0;
 }

 }

 if (isPlay) song.play();


}

function playSong() {



 if (song.paused) {
 song.play();
 playIcon.style.display = "none";
 pauseIcon.style.display = "block";

 }else{
 song.pause();
 isPlay = false;
 playIcon.style.display = "";
 pauseIcon.style.display = "";
 }




}

function progresUpdate() {

 const progresFilledWidth = (this.currentTime / this.duration) * 100 + "%";
 progresFilled.style.width = progresFilledWidth;

 if (this.duration == this.currentTime) {
 next();
 }
 if (count == sliderContentLength && song.currentTime == song.duration) {
 playIcon.style.display = "block";
 pauseIcon.style.display = "";
 isPlay = false;
 }
}

function scurb(e) {

 // If we use e.offsetX, we have trouble setting the song time, when the mousemove is running
 const currentTime = ( (e.clientX - progres.getBoundingClientRect().left) / progres.offsetWidth ) * song.duration;
 song.currentTime = currentTime;

}

function durationSongs() {

 let min = parseInt(this.duration / 60);
 if (min < 10) min = "0" + min;

 let sec = parseInt(this.duration % 60);
 if (sec < 10) sec = "0" + sec;

 const playerSongTime = `${min}:${sec}`;
 this.closest(".player__song").querySelector(".player__song-time").append(playerSongTime);

}


changeSliderContext();

// add events
sliderContext.addEventListener("click", openPlayer);
sliderContext.addEventListener("animationend", () => sliderContext.style.animationName ='');
playlistButton.addEventListener("click", closePlayer);

nextButton.addEventListener("click", next);

backButton.addEventListener("click", () => {
 back();
 changeSliderContext();
 changeBgBody();
 selectSong();

});

playButton.addEventListener("click", () => {
 isPlay = true;
 playSong();
});

playerSongs.forEach(song => {
 song.addEventListener("loadeddata" , durationSongs);
 song.addEventListener("timeupdate" , progresUpdate);

});

progres.addEventListener("mousedown", (e) => {
 scurb(e);
 isMove = true;
 song.muted = true;
});

document.addEventListener("mousemove", (e) => isMove && scurb(e));

document.addEventListener("mouseup", () => {
 isMove = false
 song.muted = false;
});

document.ondragstart = () => {
 return false
};

编辑[blogroot]\themes\butterfly\layout\page.pug

 case page.type
 when 'tags'
 include includes/page/tags.pug
 when 'link'
 include includes/page/flink.pug
 when 'bb'
 include includes/page/bb.pug
 when 'categories'
 include includes/page/categories.pug
+ when 'music'
+ include includes/page/music.pug
 default
 include includes/page/default-page.pug

编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：

musicplayer:
 hitokoto: true # 一言
 musics:
 - name: 'Eutopia'
 author: 'Yoohsic Roomz'
 image: 'http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg'
 url: 'http://music.163.com/song/media/outer/url?id=29129889.mp3'
 - name: 'Everything'
 author: 'Yinyues'
 image: 'http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg'
 url: 'http://music.163.com/song/media/outer/url?id=29544794.mp3'
# - name: '歌曲名字'
# author: '歌曲作者'
# image: '歌曲图片'
# url: '歌曲链接'

将svg.7z压缩包里的五个文件放在[blogroot]\themes\butterfly\source\svg 里面 https://sinz.lanzouw.com/iFMmG0kjkuvg （密码：gt97）
运行hexo new page music
编辑[blogroot]\source\music\index.md，把里面的内容替换成：

---
type: 'music'
comments: false
aside: false
---

新建[Blogroot]\themes\butterfly\layout\includes\page\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下：

link(
 href="/assets/css/tplayer.css"
 rel="stylesheet"
 type="text/css"
)
link(
 href="/assets/plugins/FontAwesome4.1/css/font-awesome.min.css"
 rel="stylesheet"
 type="text/css"
)
script(src="/assets/js/jquery.js")
script(src="/assets/js/jquery-ui.js")
script(src="/assets/js/tPlayer.js")
#t_wrapper
 #t_cover
 img(src="/assets/images/logo.png")
 #t_top
 #t_title_info
 span.artist
 span.title
 #t_middle
 #play
 #pause.hidden
 #t_progress.ui-corner-all.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content
 #trackInfo
 #error
 #current 0:00
 #duration 0:00
 .ui-corner-all.ui-slider-range.ui-slider-range-min.ui-widget-header(style="width: 0%;")
 span.ui-corner-all.ui-slider-handle.ui-state-default(style="left: 0%;" tabindex="0")
 span#prev
 span#next
 #t_bottom
 #range
 #val
 #vol
 #rangeVal
 #t_pls_show.noselectpls
#playlist
 ul
 each musics in theme.musicplayer.musics
 li(
 t_artist=musics.author
 t_cover=musics.image
 t_name=musics.name
 )
 a(href="#")=musics.name + ' - ' + musics.author
 audio(preload="none" src=musics.url type="audio/mp3")
if theme.musicplayer.hitokoto
 p#hitokoto
 a#hitokoto_text(href="#",target="_blank",style="text-align:center;color: #fff;") :D 获取中...
if theme.musicplayer.hitokoto
 script.
 fetch('https://v1.hitokoto.cn')
 .then(response => response.json())
 .then(data => {
 const hitokoto = document.querySelector('#hitokoto_text')
 hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`
 hitokoto.innerText = data.hitokoto + " —— " + data.creator + "「" + data.from + "」"
 })
 .catch(console.error)

将下面压缩包内五个文件夹全都解压在[blogroot]\themes\butterfly\source\assets 文件夹里面 https://sinz.lanzouw.com/iUJTx0krafpi （密码：3r5i）

::: info

1.0想升级成2.0的，下面的步骤可以不用做

:::

编辑[blogroot]\themes\butterfly_config.yml，在末尾添加：

musicplayer:
 hitokoto: true # 一言
 musics:
 - name: 'Eutopia'
 author: 'Yoohsic Roomz'
 image: 'http://p2.music.126.net/2VW7YM7You-iOyl4_smA0Q==/109951165875618375.jpg'
 url: 'http://music.163.com/song/media/outer/url?id=29129889.mp3'
 - name: 'Everything'
 author: 'Yinyues'
 image: 'http://p2.music.126.net/TcxdEdzRbKrwli4fVGeSiw==/6628955604788949.jpg'
 url: 'http://music.163.com/song/media/outer/url?id=29544794.mp3'
# - name: '歌曲名字'
# author: '歌曲作者'
# image: '歌曲图片'
# url: '歌曲链接'

运行hexo new page music
编辑[blogroot]\source\music\index.md，把里面的内容替换成：

---
type: 'music'
comments: false
aside: false
---

再见2022，你好2023

2022-12-31T14:53:11Z

这是我在2022年的最后一篇文章。

时间过得真快，我刚迁移完博客，2022就快结束了

对此我并没有想说的 ~~（不是懒得说是真的没灵感）~~

不知道要说什么，也不知道有什么话要跟大家说

那我就先祝大家新的一年开开心心吧！

再见，2022。你好2023。

新起点，新出发

2021-12-17T14:53:11Z

你好，我是小星鑫233，当然现在请叫我“SinzMise”或“Sinz”

这是“SinGO博客”停止更新且我更换名字的第一篇文章

博客的迁移，代表着原SinGO博客和 Hexo-Theme-SinGO主题正式停止更新

为什么要停止更新？

1.名字改了，头像也改了 ~~（所以别叫我“小星鑫233”了。。。。）~~

2.原先SinGO主题bug贼多，我又没时间修（更何况我开学，虽然大部分时间都有空。。。。。说难听一点就是懒）

懒得写了 ~~（其实是写一半突然忘记要后面要补充什么了。。。。）~~

绘星里

2026-06小记

无人机全过了

关于我的OC

2026-05小记

博客又迁移到EO

无人机又挂了

成功拿到驾照

关于我的OC

2026-04小记

博客更新情况

去广州那边玩了

广州塔

劳动节假期，再次去佛山

emaction，但适配pjax（附新版教程）

前言

教程开始！

部署后端

前端使用（原版）

前端使用（适配pjax的版本）

2026-03小记

关于宿舍内的生活

目前无人机的学习状况

有关博客的情况

个人主页再次上新 + 搞了一些项目

2026-02小记

说说的更换

评论换回Twikoo了

沉迷于星趴（吉星派对）中了

说一下下个月的行程

2026-01小记

域名又一次更换+新域名的含义

感谢何总送来的泰拉瑞亚正版（

明日方舟·终末地 试玩

又收藏了一些老机子

将Hugo博客通过CNB部署到Edgeone Pages和Vercel

2025小结

博客 —— 兜兜转转，最后来到了Hugo

游戏 —— 入坑了许多游戏呢

未来 —— 两条道路，两种选择

2025-12小记

主题又一次重写

关于上次那哥们的后续

折腾Lumia，翻车，然后又折腾

结语

2025的最后几天，主题再次重写

更换风格

IndieWeb相关

再见！Font-Awesome

抛弃CSS库

主题的名字

这个主题要不要开源？

一个追梦者的“堕落”

介绍一下那个哥们

最近发生的事情

对于这件事。。。。。。

2025-11小记

新的个人主页（但遇见Netlify抽风的情况）

老机记录——翻车的诺基亚C6-01

老机记录——诺基亚500

2025-10小记

主题重写

卡拉彼丘活了喵

2025国庆小记

关于站点

国庆经历

2025-09小记

更换框架 —— 从VitePress到Hugo

这个月发生的事情好多

入坑无畏契约（瓦罗兰特）

回忆童年

2025-08小记

舞萌DX —— 终于解锁纱露朵了！

优化了一下站点

关于未来

2025-07小记

台式机终于修好了啊啊啊啊啊啊啊啊啊！

个人主页再次更新

新朋友！

这个月，两天舞萌

明日方舟·终末地试玩

添加网络回响功能