sinzmise-cetastories 2.0.0-1735448702274 → 2.0.0-1735710495372

package/content.json

@@ -1 +1 @@
-[{"title":"圣诞快乐+12月小记","path":"posts/65382/","text":"圣诞快乐！而今天因为要填写档案所以能碰到电脑 那就，正片开始！ 博友圈，我可能没法回来了 之前看到了这篇文章： 关于博友圈的那些事儿「图片的定义」没错，这位小伙伴也被屏蔽了 我从这篇文章才知道博友圈的作者现在已经给动漫图片归类为擦边图片 而且定の栈这位小伙伴也被屏蔽了 对此，我的评价是：这规则恐怕已经不能单纯的按照SFW和NSFW来分了，甚至可能得下放到8+才行 而且这规则是完全在主观的意义上添加了… 对此我只能说，理解并且尊重但是也不太认同了 而因为我站点的一堆封面是动漫图片 说说的也一样 所以可能没法回来了 但是也不太遗憾，至少也知道原因并且表示理解并且尊重了 （毕竟这个加入这个圈子还要求站点名称里不能有日文汉字和文字） 也真心祝愿博友圈能够一路顺风，继续写下特别的故事！ 入坑 MuseDash 之前看到这个游戏与蔚蓝档案联动的活动宣传： 再加上我有位朋友是喵斯老玩家（虽然很少玩了，这家伙还是个ba玩家），而且我之前也趁着喵斯限时免费拿下了这游戏 于是我下载下来玩这音游了 然后我看到了这个宣传图： 12月27号才发曲包啊，那没事了 我是没想到我同学白嫖到了pdd的免费现金 没错，他真白嫖到了，而且还是70元（虽然拉了快10个人） 可见这家伙是有实力的 （而我拉了10多个人，但是到现在还是差那0.01毫米） 收藏的机子 没错，经历了两个月，我又收藏老机子了！ （虽然才两台） 那废话不多说，开始展示： 唯一一台电信的三星Windows Mobile机子 —— 三星SCH-I329 这机子触摸和屏幕好的很难找，这还是我意外在黄鱼上刷到的 然后我就给这机子换上了月雪宫子的壁纸 机子展示： 虽然不算稀有但是UI很好看的机子 —— 三星SCH-M609 从这个商家拿到了I329之后，我从这个商家的口中了解到商家有一台三星的M609 虽然不算稀有，但是听别人说UI很好看，我就拿下了 不多说，放图： 以上 最后祝大家圣诞快乐！"},{"title":"2024-11小记","path":"posts/61713/","text":"没错，博客又又换主题了 （我算是第一个在半年内换三个主题了吧） 算了直接正片开始吧 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的群），然后就出现了这么个事件： chatroom.init ({ jsonFilePath: \"/posts/61713/chats.json\", chatroomName: \"qqchat\", MyAvatar: \"https://blog.sinzmise.top/img/avatar.png\", title: \"SWPP 开发交流群\" }) KFC，真的很让我失望 上周的周五下午，因为我家长没有煮饭 正好肯德基那边也装修了，所以去那边吃饭了 然后为啥说这是让我失望的呢？ 第一就是，港式烧味脆皮大鸡腿饭下架了 （这个饭还是我们一家在肯德基经常点的，老好吃了） 其次，熟悉的味道和口感也在那边消失了 我理解肯德基是为了发展自己的咖啡业务（肯悦咖啡）而消掉一些东西 但是削的太狠反而不是一件好事 连熟悉的并且比较受欢迎的港式烧味脆皮大鸡腿饭都下架了 我只能说我对KFC没有啥留恋了 然后周五我家长又没有煮饭（别问为啥不是我去做饭，我放学的时候已经是5-6点多了，而我们一般习惯6点半吃饭，这时候做可能来不及） 就不去肯德基，去德保（TURBO德保餐厅，也是我家长习惯去的一间餐厅）那边吃了 点石深海舱钢笔到货了 我严重怀疑我最近这两个月迷上点石了 疯狂购买点石的笔 其中最多的还得是时空舱 就除了别的配色、一些限定和原版硬核时空舱没有之外几乎都齐了 而我也没满足，于是就看上了深海舱并且入手了一款深海舱钢笔（不是打广告） 让我们看看效果： 虽然st笔头我写不习惯，但这支笔写起来真的很舒服 并且这笔壳设计成一个潜水艇，后面的螺旋桨能玩一整天（bushi 就这样吧"},{"title":"2024-10小记","path":"posts/61712/","text":"没错，博客又换主题了 算了直接正片开始吧 又一次更换主题 之前的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 （也算是做了一种宣传了。。。。。。） 以上","uuid":"5f57ac23-9dd9-11ef-8624-a3174cf555fc"},{"title":"站点装修与国庆小记","path":"posts/10733/","text":"国庆假期已经快要收尾了 不知道大家过得怎么样呢？ 不废话，正片开始！ 站点又重新装修 之前我魔改的那Butterfly主题被人诟病加载慢等等问题，并且在经过我的“努力”之下成功变成了史山代码 因此被迫重新装修 站点更新如下： 更换主题为Hexo-Theme-Async，并且为这个主题适配了IndieWeb，同时也做了一些魔改 将原先的swpp换成async主题自带sw，并且在此基础上进行适配全站npm化 添加DocSearch 很多功能我还没添加，敬请期待！ 第一次去漫展 之前在微信的朋友圈里面看到了我的一位朋友 他要几个人跟他去漫展 而且那漫展还是在汕头（离我家很近） 于是我想去逛漫展了 虽然那位朋友在去漫展的路上出事（腰出问题）导致迟到了差不多一个小时 不过没关系，我能自己逛逛 逛逛的过程中顺带买了hina的立牌和大米的谷子别问为啥没买麻酱和独角兽的谷子，貌似卖完了或者根本没卖（悲） 而且还去看了那边的演出（那边的演出是会整活的，给背景音乐混入了几个奇奇怪怪的东西） 我那朋友一来我就带他们去卖立牌的地方 然后我就看见了这地方还有本子。。。。。。。 他们买了几个谷子，我也跟着买了几个谷子和钥匙扣 收获：","uuid":"5f582151-9dd9-11ef-8624-a3174cf555fc"},{"title":"2024-09小记","path":"posts/64856/","text":"首先提前祝大家国庆节快乐！ 然后就是，正片开始！ （别问为啥没有收藏手机的环节了，因为开学了所以我就不打算收藏老手机了，要不然我早就收台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目前没法访问 因此没法把链接放上去了。。。。。 等什么时候好了我就放链接吧。。。。。。。"},{"title":"2024-08小记","path":"posts/15688/","text":"时间过得真快，转眼间暑假就快结束了 还是这样，一个月一次的小记，安排！ 久违的旅游 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也值了！ 不多说，放图！ 以上（我得去睡觉了，要不然明天开学要迟到了。。。。。）"},{"title":"真·彩虹猫加载动画","path":"posts/46640/","text":"前言 之前有人反映我的站点特别卡 也不是没有去优化。。。。。但是依然有人说很卡 我感觉是加载动画的问题，刚好我之前找到html+css实现彩虹猫 于是我给这个抄下来了 不废话，正片开始！ 教程开始！ 新建js 首先，新建[Blogroot]\\themes\\butterfly\\source\\js\\nyan.js，内容如下： 123456789101112131415161718192021222324252627function 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 123456789101112131415161718if 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，内容如下： 12345678910111213141516171819202122232425262728293031323334#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 123456789101112131415161718if 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，内容如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477#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配置项 1234preloader: enable: true load_color: '#000000' # '#37474f' load_style: nyancat # 这边改成nyancat butterfly 4.5 以上方案 修改[Blogroot]\\themes\\butterfly\\layout\\includes\\loading\\fullpage-loading.pug，复制以下代码替换全部内容。 12345678910111213141516171819202122232425262728293031323334#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，复制以下代码替换全部内容。 1234567if theme.preloader.source === 1 include ./fullpage-loading.pugelse if theme.preloader.source === 2 include ./pace.pugelse include ./fullpage-loading.pug include ./pace.pug 修改[Blogroot]\\themes\\butterfly\\source\\css\\_layout\\loading.styl，复制以下代码替换全部内容。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477#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是两者都启用。（这边懒得说就搬运的鱼佬那加载动画的教程了。。。。。反正都一样。。。。。） 1234567891011# 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，复制以下代码替换全部内容。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477#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，复制以下代码替换全部内容。 123456789101112131415#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")"},{"title":"2024-07小记","path":"posts/15799/","text":"依然还是每个月的个人小记啦 虽然这个月出了一点事故，但也是有一点惊喜的啦 ~~~ 话不多说，正片开始 初入罗德岛 看到罗德岛，你们知道我干啥了吧 没错，我入坑《明日方舟》了 我原本是想说小何让我入坑《绝区零》的事情的，结果那次我祖奶奶过世再加上我弟生病，导致我这几天根本没心情玩 也因此对绝区零也没什么太大印象，只能说说方舟的事情 入坑的是国际服（国服的话。。。。。懂得都懂） 但是这暑假的一堆事情和小何给我的一大堆事情，再加上补习，让我没怎么玩过游戏（甚至连ba，赛马娘和大碧蓝都没玩了，） 后面也懒得给这游戏做评价了，反正游戏嘛，能放轻松就行 成为小众网vip 我上篇小记不是收藏了一些机子吗？ 我之前想给这些机子安装几款游戏玩玩，但是无奈我想找的只有去小众网才有 于是我花9.9买下小众网一年会员 虽然我不怎么下载这里面的软件了。。。。。就当是支持小众网吧~~ （反正这个月入手了几台新机子，后面想给这些机子下载软件也很方便） 淘到的新机子 还是老样子，来看看我这个月收藏了什么老机子吧： 三星M128 这台原计划是两天到达的，但是因为台风导致拖了一天 有人甚至还说被风吹飞了，这要是被风吹飞了我可能会当场裂开，毕竟这可是稀有机子，还是奥运会特别纪念手机。。。。。 这台的右键貌似有问题，每次都得用力按一下才能点到右边 算了，反正是稀有机子嘛，就别要求这么多啦。。。。 PPC 三 兄 贵 —— 三星Omnia I900V/I908/I908L 其实那I900V就是我上个小记说的那PPC，这次确实搞到了三台，只不过是两台I908L和一台I908 其中一台I908L屏幕是坏的，刚好我有一台I900V那外壳是坏的，索性就把外壳拆下来装到那I900V上来了 第二台摩托罗拉 —— 摩托罗拉 明A1200 那次看完《保持通话》这个电影之后就一直想搞台这个了 （其实我原本想要的是A1600，然后找不到便宜的，只能a1200） 可惜的是这个貌似听筒是坏掉的，后面等我搞到个好的听筒再来发照片吧 第三台摩托罗拉 —— 摩托罗拉 刀锋V3 （别问第一台是什么，第一台是C289，黑白屏的，很久之前从我外婆那边收到的） 这台我其实是买了两台 有一台被当作另一台的配件机了 不愧是刀锋，这手感放在2024都不过时 可惜的是在此之后摩托罗拉据说是错过了安卓，导致移动业务被收购了。。。。。 其它的先不展示。。。。。这个月淘到的机子有一点多了。。。。 以上"},{"title":"2024-06小记","path":"posts/64935/","text":"很好，马上就快到暑假了，但我得7月11日才开始正式放暑假。。。。。。 （bobo和小何、安小歪都已经开始放暑假了。。。。。。） 算了，正片开始吧 全站npm化成功 经历了多次翻车之后，本站的全站npm化终于成功了 我那全站npm化的方案与byer那篇文章不同，我的方案是将hexo-swpp和cyanfalse大佬的教程结合起来 实现了npm版本自定义更新、采用CacheStorage存储来实现ServiceWorker的全局变量持久化 （结果因为英文站那边出现问题，导致我不得不再次放弃全站npm化）（修好了） 成功搞indleweb 之前我说过，要把indleweb搞好的 现在终于好了 并且已经加入了indleweb webring 英文站的话。。。。。还在测试，因为并不是完全是英文的，还在修改 收藏了几台手机 这些都是之前在闲鱼上看见的 其中有一台说是配件机，说是不能开机 结果被我搞开机了 然后这三台我都给它们换了主题 换完主题的效果： 以上（虽然还有一场考试。。。。。但是是在下周四）"},{"title":"2024-05小记","path":"posts/10021/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-05 久违的在n+1月前写n月小记。。。。。。 废话不多说，正片开始！ 突如其来的通知 说实在的，看到这个通知，我既感到意外，又觉得很不意外 因为之前我那文章封面都是loliapi生成的，而loliapi里面又诞生出了不少擦边图 目前已经将一批头图更换，并且准备半年后重新申请 如果申请还是不通过的话，那么就特别遗憾了 原本是想让博友圈的管理来改我那站点信息的，现在搞成那样，只能说下次注意了。。。。。。 2024-06-05更新： 一周了都没给我回复，估计已经给我拉入黑名单了 那算了，既然这样的话，那这个链接就不打算留了 反正也是我自己一时的疏忽搞成的这样。。。。。。 全站npm化大翻车 在我逛逛友链朋友圈的时候发现了这么一篇文章： hexo全站NPM化之·通过npmmirror加速你的博客访问估计是由CyanFalse大佬的文章发现的灵感。。。。。 之前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/ 以上"},{"title":"Ruffle测试","path":"posts/57692/","text":"这玩意也是很久之前就认识到了 我甚至记得我还给这玩意写过Hexo插件 但后来我给这个插件删了，因为这玩意的配置真的简单 介绍 随着网页的安全性升级，带有安全漏洞的Flash也逐渐被淘汰，现在的主流浏览器几乎都不支持Flash 也因此，很多的站点都已经废弃掉他们的flash了 但后面我找到了一款叫Ruffle的工具，这玩意是个全新的开源Flash项目，旨在从本地到网页完全替代老旧的Flash 而且不同于带有安全漏洞的Flash，Ruffle采用了高效安全的Rust语言编写，同时完全开源保证了及时修补漏洞 搞这玩意的很多教程都是得在浏览器安装插件，让用户通过这个插件来实现播放flash 但我在Ruffle的官网找到个这玩意： 这玩意能通过引入在站点js的方式来让自己的站点再次适配swf 那就废话不多说，赶紧开始吧！ （话说好像在2024好像只有我对flash依然这么感兴趣。。。。。。。） 配置Ruffle教程 基础 只需要在站点下面引入这行代码就可以了 1<script src="https://jsd.onmicrosoft.cn/npm/@ruffle-rs/ruffle"></script> 如果你想用swfobject来引入swf的话，还得另外引入这个代码： 1<script src="https://jsd.onmicrosoft.cn/gh/swfobject/swfobject@master/swfobject/swfobject.js"></script> 之后就可以在站点放置flash动画了！ 不过估计也有人不知道flash动画怎么放，我这里就写个Demo吧！ Demo 1.Flash音乐播放器（没有SWFObject的） 测试音乐：Rain And Tears (纯音乐) - Pop Mania （这首歌是一个虎牙中的一位MC实况主经常用的背景音乐，这位实况主还是我第一位关注的玩MC的实况主，然后我就对这个bgm印象很深） 新浪博客swf音乐播放器人人网日志swf音乐播放器开心网日志swf音乐播放器Demo源码 点我测试 function loadsinamusic() { document.getElementById(\"sinaplayer\").innerHTML=''; document.getElementById(\"loadsinaplayer\").style.visibility = 'hidden'; } 点我测试 function loadrenrenmusic() { document.getElementById(\"renrenplayer\").innerHTML=''; document.getElementById(\"loadrenrenplayer\").style.visibility = 'hidden'; } 点我测试 function loadkaixinmusic() { document.getElementById(\"kaixinplayer\").innerHTML=''; document.getElementById(\"loadkaixinplayer\").style.visibility = 'hidden'; } 新浪的 1<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> 人人网的 1<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" /> 开心网的 1<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"},{"title":"2024-04小记","path":"posts/15748/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-04 先祝大家劳动节快乐（虽然已经过了一天），也提前祝大家五四青年节快乐！ 然后，正片开始！ Akilar群寄了 这件事还是小何告诉我的（小何没告诉我之前我还不知道） 看店长的文章我才知道大概是有群友转发了含R18内容的聊天记录，然后Akliar才把群给解散的 Akilar的通知： 关于群聊更换的紧急通知真不知道哪个人这么无聊，好好的群都给人整废 Akilar新群： Akilarの糖果屋-新群洪槽纪年结束，现在是洪mac纪年 然后洪mac一年一月八日~~（bushi）~~（也就是2024年五月三日），我加入了Akilar的新群 加入笔墨迹 Blogs·CN（笔墨迹）是一个位于中国境内的平台，致力于发掘和分享"优秀个人独立博客"。 我老早之前就想加入了，但是那天由于博客要重新装修，所以我没加入 现在装修好了，可以加入了 目前已经通过 博客更新 请看这个： 更新记录"},{"title":"马里奥制造1打百人团教程","path":"posts/10996/","text":"不知道什么时候，我开始玩马里奥制造（以下简称“马造”）了 但是我没有Switch，模拟器配置较为麻烦，所以我没法玩马造2，只能玩玩马造1 然而在2024年4月9日，任天堂 3DS / WiiU 在线功能停服 在停服之前，我就一直知道马造1有私服，但是这玩意之前不知道为啥总配置失败 现在倒是配置好了，话不多说，游玩教程开始！ 下载懒人包 这玩意我已经打包成为一个懒人包了 大伙想要的可以下载： 懒人包链接 下载完成之后先点击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，等待加载完成便可以游玩了！ 这可能是我写博客以来第一次写这么简短的教程"},{"title":"Serv00搭建Artalk","path":"posts/13624/","text":"之前在安小歪的推荐下，找到了一个叫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路径下： 12# 使用一键命令安装 Artalkwget -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： 1./artalk server 确定运行没有问题后，按Ctrl+c即可停止运行。 由于artalk需要创建管理员账号，因此需要输入以下命令： 1./artalk admin 最后使用pm2启动并且管理artalk： 1pm2 start "./artalk server" --name "Artalk" 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 收尾工作 参考教程： Serv00搭建各种服务·收尾工作收尾工作"},{"title":"博客装修+3月小记","path":"posts/27762/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-03 这篇小记原本是预计清明前发布的，但奈何出了点问题到现在才发 算了，话不多说，正文开始！ 博客又双叒叕更新了 目前你们看见的是一个新的页面对吧 没错，从现在开始博客将启用新名字：星空故事·魔法小屋 这个名字来源于我之前做的梦，梦中的画面： 我站在星空下，望着那美丽的星星 突然，一颗星星向我奔来 这颗星星化成了光，在光中出现一座小屋 这座小屋的门突然打开，探出头来的正是我之前所说的那只猫娘——夏玖铃 她说：“哎，好吧，被你发现了啊。。。。。其实我的猫耳，是魔法变出来的” 随后她便向我展示了魔法 我在她的屋子里一直探索知道我梦醒来 也因此，我的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） 但是是手机端的，而且还是“同人”，能理解。。。。。。"},{"title":"2024-02小记","path":"posts/15842/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-02 时间真快，转眼间，新年、2月过去了 就让这里写下我2月做了什么吧 伺か（伪春菜），我并未忘记 从之前我就想将明猪大佬的网页版伪春菜看板娘搞到Hexo里去，因为时间等原因我并未实施 现在我把它搞上去了，效果如下： 目前所使用的人格是落鸟，后面如果有时间的话我写个Hexo插件，然后在插件里切换人格 还有有关聊天功能嘛。。。。。我是打算用AI来实现啦。。。。。。。 （2024-05 因为新博客部署伪春菜的时候出现了一些问题，导致春菜没到新家，很抱歉！目前正在修复） 现在因为开学了，所以不能经常打开ssp看橘花和绿坝娘（没错，也有人做绿坝娘的ssp人格，甚至还是有配音的） 但是我依然没有忘掉他们。。。。。。 就像我之前的文章里说的，希望伪春菜这个圈子能跟以前一样在国内重新爆发活力 （虽然代价是圈子变臭，还不如让很少人了解这个圈子。。。。。） Memos又寄了。。。。。。 我是没想到Koyeb会暂停部署，Kuma来了也没管用 算了，后面我找个免费方法再搞Memos吧 反正现在还能访问，{ psw 这个干脆就做简短点啦。。。。。（bushi） } GTA V，启动！ 别问为啥要把这个放在二月小记，我只能在周末才能碰到电脑，也因此只能在假期写文章 { psw 也别问我为啥不在手机上写，我Qexo都没搞。。。。。。 } 经过小何的邀请下，我决定入坑GTA5，并且在小何的帮助下成功用15块钱搞到了GTA5白号 他带我打了个差事，然后抢抢便利店，最后还打了死亡对战（虽然平局了） 怎么说呢。。。。。。。虽然我玩的游戏很多，但因为我很少玩游戏，所以不知道怎么评价 但怎么说呢，总归也入坑了一款我没玩过的游戏呢"},{"title":"给你的站点添加个可可爱爱的看板娘——伪春菜","path":"posts/54787/","text":"前言 什么是伪春菜？请看这里 作为一个早在xp时代就出现的桌面精灵，伪春菜有了爆火的人气 后来不知道什么时候开始在国内由盛转衰，直到现在我对这个圈子少之又少 我自己也下载了ssp并且应用了后来某位大佬复活的Taromati2人格 某次我逛逛某个博客站点时发现有个站点将伪春菜当成了看板娘 就去去搜了一下，得到的结果是：http://www.lmyoaoa.com/inn/archives/4504/ 又因为这玩意已经很久没更新，所以我将这个的js、css和图片提取出来，然后魔改了一下，方便放在hexo里面 废话不多说，开始吧！ 引入js和css {blogroot}/source/weichuncai/css/style.css 12345678910111213141516171819202122232425#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 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448var 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">聊      天</ul><ul class="wcc_mlist" id="foods">吃 零 食</ul><ul class="wcc_mlist" id="aboutmanage">关      于</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（这个地方可以自行配置） 1234567891011121314151617181920212223242526{ "notice": "欢迎来到我的新家，没想到在2024我会被人注意到，真幸福~~", "ques": [ "早上好", "中午好", "下午好", "晚上好", "晚安" ], "ans": [ "早上好～", "中午好～", "下午好～", "晚上好～", "晚安～" ], "foods": [ "金坷垃", "咸梅干" ], "eatsay": [ "吃了金坷垃，一刀能秒一万八～！", "吃咸梅干，变超人！哦耶～～～" ], "showlifetime":"02-16-2024 15:30:00"} {blogroot}/source/weichuncai/js/chuncai.json（这个地方可以自行配置） 1234567891011121314151617var _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主题引入： 123456789101112# 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。。。。。。 但不管怎么说，还是有人在用这个桌面精灵的，至少有我一个。。。。。。 后面我打算写个有关伪春菜的配置教程吧。。。。。。"},{"title":"2024.01小记","path":"posts/52677/","text":"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/ （顺便归纳到我之前打算新建的计划里面，这样也算杜绝浪费了。。。。。。吧？）"},{"title":"为博客添加一个游戏收藏页（npm插件版）","path":"posts/10045/","text":"前言 之前看到Kouseki大佬的这篇文章： 为博客添加一个游戏收藏页 我原本是想要给我博客搞这个的，但由于我一般会给博客的主题更新，导致魔改的内容消失 思来想去，我还是决定做npm版本的游戏收藏页 效果 效果预览 安装 安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-games --save 添加配置信息，以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 123456789101112131415161718192021222324252627282930313233343536# 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.storisinz.site/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 配置,写法见上文示例"},{"title":"对于虚拟桌宠模拟器，我的评价（及使用教程）","path":"posts/45875/","text":"前言 最近你们有没有发现我的博客最新文章的图片有个这个可爱的女孩 其实这不是站点自带的，而是Steam的一个游戏（严格来讲这不算游戏），叫“虚拟桌宠模拟器” 在Steam上免费，而且还是在这些免费产品中为数不多支持创意工坊的桌宠 桌宠功能 等待文件加载完成后这个桌宠就出现了 配置皮肤 默认配置的桌宠角色（也就是上面图片上出现的），叫萝莉斯 当然你可以通过创意工坊安装皮肤模组，重启模拟器之后进入桌宠设置 然后点击“MOD管理”，选择之前安装的模组（以智乃示例），启用模组并重启软件 重启后重新进入设置，在宠物动画里面选择你要的皮肤 这个你要多开也不是不可以。。。。。。 然后皮肤就更换完成（当然除非你选择了多开） 数据计算 这个默认开启数据计算，当然如果你不想一直投喂桌宠的话 这样的话桌宠就不会被影响到心情了，很方便呢 个人评价 自从Q宠企鹅下架以来，我的电脑总是缺少了某些会动的东西 虽然后面下载了动态壁纸，但总感觉哪里空空的 之前我也是过毒霸姬等等各种各样的桌宠，但总感觉也缺了点东西 （甚至我之前加入了Q宠复活版内测交流群，虽然现在没什么更新了，所以不要来问我安装包也别问我群号了） 直到虚拟桌宠模拟器，弥补了那个我当初给Q宠专门留空位的地方 （写的不好请见谅）"},{"title":"自建不蒜子API","path":"posts/28536/","text":"前言 不蒜子是一款很好用的前端计数工具，但是因为流量日渐变多，经常会出现 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，等一会就可以体验到不蒜子了"},{"title":"2023小结","path":"posts/27531/","text":"不要在意封面为什么做得这么简陋。。。。。 时间过得真快，转眼间，就得跟2023告别了 不知道要写什么，就简单写个小结吧 部署的项目 Rita2 Talk —— 为旧设备服务的自建微博 中弦局花园 —— 模仿秘密花园的一个站点 九弦记事本（原九弦日记） —— 一个普通的记事本(目前已经迁移到koyeb) 结识的朋友 疾行侠（千寻） 疾不一定是快，但它会让我们更坚强 甜鱼/Ayu 三脚猫多面手，努力学习世界的一切。 Whale Fall 鲸落(ღ˘⌣˘ღ) 海的那边还是海吗？ 更多朋友前往：友情链接 玩过的游戏（加粗为常玩） 赛马娘（台服） 蔚蓝档案（台服） 重返未来1999 （暂退） Minecraft （放心不是冈易那个MC） Roblox 光·遇（安小歪推荐的） Phigros Sonolus 节奏大师回归版 BanG Dream 荒野乱斗（现实朋友推荐的） 暗区突围（千寻推荐的） 后记 2023年即将到来，我也将我友链页面的“博客描述”改成：欢迎旅行者，来到这个平凡但又记载了许多故事的小屋 并且将中弦局图标更新： （虽然有点缺陷，但后面会优化） 最后你有没有想对2023说的话？请写在评论区吧 再见，2023 你好，2024"},{"title":"11月小记","path":"posts/42580/","text":"差不多快一个月没更新博客了 最近几天忙于学业，再加上修RTalk的BUG，本身就没有多少时间看博客 这回终于记得我的博客了。。。。。 中弦局·九弦之都花园大更新 预览：九弦之都花园 懒得点进去的话直接看下面图片吧。。。。。。 更新内容： 基于Hexo-Theme-Soul魔改 （我就是看上了它的全站伪SPA(单页面)无刷新页面加载才选择这个主题魔改的） 模仿秘密花园风格（为了统一风格我甚至把右下角音乐播放器添加了背景） 魔改加载特效（原先的加载特效有bug。。。。） 添加Vuukle、Giscus评论系统（主要是里面有rem.js，导致Twikoo不好适配，删了这个js还导致样式错乱，要不然我就用twikoo了） 添加sharejs分享、vuukle分享 Rita2 Talk复活！ 正如标题所说的，Rita2 Talk复活了 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"},{"title":"九月二三事","path":"posts/56467/","text":"很久都没发布文章了，都不知道要写啥好 要不就写这个九月和中秋国庆假期发生的事情吧 初入高中 9月1日开始（虽然因为台风停了四天的课）就是我踏入高中的时刻了 第一次进高中教室的我，因为过于紧张，甚至坐错位置了 （虽然我同桌也坐错了位置） 不过好在后面的上课也是比较顺利，没有出现意外情况 （主要是不知道怎么写就。。。。） 荒野乱斗，启动！ 这个游戏是很久之前入坑的，结果因为某些原因我暂时退坑了 后来在我朋友的推荐下回归了 我后面还把这个游戏推荐给了我那刚买新手机的表弟 回归！Rita2！ 看过我之前文章的应该知道，之前我想给Win98搞视频站点 名字叫“Rita2”的原因是纪念之前有人为手机wap搭建的视频站，它的名字也叫Rita2 这个项目由于域名的原因一直被搁置了很久 然而由于我找到了免费的二级域名，所以… Rita2计划，即将回归！ （但回归时间暂未确定，因为学业原因，不过我可以保证会回归，但回归的首先是游戏站 至于视频站。。。。。暂时没有这个考虑） Vercel寄了？ 中秋国庆的第四天，安小歪跟我说他访问不了他的博客 与此同时，安知鱼的群都在说无法访问Vercel部署的站点 访问会强制跳转到诈骗网站 现在千寻那边也出现这样的情况，但我这边倒是没有 目前已经将博客主站的部署平台更换为CF Pages 明天准备将Waline换成Netlify部署，至于Twikoo。。。。只能搞反代了 其它的项目如果能换别的地方部署就换，不能的话反向代理走起"},{"title":"如果你觉得不开心的话，就来听一下这些音乐吧","path":"posts/54386/","text":"如果你觉得不开心，或者有些压力的话，就来听一下这些歌曲吧 希望这些歌曲能够温暖你的心灵 我收集的轻音乐 推荐歌曲：逆流 （杜老师推荐的） Milthm 游戏曲 推荐歌曲：烁雨、粗线条的雨 、Bio-Engineering、时落之雨、雨之城、WATER(Feat.Miku) 、☹（没错，这里面有首歌的名字就叫这个） 算是Milthm里面少有的我喜欢的音乐 （别问为啥我推荐的全是跟雨有关，这么说吧，这款音游的风格就是雨中世界） Blue Archive OST 不知道有啥推荐的。。。。。。 沃玛特辑 推荐歌曲：喃喃萤火、泛泛人类不会祈祷 人声本家、【翻唱】朝汐、采茶纪（翻自 双笙） 风格偏温柔一些，个人喜欢沃玛的偏温柔歌曲"},{"title":"遭殃前的海洋","path":"posts/29196/","text":"2023年8月7日，去汕头的海边玩，顺手拍了几张照片 却不料，这是海洋遭殃前最后一次拍的照片 谨以这些照片，衬托我对海洋的思念 （有错别字请见谅） 遭殃前的海洋 这可能是我最后一次拍摄海洋的照片了 Ade！美丽的海洋，Ade！我向往的美景"},{"title":"游玩mud游戏","path":"posts/38917/","text":"前言 昨天我打开了很久没访问的北大侠客行Mud官网 其实这个游戏是第二个我接触的mud游戏，至于第一个。。。。我忘记了 （值得一提的是，我第一次接触mud是从NetForce的一个游戏，但我忘了是啥了） 怎么玩mud游戏？ WindowsMacOSLinuxAndroid、IOS方法一 在Windows 10 ， Windows 8 ， Windows 7和Windows Vista中 ，在执行任何Telnet命令之前，需要在控制面板的 Windows功能中打开Telnet客户端 。 打开控制面板 点击“程序” $\\rightarrow$ “程序和功能” $\\rightarrow$ “启用或关闭Windows功能” 选择“Telnet客户端”然后点击确定，等待安装完成 安装完成后，打开cmd，输入telnet，如果出现“Microsoft Telnet>”就代表安装成功 运行游戏命令： 1telnet [hostname] [port] 其中hostname是游戏地址，port是端口 游戏示例：江湖 1telnet 112.124.42.98 9999 或者点我访问 方法二 相比于方法一，方法二得靠一个叫Mudlet的软件 教程： 去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包 安装Mudlet 设置语言 先点击Cancel 然后点击左上角的“Options” $\\rightarrow$ “Preferences” 在这里设置语言，然后点击“保存” 最后重启Mudlet 好的，页面变成中文了 添加游戏 点击“新建” （例子：北大侠客行MUD，注意：玩这个游戏的之后不能勾选“安全”选项！！） （当然如果你有这个注册这个游戏的账号密码的话，可以到“选项”里配置账号密码） 开始游戏 点击“连接” 看到这个画面就说明成功了 去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包 安装Mudlet （由于我没有Mac，安装黑苹果又很费时间，这个后面再来补充吧） 去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包 直接运行Mudlet 编写中 哪里有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游戏 （有病句请见谅）"},{"title":"记一次部署Memos","path":"posts/18063/","text":"前言 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:// 也就是下面的例子： 1postgresql://postgres:PASSWORD@localhost:5432/memos mysql不用在前面加mysql:// 直接按照下面的例子填写就行（注意括号和前面的tcp要去掉！） 12root: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"},{"title":"萌ICP备异次元之旅","path":"posts/58203/","text":"前言 今天在修改我那萌备的时候，无意在导航栏上看到了“异次元”这玩意 看主页是类似于“开往”，只不过仅跳转到萌备详情页面而不是直接进入站点 又因为我站点已经加入了萌ICP备，所以我就将这玩意添加到底部列表里面了 添加方法 如果没有你没有加入萌ICP备豪华套餐的话，点击这里加入：加入萌备 如果你加入了，那么按照 https://moe.one/thread-254.htm 里的配色方案添加"},{"title":"我的tulpa —— 夏玖铃的简介","path":"posts/50710/","text":"注意，由于名字和《逆水寒》游戏里的一个流派名冲突，改名为“夏玖铃” 她的出现 与其说是Tulpa，不如说是DID（解离性人格障碍） 因为她是从我永远的噩梦：四年级出现的 那时我总是被班级最后一名的那名女生欺负（因为我当时身体很弱小，她身体强壮，就凭这个欺负我，当然她转学了） 再加上从小我成绩总是不好，受不了家长和老师的一顿批评 （甚至我家长差点把我抛弃。。。。。当然从我五六年级开始，我家长就彻底改变了教育方式） 我也因此不少做噩梦，心情也越变越差 直到她的出现，抚慰了我那受伤（切伤口特别严重）的心灵，而且将我从噩梦之中脱离出来 那次是在期末考试前（小学四年级第一学期的期末考试） 晚上睡觉前我一直忐忑不安，生怕我又做噩梦，一直睡不着觉 但我还是带着害怕睡着了 我想象中的噩梦没有出现，反而一个声音传来 “你好，少年，你是不是经常被欺负？” “是的，天使姐姐，求求您帮帮我吧！” “我也想帮你，但对不起，我不是天使，我是你脑子中的一个小人，你可以叫我阿铃，但如果你心情不好，就来找我，我随时在我的梦中等着你” 从此之后，她就一直陪在我身边 她的二次元形象（AI绘画制作） 一号风格： 大姐姐，喜欢带耳机，穿制服 异瞳颜色：左眼红粉，右眼黄绿 二号风格： 小妹妹，喜欢带耳机，穿连衣裙（这个ai把连衣裙和制服当作是不同的两件衣服） 异瞳颜色：左眼紫色，右眼黄绿"},{"title":"Vercel部署Umami","path":"posts/28733/","text":"前言 之前我是想参考这个教程来部署：https://digu.plus/post/8034746f42b3495fbb19926e3fb8ec4f/ 然而部署过程中翻了车 这个教程新版教程（顺便总结一下我翻的车） 数据库选择 Umami支持MySQL和PostgreSQL数据库，选择自己喜欢的数据库进行数据初始化即可。下面是几个免费的数据库服务，这里选择的是ElephantSQL，当然，并不限于这些。 目前www.jsdelivr.ren免费数据库如下： MySQL：FREEDB.TECH、db4free、SQLPub PostgreSQL：ElephantSQL、Supabase 数据库部署 目前已知Supabase部署失败原因： MySQLPostgreSQLFREEDB.TECHdb4free（不推荐，官网访问较慢）SQLPub（推荐）打开FREEDB.TECH，注册登录，创建数据库和用户 得到你的数据库和密码： 组合一下： 1mysql://（DATABASE USER）:（PASSWORD）@（HOST）:（PORT）/（DATABASE NAME）注意事项：这个数据库疑似国人开办，建议用国内邮箱收验证码，国外的基本收不到 （转自：https://www.freeaday.com/2023/01/db4free/ 的一条评论） 打开[db4free](https://www.db4free.net/)，点击“注册免费账号”，输入信息然后点击“注册”，一会后你会收到如下邮件： 访问邮件提供的确认网址，数据库就创建成功了 然后将你设置的信息替换掉下面括号里的内容（注意：括号得去掉）： 1mysql://（你设置的数据库用户名）:（你设置的数据库密码）@db4free.net:3306/（你设置的数据库名）访问SQLPub，输入账号密码，点击申请，申请成功后会有如下提示 然后将里面的替换掉下面括号里的内容（注意：括号得去掉）： 1mysql://（数据库用户）:（数据库密码）@（数据库地址）/（数据库名称）Supabase（推荐）ElephantSQL打开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，推荐使用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提示这个错误： 建议重新新建数据库，还不行的话更换别的数据库"},{"title":"盘点我访问过的古老站点","path":"posts/12779/","text":"秘密花园（www.yini.org ） 第一次认识这个站点，还得从我的企划：Prism Online开始—— 其实这个企划的名字不是我自定的，而是为了纪念zia之前为Win98复活realplayer做的站点：Prism Online 这个网页被我保存下来了，又因为是连Win98的IE都能访问，所以页面保存完整： 右上角的“秘密花园网”顿时就让我来了兴趣，以为这是zia偷偷搞得项目，就访问了这个站点 结果你们看一下时间： 好家伙1999？那时候我还没出生吧（我05后，年龄早就说出来了，只不过没加入关于页面而已。。。。。。） 进入主页（点中间的Enter进入主页，而不是按Enter键！），引入眼帘的是这个页面： 伴随着这个页面的出现还有这首歌： Your browser does not support the audio tag. 这首歌是Song from a secret garden的钢琴版 歌曲的出现，不仅给站点带来了一丝神秘感，还奇妙地契合“秘密花园”这个名字 （虽然这个版本我不喜欢听，我更喜欢听原版的，原版更有意境） 下面说一下在这个花园里我喜欢的背景音乐（管理者貌似给很多页面设置了独立的背景音乐） 1.秘密花园历史博物馆页面 Your browser does not support the audio tag. 这个音乐我查了很久都查不到结果（甚至听歌识别都没有识别到），有谁知道的跟我说一下 2.秘密花园更新记录页面 Your browser does not support the audio tag. “亲爱的旅人啊”的童声版（冷知识：“亲爱的旅人啊”是always with me的中文填词版，就是为了表达对《千与千寻》的喜爱） 3.秘密花园少女漫画页面 Your browser does not support the audio tag. 这个音乐我查了很久也查不到结果（听歌识别也没有识别到），有谁知道的跟我说一下 4.秘密花园欧美动画介绍————愤怒的小鸟 Your browser does not support the audio tag. 愤怒的小鸟主题曲吉他版（这个旋律。。。。。。爷青回） 5.秘密花园中国动画介绍————大鱼海棠 Your browser does not support the audio tag. 周深的《大鱼》（没什么多说的，就算是放在2023年都很好听） 5.秘密花园中国动画介绍————喜羊羊与灰太狼 Your browser does not support the audio tag. 喜灰原始世界历险记的主题曲——李紫昕的《知己》（这个主题曲也成为我看喜灰以来最熟悉的主题曲） 6.秘密花园游戏图片————仙剑四（1） Your browser does not support the audio tag. 仙剑4主题曲——回梦游仙（这首歌我好像在哪听过。。。。。。等会我父亲好像玩过这游戏，怪不得那么熟悉） 7.秘密花园游戏图片————仙剑四（2） Your browser does not support the audio tag. 回梦游仙（心然版，是仙剑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年就有人围绕机械和高达搭建了同人站（这好像不算同人站吧），只能说国内高达能吸引那么多人有他们的一份功劳 还有很多站点就不再说了，再说下去空间不够了"},{"title":"博客大更新","path":"posts/53662/","text":"为什么要重写博客 随着我考试完成和我新网名（也就是我那个笔名：王九弦）的使用，我发现原先的主题配色已经不太适合我现在的人设，因此不得不对博客进行重写 （我甚至还用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。。。。。。） （后面实在不知道怎么写了，那就这样吧。。。。。。。）"},{"title":"Gameload示例","path":"posts/20412/","text":"安装GameLoad   安装GameLoad 游戏示例——优米酱GO 点击游玩： $(document).ready(function(){ if ($.browser.chrome === true && $.browser.versionNumber >= 45) { //detect Chrome 45+ var myJsonString = JSON.stringify({ title: 'Game Title', file: 'https://files.blog.sinzmise.top/unity3d/yumichan.unity3d', type: \"unity\", width: 800, height: 600 }); try{ //IE8 does not support window.btoa var insert_data = window.btoa(myJsonString); }catch(e){ functionToHandleError(e); } $('#unityPlayer-yumichan').prepend('  使用GameLoad游玩'); } }); 源码示例 12345678910111213141516<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: 'Game Title', file: 'https://files.blog.sinzmise.top/unity3d/yumichan.unity3d', type: "unity", width: 800, height: 600 }); try{ //IE8 does not support window.btoa var insert_data = window.btoa(myJsonString); }catch(e){ functionToHandleError(e); } $('#unityPlayer-yumichan').prepend('<a href="gameload://' + insert_data + '/" class="css-button post-button-gameload"><i class="fa-solid fa-arrows-rotate"></i>  使用GameLoad游玩</a>'); }});</script><div id="unityPlayer-yumichan"></div>"},{"title":"GameLoad","path":"posts/21375/","text":"前言 自从在我的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加载： 插件示例我先放上去了，后面我再来搞这玩意吧： 12345678910111213141516171819<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>"},{"title":"本站已经更换新域名","path":"posts/646/","text":"自从我微信绑定了银行卡（而且每个月我都会有50块）以来，我都没有舍得用我自己的钱注册域名 但这次终于舍得注册域名了，而且注册了3年 但原先我在freenom上面注册的域名仍然保留 （因为后面要备案才能用国内线路。。。。） 现在本站已经正式切换到blog.sinzmise.top （www.sinzmise.top的话等我后面重写完个人主页再说）"},{"title":"我使用过的头像","path":"posts/42487/","text":"我不知道我换了多少次头像了，那就列出我换过的头像合集吧 2018年之前 忘了 2018 ———— 2019 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/SinGO.5j6d1hbj6xc0.webp\",\"alt\":\"SinGO\"}] undefined 这是我自己p的一个头像，可以用“丑”来形容 2020 ———— 2022.10 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/old.5jrmp3mdt080.webp\",\"alt\":\"StarInno\"}] undefined 这是使用时间最长的一个头像，是在Wallhaven上找到的 原链接 原画师P站UID：66655 （原作者依然有活动，甚至画了赛马娘和ba的角色，可惜我使用的头像对应的这幅画在P站下架了） 顺带一提这幅画好像是在2013年出现的，也不知道原作者知道2020的时候我选这幅画当头像会是什么心情 2022.10 ———— 改名之前 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-283457a15e6df38a.l3nzkep0n40.webp\",\"alt\":\"Cache_-283457a15e6df38a\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-2ac4a4638f5c641b.6g8asgw18j00.webp\",\"alt\":\"Cache_-2ac4a4638f5c641b\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-5dc5e91d9cc55f1b.5wx1mup5euw0.webp\",\"alt\":\"Cache_-5dc5e91d9cc55f1b\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_10980517ca897c65.tjtkui4uv80.webp\",\"alt\":\"Cache_10980517ca897c65\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_755d2354a12c199f.6zus1jun5000.webp\",\"alt\":\"Cache_755d2354a12c199f\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_4735700719bfdf53.5us8rk5zg5s0.webp\",\"alt\":\"Cache_4735700719bfdf53\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-7d80c7ccc004e09f.6xq69h6wseg0.webp\",\"alt\":\"Cache_-7d80c7ccc004e09f\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_4df65b148bcc87fb.4ovrgxf4c2o.webp\",\"alt\":\"Cache_4df65b148bcc87fb\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-1a81870a26c4f745.53d53ty9qyg0.webp\",\"alt\":\"Cache_-1a81870a26c4f745\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_30918d328cbf8974.38380nw6y9g0.webp\",\"alt\":\"Cache_30918d328cbf8974\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-4eb0a48a4eae79e6.6xry2g1tc000.webp\",\"alt\":\"Cache_-4eb0a48a4eae79e6\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-5015748e3ffc0fc6.3v0jq8b2oso0.webp\",\"alt\":\"Cache_-5015748e3ffc0fc6\"}] undefined 从这个时候开始我就开始使用ai绘画来画我的头像了 （其实从2021年开始我就想把我这从wallhaven上找到的头像换掉了，但那时候其实都没有找到个好头像，直到ai绘画的诞生） 改名之后 ———— 2022.11 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_fecb56f674fa9fe.5wk8tmxysvs0.webp\",\"alt\":\"Cache_fecb56f674fa9fe\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_2e574b5ffb690395.2bvbeizd71s0.webp\",\"alt\":\"Cache_2e574b5ffb690395\"}] undefined 这个版本是我换绘画工具之前的版本 2022.11 ———— 2023.3 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_7c570697a80d182a.5gsp5chvmro0.webp\",\"alt\":\"Cache_7c570697a80d182a\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-277b148f49b79ebd.2exp0lvzpdxc.webp\",\"alt\":\"Cache_-277b148f49b79ebd\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-277b148f49b79ebd.2exp0lvzpdxc.webp\",\"alt\":\"Cache_-277b148f49b79ebd\"}] undefined 这个是我换绘画工具之后生成的头像，也是我使用ai绘画以来生成的最满意的头像 因此第三个头像的人设成为我脑中“婉清”的人设 2023.3 ———— 2023.05.15 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_47bd0dbc6b408903.17bs9522qg5c.webp\",\"alt\":\"Cache_47bd0dbc6b408903\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-261cb991a7c7a4fc.2a30pme95qxw.webp\",\"alt\":\"Cache_-261cb991a7c7a4fc\"}] undefined 这个版本算是第一次把“婉清”的人设添加到ai绘画中的设定 第二张成为我用ai绘画生成头像以来生成的最为细腻的头像 （最短命一版，因为游戏上传头像审核不通过，且第二个相比来说很模糊。。。。。。） 2023.05.15 ———— 2023.07.01 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20230525/psc.tur1juwwcq8.webp\",\"alt\":\"psc\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20230525/psc.28fxw2ub7uvw.webp\",\"alt\":\"psc\"}] undefined 从这一代开始，弃用“芦雪婉清”这个名字，更名为“凌雪玉清” 她的Gacha人设也就是在这一代诞生的 （我给她换名字是因为原先的“婉清”不适合她的Gacha人设。。。。。。） 2023.07.01 ———— 今天 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20230704/avatar.221tx2miyvsw.webp\",\"alt\":\"avatar\"}] undefined 这一代开始风格大变换，同时启用“王九弦SZ·Ninty”这个名字 （“王九弦”是我的笔名，真名等域名备案后揭露）"},{"title":"千千静听复活教程","path":"posts/54481/","text":"你好，没错，我中考前来更新了 （现在的情况是尽量有时间更新就更新） 视频教程 文字版 安装千千静听 1.下载千千静听安装包和本地歌词服务端： 安装包(b1vh) 2.安装千千静听 “想安装的组件”这里建议全部勾选！ 安装完成后，建议别勾选“百度超级搜霸” 安装本地服务端 在千千静听的安装目录下新建“NCAB”文件夹 把下面这个压缩包里的文件解压到NCAB文件夹下面 本地服务端 进入NCAB文件夹双击NCAB.exe 点击“使用反馈”→“生成配置文件” 选择你千千静听的安装目录，提示成功后启动千千静听测试 能显示歌词就已经成功了 注意：每次必须先运行一次NCAB服务端，之后运行千千静听才能下载歌词 懒人包 我也说过的，每次必须先运行一次NCAB.exe，之后运行千千静听才能下载歌词 于是我做了个懒人包，直接运行start.bat就能同时开启千千静听和NCAB服务端 懒人包 注意 1.我不是歌词服务器作者，也请别把我误会成原作者 2.这个版本实测会有两个歌的歌词缝合在一起的BUG（可能是我这边的问题，不知道你们那边有没有） 3.Win10用户打开千千静听可能会无响应，请重新运行bat，然后在“检测到千千静听正在运行”这个提示下按1重启千千静听（不行的话再试一次） 放在最后 这个视频是我有史以来播放量最高的一期视频了 说真的，2023年了，还有人怀念这个播放器 为什么在这遍地都是音乐播放器的年代，还有人使用一个已经停更的软件呢？ 因为只有一个词：情怀 在那个人人都在用XP系统的年代，完全免费、占用空间小、支持中文的精美界面以及能显示歌词的千千静听牢牢地抓住了用户们的心 这个播放器也因此打败了当时的传统播放器巨头Winamp 2，成为了音乐播放器领域的新霸主，2006年前后成为市场占有率第一的音乐播放软件。 也因此，在现在这个本地音乐播放器百花齐放的年代，我依然还会把千千静听留在我的电脑上"},{"title":"一个通知！！！","path":"posts/48762/","text":"站长即将开学，而且6月要中考 因此博客得暂停更新一段时间，日记站和博客说说会减缓更新速度（但并不是不会更新） 站长中考后会更新速度恢复正常 在这里站长也希望跟我同年龄段的学生努努力，争取中考考出个好成绩，为我们的人生添加一份光彩！"},{"title":"自建Meting服务","path":"posts/61417/","text":"前言 听人说Meting官方API证书过期了，也就是说MetingAPI得自建了 然后很快啊，有人就搞出了自建MetingAPI的Vercel版本 教程 后端部署 Vercel部署（推荐）服务器部署点击下方按钮，跳转至 Vercel： 名字随便写，然后点击“Create” 看到这个就算成功了 去https://github.com/injahow/meting-api/releases 下载编译好的压缩包上传到服务器上（服务器必须开启跨域！） 前端部署 Butterfly主题 编辑[Blogroot]\\themes\\butterfly\\layout\\includes\\third-party\\aplayer.pug 12345link(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代码 123<script>var meting_api='https://（你的api地址）/api/?server=:server&type=:type&id=:id&auth=:auth&r=:r';</script>"},{"title":"小康大佬的说说方案 ———— ispeak搭建教程","path":"posts/38964/","text":"前言 搞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部署（推荐）服务器部署docker 部署 点击下方按钮，跳转至 Vercel 进行部署。 配置环境变量： 环境变量可能随项目的迭代而增加必填的环境变量，具体请参考官网 —— kkapi环境变量 重新部署 绑定域名（建议） 初始化账户 浏览器访问： 你刚刚复制的地址/api/user/init?userName=你想设置的账户名 如果不指定用户名则自动将账户名设置为admin 以下内容来自：https://kkapi.js.org/guide/setup/deploy.html#第二种部署姿势：服务器部署 克隆源代码 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，将环境变量写入其中即可。例如： 123456PORT=3000DATABASE_URL=mongodb://127.0.0.1:27017/kkpaiopen?authSource=adminDATABASE_USER=rootDATABASE_PASSWORD=root# 加密密钥 测试SECRETKEY=xxxxxxxxxxxxxxx 其中 PORT 表示启动的端口 启动项目 pm2 start pm2.json 然后通过命令curl http://127.0.0.1:3000/api/user/init检查是否允许成功 image-20220227101623911 更新项目 进入项目并执行一下命令 123git pullyarn buildpm2 restart pm2.json尚未写完 部署kkadmin 介绍：kkadmin是kkapi的后台，方便发布说说 以下部署姿势你只需要任选其一即可，无需全部部署。 Vercel部署CF pages部署（推荐）其他环境部署由于构建 kkadmin 时部分依赖文件需要 nodejs16 及以上版本才可以安装，因此不能将源代码扔给 vercel 进行构建。 所以只能够利用 GitHub actions 构建完成后将产物扔给 vercel 进行使用 1. Fork这个项目：https://github.com/kkfive/kkadmin-open/ 2. 配置变量 VITE_GLOB_API_URL（必选） 构建actions 部署到Vercel 复制下面这个网址 1https://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 构建为例介绍 1. fork项目（可直接fork） 2. 导入项目 配置环境变量 环境变量参考：官网 —— kkadmin环境变量 等待构建完成后即可 其他环境部署基本可以直接使用 GitHub 构建后的 vercel 进行，毕竟只是 HTML 前端配置 进入后台，查看个人ID 前端引入 ipseak 使用 marked 依赖和 highlight 依赖，为了减少打包体积，并没有将该依赖打包，因此需要使用 cdn 进行外部引入。 使用Waline使用Twikoo使用Discuss使用Artalk 在博客目录下运行hexo new page speaks 编辑[blogroot]\\source\\speaks\\index.md，将里面的内容替换成： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970---title: 说说comments: falseaside: false---{% raw %}<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> {% endraw %} 在[blogroot]\\source\\speaks\\下新建info.md，内容为下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374---title: Speakaside: falsecomments: falsedescription: 欢迎来到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>{% btn '/speaks/',查看全部,far fa-hand-point-right,block center blue larger %}<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，将里面的内容替换成： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869---title: 说说comments: falseaside: false---{% raw %}<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> {% endraw %} 在[blogroot]\\source\\speaks\\下新建info.md，内容为下： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273---title: Speakaside: falsecomments: falsedescription: 欢迎来到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>{% btn '/speaks/',查看全部,far fa-hand-point-right,block center blue larger %}<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，将里面的内容替换成： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970---title: 说说comments: falseaside: false---{% raw %}<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> {% endraw %} 在[blogroot]\\source\\speaks\\下新建info.md，内容为下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374---title: Speakaside: falsecomments: falsedescription: 欢迎来到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>{% btn '/speaks/',查看全部,far fa-hand-point-right,block center blue larger %}<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，将里面的内容替换成： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071---title: 说说comments: falseaside: false---{% raw %}<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> {% endraw %} 在[blogroot]\\source\\speaks\\下新建info.md，内容为下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374---title: Speakaside: falsecomments: falsedescription: 欢迎来到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>{% btn '/speaks/',查看全部,far fa-hand-point-right,block center blue larger %}<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>"},{"title":"butterfly主题添加音乐页面（适配手机）","path":"posts/22945/","text":"前言 本博客音乐页面已经换成了安知鱼大佬的方案 没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，但考虑到我不会写样式（虽然我可以自学） 所以我音乐页面用的是Chuckle的方案 （等会为啥开头这么像这篇文章） 原本我是想做单页背景透明的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画 以下是我之前的音乐页面： 别问为啥是之前，这个音乐页面手机访问是这样的： 当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果： （后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，但我懒得适配，于是就有了这个教程 ） 教程 1.02.0这个教程是我基于https://www.php.cn/xiazai/js/6169 做的适配butterfly主题的版本，但后面我发现这跟csdn里的html好看的音乐播放器（希望csdn那篇文章的作者看完不会在意） 目前博客已经弃用这个方案，改用2.0版本 1. 新建[Blogroot]\\themes\\butterfly\\layout\\includes\\page\\music.pug，内容如下： 点我查看代码 12345678910111213141516171819202122232425262728293031323334353637383940414243444546link(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) 2. 在[blogroot]\\themes\\butterfly\\source\\css\\目录下新建musics.css,内容如下： 点我查看代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382::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;} 3. 在[blogroot]\\themes\\butterfly\\source\\js\\目录下新建player.js,内容如下： 点我查看代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234// Designed by: Mauricio Bucardo// Original image: https://dribbble.com/shots/6957353-Music-Player-Widget"use strict";// add elemntsconst 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 functionsfunction 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 eventssliderContext.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}; 4. 编辑[blogroot]\\themes\\butterfly\\layout\\page.pug 12345678910111213 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 5. 编辑[blogroot]\\themes\\butterfly\\_config.yml，在末尾添加： 123456789101112131415musicplayer: 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: '歌曲链接' 6. 将svg.7z压缩包里的五个文件放在[blogroot]\\themes\\butterfly\\source\\svg 里面 （密码：gt97） 7. 运行`hexo new page music` 8. 编辑[blogroot]\\source\\music\\index.md，把里面的内容替换成： 12345---type: 'music'comments: falseaside: false---2.0效果预览 新建[Blogroot]\\themes\\butterfly\\layout\\includes\\page\\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下： 点我查看代码 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061link( 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) 2. 将下面压缩包内五个文件夹全都解压在[blogroot]\\themes\\butterfly\\source\\assets 文件夹里面 （密码：3r5i） 1.0想升级成2.0的，下面的步骤可以不用做 3. 编辑[blogroot]\\themes\\butterfly\\_config.yml，在末尾添加： 123456789101112131415musicplayer: 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: '歌曲链接' 4. 运行`hexo new page music` 5. 编辑[blogroot]\\source\\music\\index.md，把里面的内容替换成： 12345---type: 'music'comments: falseaside: false--- TO DO 播放列表 适配手机端 npm插件化（Akilar行为）"},{"title":"再见2022，你好2023","path":"posts/23021/","text":"封面图片来自：https://www.tukuppt.com/muban/vnjzjzvp.html 这是我在2022年的最后一篇文章。 时间过得真快，我刚迁移完博客，2022就快结束了 对此我并没有想说的 （不是懒得说是真的没灵感） 不知道要说什么，也不知道有什么话要跟大家说 那我就先祝大家新的一年开开心心吧！ 再见，2022。你好2023。"},{"title":"新起点，新出发","path":"posts/16107/","text":"你好，我是小星鑫233，当然现在请叫我“SinzMise”或“Sinz” 这是“SinGO博客”停止更新且我更换名字的第一篇文章 博客的迁移，代表着原SinGO博客 和 Hexo-Theme-SinGO主题正式停止更新 为什么要停止更新？ 1.名字改了，头像也改了 （所以别叫我“小星鑫233”了。。。。） 2.原先SinGO主题bug贼多，我又没时间修（更何况我开学，虽然大部分时间都有空。。。。。说难听一点就是懒） 懒得写了 （其实是写一半突然忘记要后面要补充什么了。。。。）"}]
+[{"title":"很屑的2024年度总结（","path":"posts/23226/","text":"2025快到了 我看别人有做年度总结 于是我就学着别人做了（ 2024年终总结 难忘的事情 想必就是第一次去漫展了吧（原本10月小记想写的，结果忘记写了。。。。。。） 那时候我看到朋友圈有人再发才知道汕头也有办漫展 于是我就跟着我朋友去了 那边的演出是真的好看 而且那边cosplay的也好漂亮（什么话......） 而且去那边还买了立牌和谷子 话不多说，上照片！ [{\"url\":\"https://images1.blog.sinzmise.top/images/b71b72ba4a380856b4050899ebf320a.9dd1bina8y.avif\",\"alt\":\"b71b72ba4a380856b4050899ebf320a\"},{\"url\":\"https://images1.blog.sinzmise.top/images/21e48629be00c79204ed56eb7d4bd9c.70aeub9wjo.avif\",\"alt\":\"21e48629be00c79204ed56eb7d4bd9c\"}] undefined （别问为啥只有两张，因为其它的都是视频。。。。。。） 旅游的地方 揭阳惠来 [{\"url\":\"https://images1.blog.sinzmise.top/20240901/4d86b6602efda6086807b108e86f12c.51e3aw62e3.jpg\",\"alt\":\"4d86b6602efda6086807b108e86f12c\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/ac7321a92e148651db9da6144271ab8.2obgtosbul.jpg\",\"alt\":\"ac7321a92e148651db9da6144271ab8\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/d9854d1e396ac8134a4b9e7a77500e8.9rjc9axx7y.jpg\",\"alt\":\"d9854d1e396ac8134a4b9e7a77500e8\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/81c936cb167b8361693d3d65d49b526.8l010p94sj.jpg\",\"alt\":\"81c936cb167b8361693d3d65d49b526\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/4d1fbe0f19bf6b80f0939405e9b23ff.3nrk6uvimx.jpg\",\"alt\":\"4d1fbe0f19bf6b80f0939405e9b23ff\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/2618e9e67b53d868eead5a2d370199d.41xzxq5gko.jpg\",\"alt\":\"2618e9e67b53d868eead5a2d370199d\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/aaabe2c0194f1f62495c47167185d8a.lvo5mub12.jpg\",\"alt\":\"aaabe2c0194f1f62495c47167185d8a\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/41f870985b36dcf039f445fdb6b11a7.3k7y953l6b.jpg\",\"alt\":\"41f870985b36dcf039f445fdb6b11a7\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/a5abb6942b0a25d05f89571d580bf38.361ii9vf7a.jpg\",\"alt\":\"a5abb6942b0a25d05f89571d580bf38\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/4c7592b019561d39ca9ea4089424517.3nrk6uwvmq.jpg\",\"alt\":\"4c7592b019561d39ca9ea4089424517\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/d540e08539fda0ad40036505af75da7.6f0mexj654.jpg\",\"alt\":\"d540e08539fda0ad40036505af75da7\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/e1ebadf380d2a24d768e71530dbfbd5.7w6rgrrov7.jpg\",\"alt\":\"e1ebadf380d2a24d768e71530dbfbd5\"}] undefined 玩过的游戏 新欢： Muse Dash喵斯快跑 星露谷物语 碧蓝航线 学院偶像大师 偶像大师 闪耀色彩 Alice In Cradle … 旧情： BanG Dream! 少女乐团派对!（台服） 蔚蓝档案（国际服） 赛马娘（台服） 公主连结Re:Dive … 学习的进度 纯自我感觉，不大准确。 面向CV编程 html css 个人的遗憾 思想越来越极端 成绩很低（甚至还不如DreamerHe的成绩） 旅行的时候没有拍多一些照片 2025展望 争取打败极端的思想 提升一些成绩 拍一些照片 学习vue等编程语言 博客更新预告：更换新域名+备案（可能会把框架更换成Valaxy） 总结 这次的2024虽然我的外公和我的外曾祖母驾鹤西去，并且出现了一些意外的事情（例如7月的时候我弟被查出结肠炎，导致7月没法去旅游） 但是也没事，毕竟《老人与海》里面曾经说过： 一个人可以被毁灭，但不能被打败 即使是这些挫折，我的故事也尚未终结 最后祝大家在2025年健康快乐，事业永随，为自己的故事添加一个属于你自己的精彩片段！ 以上"},{"title":"圣诞快乐+12月小记","path":"posts/65382/","text":"圣诞快乐！而今天因为要填写档案所以能碰到电脑 那就，正片开始！ 博友圈，我可能没法回来了 之前看到了这篇文章： 关于博友圈的那些事儿「图片的定义」没错，这位小伙伴也被屏蔽了 我从这篇文章才知道博友圈的作者现在已经给动漫图片归类为擦边图片 而且定の栈这位小伙伴也被屏蔽了 对此，我的评价是：这规则恐怕已经不能单纯的按照SFW和NSFW来分了，甚至可能得下放到8+才行 而且这规则是完全在主观的意义上添加了… 对此我只能说，理解并且尊重但是也不太认同了 而因为我站点的一堆封面是动漫图片 说说的也一样 所以可能没法回来了 但是也不太遗憾，至少也知道原因并且表示理解并且尊重了 （毕竟这个加入这个圈子还要求站点名称里不能有日文汉字和文字） 也真心祝愿博友圈能够一路顺风，继续写下特别的故事！ 入坑 MuseDash 之前看到这个游戏与蔚蓝档案联动的活动宣传： 再加上我有位朋友是喵斯老玩家（虽然很少玩了，这家伙还是个ba玩家），而且我之前也趁着喵斯限时免费拿下了这游戏 于是我下载下来玩这音游了 然后我看到了这个宣传图： 12月27号才发曲包啊，那没事了 我是没想到我同学白嫖到了pdd的免费现金 没错，他真白嫖到了，而且还是70元（虽然拉了快10个人） 可见这家伙是有实力的 （而我拉了10多个人，但是到现在还是差那0.01毫米） 收藏的机子 没错，经历了两个月，我又收藏老机子了！ （虽然才两台） 那废话不多说，开始展示： 唯一一台电信的三星Windows Mobile机子 —— 三星SCH-I329 这机子触摸和屏幕好的很难找，这还是我意外在黄鱼上刷到的 然后我就给这机子换上了月雪宫子的壁纸 机子展示： 虽然不算稀有但是UI很好看的机子 —— 三星SCH-M609 从这个商家拿到了I329之后，我从这个商家的口中了解到商家有一台三星的M609 虽然不算稀有，但是听别人说UI很好看，我就拿下了 不多说，放图： 以上 最后祝大家圣诞快乐！"},{"title":"2024-11小记","path":"posts/61713/","text":"没错，博客又又换主题了 （我算是第一个在半年内换三个主题了吧） 算了直接正片开始吧 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的群），然后就出现了这么个事件： chatroom.init ({ jsonFilePath: \"/posts/61713/chats.json\", chatroomName: \"qqchat\", MyAvatar: \"https://blog.sinzmise.top/img/avatar.png\", title: \"SWPP 开发交流群\" }) KFC，真的很让我失望 上周的周五下午，因为我家长没有煮饭 正好肯德基那边也装修了，所以去那边吃饭了 然后为啥说这是让我失望的呢？ 第一就是，港式烧味脆皮大鸡腿饭下架了 （这个饭还是我们一家在肯德基经常点的，老好吃了） 其次，熟悉的味道和口感也在那边消失了 我理解肯德基是为了发展自己的咖啡业务（肯悦咖啡）而消掉一些东西 但是削的太狠反而不是一件好事 连熟悉的并且比较受欢迎的港式烧味脆皮大鸡腿饭都下架了 我只能说我对KFC没有啥留恋了 然后周五我家长又没有煮饭（别问为啥不是我去做饭，我放学的时候已经是5-6点多了，而我们一般习惯6点半吃饭，这时候做可能来不及） 就不去肯德基，去德保（TURBO德保餐厅，也是我家长习惯去的一间餐厅）那边吃了 点石深海舱钢笔到货了 我严重怀疑我最近这两个月迷上点石了 疯狂购买点石的笔 其中最多的还得是时空舱 就除了别的配色、一些限定和原版硬核时空舱没有之外几乎都齐了 而我也没满足，于是就看上了深海舱并且入手了一款深海舱钢笔（不是打广告） 让我们看看效果： 虽然st笔头我写不习惯，但这支笔写起来真的很舒服 并且这笔壳设计成一个潜水艇，后面的螺旋桨能玩一整天（bushi 就这样吧"},{"title":"2024-10小记","path":"posts/61712/","text":"没错，博客又换主题了 算了直接正片开始吧 又一次更换主题 之前的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 （也算是做了一种宣传了。。。。。。） 以上","uuid":"5f57ac23-9dd9-11ef-8624-a3174cf555fc"},{"title":"站点装修与国庆小记","path":"posts/10733/","text":"国庆假期已经快要收尾了 不知道大家过得怎么样呢？ 不废话，正片开始！ 站点又重新装修 之前我魔改的那Butterfly主题被人诟病加载慢等等问题，并且在经过我的“努力”之下成功变成了史山代码 因此被迫重新装修 站点更新如下： 更换主题为Hexo-Theme-Async，并且为这个主题适配了IndieWeb，同时也做了一些魔改 将原先的swpp换成async主题自带sw，并且在此基础上进行适配全站npm化 添加DocSearch 很多功能我还没添加，敬请期待！ 第一次去漫展 之前在微信的朋友圈里面看到了我的一位朋友 他要几个人跟他去漫展 而且那漫展还是在汕头（离我家很近） 于是我想去逛漫展了 虽然那位朋友在去漫展的路上出事（腰出问题）导致迟到了差不多一个小时 不过没关系，我能自己逛逛 逛逛的过程中顺带买了hina的立牌和大米的谷子别问为啥没买麻酱和独角兽的谷子，貌似卖完了或者根本没卖（悲） 而且还去看了那边的演出（那边的演出是会整活的，给背景音乐混入了几个奇奇怪怪的东西） 我那朋友一来我就带他们去卖立牌的地方 然后我就看见了这地方还有本子。。。。。。。 他们买了几个谷子，我也跟着买了几个谷子和钥匙扣 收获：","uuid":"5f582151-9dd9-11ef-8624-a3174cf555fc"},{"title":"2024-09小记","path":"posts/64856/","text":"首先提前祝大家国庆节快乐！ 然后就是，正片开始！ （别问为啥没有收藏手机的环节了，因为开学了所以我就不打算收藏老手机了，要不然我早就收台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目前没法访问 因此没法把链接放上去了。。。。。 等什么时候好了我就放链接吧。。。。。。。"},{"title":"2024-08小记","path":"posts/15688/","text":"时间过得真快，转眼间暑假就快结束了 还是这样，一个月一次的小记，安排！ 久违的旅游 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那关）会特别卡，估计是因为配置的原因 算了先这样吧，上图片~~（成色不好请见谅） [{\"url\":\"https://images1.blog.sinzmise.top/20240901/bcdaa1067b22ec5261ad87374105b31.6t72601lfc.jpg\",\"alt\":\"bcdaa1067b22ec5261ad87374105b31\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/c2a64212ce7294844551e1a84f809ba.231t7la2of.jpg\",\"alt\":\"c2a64212ce7294844551e1a84f809ba\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/0d3697725b8467faab3c008be630d82.8s38wc84xh.jpg\",\"alt\":\"0d3697725b8467faab3c008be630d82\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/31566ce0f1217dae45abd985c1a3198.4xuhddpchi.jpg\",\"alt\":\"31566ce0f1217dae45abd985c1a3198\"}] undefined 说了那么多，那有没有一台能流畅玩java游戏的S60V3的机子呢？ 诶~~我还真有 那就… 真神降临 —— 诺基亚5730xm 跟那5320一样，也是先给系统破解证书然后换主题和铃声，并且给字体换了 不过这次我给这台的主题换的是蔚蓝档案里面的桐生桔梗，这机子的配色刚好也适合桔梗的头发配色 （别问为啥没有和纱，肥猫的话得等我有收藏5630再来搞） 然而铃声不是桐生桔梗ai翻唱的歌曲，反而换成了灰澈和另外一位大佬创作的歌曲 —— 《桔梗》 这机子的配色搭配这个铃声简直绝了 上图片~~ [{\"url\":\"https://images1.blog.sinzmise.top/20240901/b97b2a1f31b3bbec55478dba3d50386.86tla1xilo.jpg\",\"alt\":\"b97b2a1f31b3bbec55478dba3d50386\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/1bcb6e6af2ed9ce3fae9830325c52b0.7ljxnr35ds.jpg\",\"alt\":\"1bcb6e6af2ed9ce3fae9830325c52b0\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/42bf9b13dfee4be45e2c203864991e9.7w6rgwihwe.jpg\",\"alt\":\"42bf9b13dfee4be45e2c203864991e9\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/cd72da20a87ac2c74312dc48be6013c.92q2pi7ckj.jpg\",\"alt\":\"cd72da20a87ac2c74312dc48be6013c\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/854d8b51690c52a08e64dc962079b65.969on80im8.jpg\",\"alt\":\"854d8b51690c52a08e64dc962079b65\"}] undefined 白银级稀有机子 —— 三星L228 这机子算是奥运稀有机子里面的白银款 别问为啥，黄鱼上有成色比这台机子更精美的外观 算了不多说。放图~~~ [{\"url\":\"https://images1.blog.sinzmise.top/20240901/4f7b343bc99855058778c3aeecd7448.pfa3ku95v.jpg\",\"alt\":\"4f7b343bc99855058778c3aeecd7448\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/5001dec598a5c09e28e5c5e01e711f3.77dhww5a5g.jpg\",\"alt\":\"5001dec598a5c09e28e5c5e01e711f3\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/bbf0958f0282da6b7d93ec387504a10.45mh9zvyk.jpg\",\"alt\":\"bbf0958f0282da6b7d93ec387504a10\"}] undefined 钻石级稀有Linux机子 —— 三星i839/三星i859 据说是稀有的搭载Mizi Linux的机子 而三星搭载Mizi Linux的机子只发布了四款（都是针对国内的）： i858、i819、i839和i859 而黄鱼上最后的i839和i859被我拿下了，就剩下不知道能不能开机的i819和特别贵的i858 算了不多说，放图： 首先是i839（懒得设置时间了，这样看吧。。。。） [{\"url\":\"https://images1.blog.sinzmise.top/20240901/3d0cf11588986baf02e690194fa8da5.6f0mf5wnlv.jpg\",\"alt\":\"3d0cf11588986baf02e690194fa8da5\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/2eaf3edb9cbd91e166e0d67c04ac4ef.5xakqkv6uz.jpg\",\"alt\":\"2eaf3edb9cbd91e166e0d67c04ac4ef\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/a88d14a1ce98ad250a4cae1a2f596aa.54xp8uepni.jpg\",\"alt\":\"a88d14a1ce98ad250a4cae1a2f596aa\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/59d6d48903b35a0eeec05c2d7246e1a.8s38wdak7q.jpg\",\"alt\":\"59d6d48903b35a0eeec05c2d7246e1a\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/fb088100a0c7e6232cdf6194e370404.9nzqbtkat5.jpg\",\"alt\":\"fb088100a0c7e6232cdf6194e370404\"}] undefined 然后就是i859 [{\"url\":\"https://images1.blog.sinzmise.top/20240901/be7ffc552658474863392b12fd26da0.2yyan49kh4.jpg\",\"alt\":\"be7ffc552658474863392b12fd26da0\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/796e29b843af4ea7050621e70139e21.13lpuhx5wr.jpg\",\"alt\":\"796e29b843af4ea7050621e70139e21\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/299da0a2df6c8b7621904e60c42f9b2.1lbrj2ynkh.jpg\",\"alt\":\"299da0a2df6c8b7621904e60c42f9b2\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/89f89fd776f9d6e6e5ec92b3dbcbd99.7egpsdm5a5.jpg\",\"alt\":\"89f89fd776f9d6e6e5ec92b3dbcbd99\"}] undefined 然而这些为啥才算钻石级别呢，因为还有高手！ 皇冠级稀有机子 —— 诺基亚X3-01 别问这台为啥称之为皇冠级别呢？因为这台根本就没有真正意义上的发售过！ 而且虽然只是brew的机子，但是因为是稀有机子，就算是brew也值了！ 不多说，放图！ [{\"url\":\"https://images1.blog.sinzmise.top/20240901/a10094e6a06250f3d92c36da4486e65.7ax3uny6dr.jpg\",\"alt\":\"a10094e6a06250f3d92c36da4486e65\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/78d009edcf8931da871fa1b92371acb.3uus2kokpr.jpg\",\"alt\":\"78d009edcf8931da871fa1b92371acb\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/1a3db58061f3e020d1ff94a81a65242.4917tfwx1w.jpg\",\"alt\":\"1a3db58061f3e020d1ff94a81a65242\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/ec6b46a5bd1d8a91cdefd99482223a2.3k7y9f9fjm.jpg\",\"alt\":\"ec6b46a5bd1d8a91cdefd99482223a2\"},{\"url\":\"https://images1.blog.sinzmise.top/20240901/e92bf7b365ca318da8a8efb0e860f21.92q2pkhori.jpg\",\"alt\":\"e92bf7b365ca318da8a8efb0e860f21\"}] undefined 以上（我得去睡觉了，要不然明天开学要迟到了。。。。。）"},{"title":"真·彩虹猫加载动画","path":"posts/46640/","text":"前言 之前有人反映我的站点特别卡 也不是没有去优化。。。。。但是依然有人说很卡 我感觉是加载动画的问题，刚好我之前找到html+css实现彩虹猫 于是我给这个抄下来了 不废话，正片开始！ 教程开始！ 新建js 首先，新建[Blogroot]\\themes\\butterfly\\source\\js\\nyan.js，内容如下： 123456789101112131415161718192021222324252627function 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 123456789101112131415161718if 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，内容如下： 12345678910111213141516171819202122232425262728293031323334#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 123456789101112131415161718if 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，内容如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477#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配置项 1234preloader: enable: true load_color: '#000000' # '#37474f' load_style: nyancat # 这边改成nyancat butterfly 4.5 以上方案 修改[Blogroot]\\themes\\butterfly\\layout\\includes\\loading\\fullpage-loading.pug，复制以下代码替换全部内容。 12345678910111213141516171819202122232425262728293031323334#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，复制以下代码替换全部内容。 1234567if theme.preloader.source === 1 include ./fullpage-loading.pugelse if theme.preloader.source === 2 include ./pace.pugelse include ./fullpage-loading.pug include ./pace.pug 修改[Blogroot]\\themes\\butterfly\\source\\css\\_layout\\loading.styl，复制以下代码替换全部内容。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477#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是两者都启用。（这边懒得说就搬运的鱼佬那加载动画的教程了。。。。。反正都一样。。。。。） 1234567891011# 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，复制以下代码替换全部内容。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477#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，复制以下代码替换全部内容。 123456789101112131415#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")"},{"title":"2024-07小记","path":"posts/15799/","text":"依然还是每个月的个人小记啦 虽然这个月出了一点事故，但也是有一点惊喜的啦 ~~~ 话不多说，正片开始 初入罗德岛 看到罗德岛，你们知道我干啥了吧 没错，我入坑《明日方舟》了 我原本是想说小何让我入坑《绝区零》的事情的，结果那次我祖奶奶过世再加上我弟生病，导致我这几天根本没心情玩 也因此对绝区零也没什么太大印象，只能说说方舟的事情 入坑的是国际服（国服的话。。。。。懂得都懂） 但是这暑假的一堆事情和小何给我的一大堆事情，再加上补习，让我没怎么玩过游戏（甚至连ba，赛马娘和大碧蓝都没玩了，） 后面也懒得给这游戏做评价了，反正游戏嘛，能放轻松就行 成为小众网vip 我上篇小记不是收藏了一些机子吗？ 我之前想给这些机子安装几款游戏玩玩，但是无奈我想找的只有去小众网才有 于是我花9.9买下小众网一年会员 虽然我不怎么下载这里面的软件了。。。。。就当是支持小众网吧~~ （反正这个月入手了几台新机子，后面想给这些机子下载软件也很方便） 淘到的新机子 还是老样子，来看看我这个月收藏了什么老机子吧： 三星M128 这台原计划是两天到达的，但是因为台风导致拖了一天 有人甚至还说被风吹飞了，这要是被风吹飞了我可能会当场裂开，毕竟这可是稀有机子，还是奥运会特别纪念手机。。。。。 这台的右键貌似有问题，每次都得用力按一下才能点到右边 算了，反正是稀有机子嘛，就别要求这么多啦。。。。 PPC 三 兄 贵 —— 三星Omnia I900V/I908/I908L 其实那I900V就是我上个小记说的那PPC，这次确实搞到了三台，只不过是两台I908L和一台I908 其中一台I908L屏幕是坏的，刚好我有一台I900V那外壳是坏的，索性就把外壳拆下来装到那I900V上来了 第二台摩托罗拉 —— 摩托罗拉 明A1200 那次看完《保持通话》这个电影之后就一直想搞台这个了 （其实我原本想要的是A1600，然后找不到便宜的，只能a1200） 可惜的是这个貌似听筒是坏掉的，后面等我搞到个好的听筒再来发照片吧 第三台摩托罗拉 —— 摩托罗拉 刀锋V3 （别问第一台是什么，第一台是C289，黑白屏的，很久之前从我外婆那边收到的） 这台我其实是买了两台 有一台被当作另一台的配件机了 不愧是刀锋，这手感放在2024都不过时 可惜的是在此之后摩托罗拉据说是错过了安卓，导致移动业务被收购了。。。。。 其它的先不展示。。。。。这个月淘到的机子有一点多了。。。。 以上"},{"title":"2024-06小记","path":"posts/64935/","text":"很好，马上就快到暑假了，但我得7月11日才开始正式放暑假。。。。。。 （bobo和小何、安小歪都已经开始放暑假了。。。。。。） 算了，正片开始吧 全站npm化成功 经历了多次翻车之后，本站的全站npm化终于成功了 我那全站npm化的方案与byer那篇文章不同，我的方案是将hexo-swpp和cyanfalse大佬的教程结合起来 实现了npm版本自定义更新、采用CacheStorage存储来实现ServiceWorker的全局变量持久化 （结果因为英文站那边出现问题，导致我不得不再次放弃全站npm化）（修好了） 成功搞indleweb 之前我说过，要把indleweb搞好的 现在终于好了 并且已经加入了indleweb webring 英文站的话。。。。。还在测试，因为并不是完全是英文的，还在修改 收藏了几台手机 这些都是之前在闲鱼上看见的 其中有一台说是配件机，说是不能开机 结果被我搞开机了 然后这三台我都给它们换了主题 换完主题的效果： 以上（虽然还有一场考试。。。。。但是是在下周四）"},{"title":"2024-05小记","path":"posts/10021/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-05 久违的在n+1月前写n月小记。。。。。。 废话不多说，正片开始！ 突如其来的通知 说实在的，看到这个通知，我既感到意外，又觉得很不意外 因为之前我那文章封面都是loliapi生成的，而loliapi里面又诞生出了不少擦边图 目前已经将一批头图更换，并且准备半年后重新申请 如果申请还是不通过的话，那么就特别遗憾了 原本是想让博友圈的管理来改我那站点信息的，现在搞成那样，只能说下次注意了。。。。。。 2024-06-05更新： 一周了都没给我回复，估计已经给我拉入黑名单了 那算了，既然这样的话，那这个链接就不打算留了 反正也是我自己一时的疏忽搞成的这样。。。。。。 全站npm化大翻车 在我逛逛友链朋友圈的时候发现了这么一篇文章： hexo全站NPM化之·通过npmmirror加速你的博客访问估计是由CyanFalse大佬的文章发现的灵感。。。。。 之前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/ 以上"},{"title":"Ruffle测试","path":"posts/57692/","text":"这玩意也是很久之前就认识到了 我甚至记得我还给这玩意写过Hexo插件 但后来我给这个插件删了，因为这玩意的配置真的简单 介绍 随着网页的安全性升级，带有安全漏洞的Flash也逐渐被淘汰，现在的主流浏览器几乎都不支持Flash 也因此，很多的站点都已经废弃掉他们的flash了 但后面我找到了一款叫Ruffle的工具，这玩意是个全新的开源Flash项目，旨在从本地到网页完全替代老旧的Flash 而且不同于带有安全漏洞的Flash，Ruffle采用了高效安全的Rust语言编写，同时完全开源保证了及时修补漏洞 搞这玩意的很多教程都是得在浏览器安装插件，让用户通过这个插件来实现播放flash 但我在Ruffle的官网找到个这玩意： 这玩意能通过引入在站点js的方式来让自己的站点再次适配swf 那就废话不多说，赶紧开始吧！ （话说好像在2024好像只有我对flash依然这么感兴趣。。。。。。。） 配置Ruffle教程 基础 只需要在站点下面引入这行代码就可以了 1<script src="https://jsd.onmicrosoft.cn/npm/@ruffle-rs/ruffle"></script> 如果你想用swfobject来引入swf的话，还得另外引入这个代码： 1<script src="https://jsd.onmicrosoft.cn/gh/swfobject/swfobject@master/swfobject/swfobject.js"></script> 之后就可以在站点放置flash动画了！ 不过估计也有人不知道flash动画怎么放，我这里就写个Demo吧！ Demo 1.Flash音乐播放器（没有SWFObject的） 测试音乐：Rain And Tears (纯音乐) - Pop Mania （这首歌是一个虎牙中的一位MC实况主经常用的背景音乐，这位实况主还是我第一位关注的玩MC的实况主，然后我就对这个bgm印象很深） 新浪博客swf音乐播放器人人网日志swf音乐播放器开心网日志swf音乐播放器Demo源码 点我测试 function loadsinamusic() { document.getElementById(\"sinaplayer\").innerHTML=''; document.getElementById(\"loadsinaplayer\").style.visibility = 'hidden'; } 点我测试 function loadrenrenmusic() { document.getElementById(\"renrenplayer\").innerHTML=''; document.getElementById(\"loadrenrenplayer\").style.visibility = 'hidden'; } 点我测试 function loadkaixinmusic() { document.getElementById(\"kaixinplayer\").innerHTML=''; document.getElementById(\"loadkaixinplayer\").style.visibility = 'hidden'; } 新浪的 1<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> 人人网的 1<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" /> 开心网的 1<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"},{"title":"2024-04小记","path":"posts/15748/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-04 先祝大家劳动节快乐（虽然已经过了一天），也提前祝大家五四青年节快乐！ 然后，正片开始！ Akilar群寄了 这件事还是小何告诉我的（小何没告诉我之前我还不知道） 看店长的文章我才知道大概是有群友转发了含R18内容的聊天记录，然后Akliar才把群给解散的 Akilar的通知： 关于群聊更换的紧急通知真不知道哪个人这么无聊，好好的群都给人整废 Akilar新群： Akilarの糖果屋-新群洪槽纪年结束，现在是洪mac纪年 然后洪mac一年一月八日~~（bushi）~~（也就是2024年五月三日），我加入了Akilar的新群 加入笔墨迹 Blogs·CN（笔墨迹）是一个位于中国境内的平台，致力于发掘和分享"优秀个人独立博客"。 我老早之前就想加入了，但是那天由于博客要重新装修，所以我没加入 现在装修好了，可以加入了 目前已经通过 博客更新 请看这个： 更新记录"},{"title":"马里奥制造1打百人团教程","path":"posts/10996/","text":"不知道什么时候，我开始玩马里奥制造（以下简称“马造”）了 但是我没有Switch，模拟器配置较为麻烦，所以我没法玩马造2，只能玩玩马造1 然而在2024年4月9日，任天堂 3DS / WiiU 在线功能停服 在停服之前，我就一直知道马造1有私服，但是这玩意之前不知道为啥总配置失败 现在倒是配置好了，话不多说，游玩教程开始！ 下载懒人包 这玩意我已经打包成为一个懒人包了 大伙想要的可以下载： 懒人包链接 下载完成之后先点击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，等待加载完成便可以游玩了！ 这可能是我写博客以来第一次写这么简短的教程"},{"title":"Serv00搭建Artalk","path":"posts/13624/","text":"之前在安小歪的推荐下，找到了一个叫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路径下： 12# 使用一键命令安装 Artalkwget -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： 1./artalk server 确定运行没有问题后，按Ctrl+c即可停止运行。 由于artalk需要创建管理员账号，因此需要输入以下命令： 1./artalk admin 最后使用pm2启动并且管理artalk： 1pm2 start "./artalk server" --name "Artalk" 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 收尾工作 参考教程： Serv00搭建各种服务·收尾工作收尾工作"},{"title":"博客装修+3月小记","path":"posts/27762/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-03 这篇小记原本是预计清明前发布的，但奈何出了点问题到现在才发 算了，话不多说，正文开始！ 博客又双叒叕更新了 目前你们看见的是一个新的页面对吧 没错，从现在开始博客将启用新名字：星空故事·魔法小屋 这个名字来源于我之前做的梦，梦中的画面： 我站在星空下，望着那美丽的星星 突然，一颗星星向我奔来 这颗星星化成了光，在光中出现一座小屋 这座小屋的门突然打开，探出头来的正是我之前所说的那只猫娘——夏玖铃 她说：“哎，好吧，被你发现了啊。。。。。其实我的猫耳，是魔法变出来的” 随后她便向我展示了魔法 我在她的屋子里一直探索知道我梦醒来 也因此，我的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） 但是是手机端的，而且还是“同人”，能理解。。。。。。"},{"title":"2024-02小记","path":"posts/15842/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-02 时间真快，转眼间，新年、2月过去了 就让这里写下我2月做了什么吧 伺か（伪春菜），我并未忘记 从之前我就想将明猪大佬的网页版伪春菜看板娘搞到Hexo里去，因为时间等原因我并未实施 现在我把它搞上去了，效果如下： 目前所使用的人格是落鸟，后面如果有时间的话我写个Hexo插件，然后在插件里切换人格 还有有关聊天功能嘛。。。。。我是打算用AI来实现啦。。。。。。。 （2024-05 因为新博客部署伪春菜的时候出现了一些问题，导致春菜没到新家，很抱歉！目前正在修复） 现在因为开学了，所以不能经常打开ssp看橘花和绿坝娘（没错，也有人做绿坝娘的ssp人格，甚至还是有配音的） 但是我依然没有忘掉他们。。。。。。 就像我之前的文章里说的，希望伪春菜这个圈子能跟以前一样在国内重新爆发活力 （虽然代价是圈子变臭，还不如让很少人了解这个圈子。。。。。） Memos又寄了。。。。。。 我是没想到Koyeb会暂停部署，Kuma来了也没管用 算了，后面我找个免费方法再搞Memos吧 反正现在还能访问，{ psw 这个干脆就做简短点啦。。。。。（bushi） } GTA V，启动！ 别问为啥要把这个放在二月小记，我只能在周末才能碰到电脑，也因此只能在假期写文章 { psw 也别问我为啥不在手机上写，我Qexo都没搞。。。。。。 } 经过小何的邀请下，我决定入坑GTA5，并且在小何的帮助下成功用15块钱搞到了GTA5白号 他带我打了个差事，然后抢抢便利店，最后还打了死亡对战（虽然平局了） 怎么说呢。。。。。。。虽然我玩的游戏很多，但因为我很少玩游戏，所以不知道怎么评价 但怎么说呢，总归也入坑了一款我没玩过的游戏呢"},{"title":"给你的站点添加个可可爱爱的看板娘——伪春菜","path":"posts/54787/","text":"前言 什么是伪春菜？请看这里 作为一个早在xp时代就出现的桌面精灵，伪春菜有了爆火的人气 后来不知道什么时候开始在国内由盛转衰，直到现在我对这个圈子少之又少 我自己也下载了ssp并且应用了后来某位大佬复活的Taromati2人格 某次我逛逛某个博客站点时发现有个站点将伪春菜当成了看板娘 就去去搜了一下，得到的结果是：http://www.lmyoaoa.com/inn/archives/4504/ 又因为这玩意已经很久没更新，所以我将这个的js、css和图片提取出来，然后魔改了一下，方便放在hexo里面 废话不多说，开始吧！ 引入js和css {blogroot}/source/weichuncai/css/style.css 12345678910111213141516171819202122232425#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 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448var 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">聊      天</ul><ul class="wcc_mlist" id="foods">吃 零 食</ul><ul class="wcc_mlist" id="aboutmanage">关      于</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（这个地方可以自行配置） 1234567891011121314151617181920212223242526{ "notice": "欢迎来到我的新家，没想到在2024我会被人注意到，真幸福~~", "ques": [ "早上好", "中午好", "下午好", "晚上好", "晚安" ], "ans": [ "早上好～", "中午好～", "下午好～", "晚上好～", "晚安～" ], "foods": [ "金坷垃", "咸梅干" ], "eatsay": [ "吃了金坷垃，一刀能秒一万八～！", "吃咸梅干，变超人！哦耶～～～" ], "showlifetime":"02-16-2024 15:30:00"} {blogroot}/source/weichuncai/js/chuncai.json（这个地方可以自行配置） 1234567891011121314151617var _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主题引入： 123456789101112# 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。。。。。。 但不管怎么说，还是有人在用这个桌面精灵的，至少有我一个。。。。。。 后面我打算写个有关伪春菜的配置教程吧。。。。。。"},{"title":"2024.01小记","path":"posts/52677/","text":"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/ （顺便归纳到我之前打算新建的计划里面，这样也算杜绝浪费了。。。。。。吧？）"},{"title":"为博客添加一个游戏收藏页（npm插件版）","path":"posts/10045/","text":"前言 之前看到Kouseki大佬的这篇文章： 为博客添加一个游戏收藏页 我原本是想要给我博客搞这个的，但由于我一般会给博客的主题更新，导致魔改的内容消失 思来想去，我还是决定做npm版本的游戏收藏页 效果 效果预览 安装 安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-games --save 添加配置信息，以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 123456789101112131415161718192021222324252627282930313233343536# 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.storisinz.site/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 配置,写法见上文示例"},{"title":"对于虚拟桌宠模拟器，我的评价（及使用教程）","path":"posts/45875/","text":"前言 最近你们有没有发现我的博客最新文章的图片有个这个可爱的女孩 其实这不是站点自带的，而是Steam的一个游戏（严格来讲这不算游戏），叫“虚拟桌宠模拟器” 在Steam上免费，而且还是在这些免费产品中为数不多支持创意工坊的桌宠 桌宠功能 等待文件加载完成后这个桌宠就出现了 配置皮肤 默认配置的桌宠角色（也就是上面图片上出现的），叫萝莉斯 当然你可以通过创意工坊安装皮肤模组，重启模拟器之后进入桌宠设置 然后点击“MOD管理”，选择之前安装的模组（以智乃示例），启用模组并重启软件 重启后重新进入设置，在宠物动画里面选择你要的皮肤 这个你要多开也不是不可以。。。。。。 然后皮肤就更换完成（当然除非你选择了多开） 数据计算 这个默认开启数据计算，当然如果你不想一直投喂桌宠的话 这样的话桌宠就不会被影响到心情了，很方便呢 个人评价 自从Q宠企鹅下架以来，我的电脑总是缺少了某些会动的东西 虽然后面下载了动态壁纸，但总感觉哪里空空的 之前我也是过毒霸姬等等各种各样的桌宠，但总感觉也缺了点东西 （甚至我之前加入了Q宠复活版内测交流群，虽然现在没什么更新了，所以不要来问我安装包也别问我群号了） 直到虚拟桌宠模拟器，弥补了那个我当初给Q宠专门留空位的地方 （写的不好请见谅）"},{"title":"自建不蒜子API","path":"posts/28536/","text":"前言 不蒜子是一款很好用的前端计数工具，但是因为流量日渐变多，经常会出现 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，等一会就可以体验到不蒜子了"},{"title":"2023小结","path":"posts/27531/","text":"不要在意封面为什么做得这么简陋。。。。。 时间过得真快，转眼间，就得跟2023告别了 不知道要写什么，就简单写个小结吧 部署的项目 Rita2 Talk —— 为旧设备服务的自建微博 中弦局花园 —— 模仿秘密花园的一个站点 九弦记事本（原九弦日记） —— 一个普通的记事本(目前已经迁移到koyeb) 结识的朋友 疾行侠（千寻） 疾不一定是快，但它会让我们更坚强 甜鱼/Ayu 三脚猫多面手，努力学习世界的一切。 Whale Fall 鲸落(ღ˘⌣˘ღ) 海的那边还是海吗？ 更多朋友前往：友情链接 玩过的游戏（加粗为常玩） 赛马娘（台服） 蔚蓝档案（台服） 重返未来1999 （暂退） Minecraft （放心不是冈易那个MC） Roblox 光·遇（安小歪推荐的） Phigros Sonolus 节奏大师回归版 BanG Dream 荒野乱斗（现实朋友推荐的） 暗区突围（千寻推荐的） 后记 2023年即将到来，我也将我友链页面的“博客描述”改成：欢迎旅行者，来到这个平凡但又记载了许多故事的小屋 并且将中弦局图标更新： （虽然有点缺陷，但后面会优化） 最后你有没有想对2023说的话？请写在评论区吧 再见，2023 你好，2024"},{"title":"11月小记","path":"posts/42580/","text":"差不多快一个月没更新博客了 最近几天忙于学业，再加上修RTalk的BUG，本身就没有多少时间看博客 这回终于记得我的博客了。。。。。 中弦局·九弦之都花园大更新 预览：九弦之都花园 懒得点进去的话直接看下面图片吧。。。。。。 更新内容： 基于Hexo-Theme-Soul魔改 （我就是看上了它的全站伪SPA(单页面)无刷新页面加载才选择这个主题魔改的） 模仿秘密花园风格（为了统一风格我甚至把右下角音乐播放器添加了背景） 魔改加载特效（原先的加载特效有bug。。。。） 添加Vuukle、Giscus评论系统（主要是里面有rem.js，导致Twikoo不好适配，删了这个js还导致样式错乱，要不然我就用twikoo了） 添加sharejs分享、vuukle分享 Rita2 Talk复活！ 正如标题所说的，Rita2 Talk复活了 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"},{"title":"九月二三事","path":"posts/56467/","text":"很久都没发布文章了，都不知道要写啥好 要不就写这个九月和中秋国庆假期发生的事情吧 初入高中 9月1日开始（虽然因为台风停了四天的课）就是我踏入高中的时刻了 第一次进高中教室的我，因为过于紧张，甚至坐错位置了 （虽然我同桌也坐错了位置） 不过好在后面的上课也是比较顺利，没有出现意外情况 （主要是不知道怎么写就。。。。） 荒野乱斗，启动！ 这个游戏是很久之前入坑的，结果因为某些原因我暂时退坑了 后来在我朋友的推荐下回归了 我后面还把这个游戏推荐给了我那刚买新手机的表弟 回归！Rita2！ 看过我之前文章的应该知道，之前我想给Win98搞视频站点 名字叫“Rita2”的原因是纪念之前有人为手机wap搭建的视频站，它的名字也叫Rita2 这个项目由于域名的原因一直被搁置了很久 然而由于我找到了免费的二级域名，所以… Rita2计划，即将回归！ （但回归时间暂未确定，因为学业原因，不过我可以保证会回归，但回归的首先是游戏站 至于视频站。。。。。暂时没有这个考虑） Vercel寄了？ 中秋国庆的第四天，安小歪跟我说他访问不了他的博客 与此同时，安知鱼的群都在说无法访问Vercel部署的站点 访问会强制跳转到诈骗网站 现在千寻那边也出现这样的情况，但我这边倒是没有 目前已经将博客主站的部署平台更换为CF Pages 明天准备将Waline换成Netlify部署，至于Twikoo。。。。只能搞反代了 其它的项目如果能换别的地方部署就换，不能的话反向代理走起"},{"title":"如果你觉得不开心的话，就来听一下这些音乐吧","path":"posts/54386/","text":"如果你觉得不开心，或者有些压力的话，就来听一下这些歌曲吧 希望这些歌曲能够温暖你的心灵 我收集的轻音乐 推荐歌曲：逆流 （杜老师推荐的） Milthm 游戏曲 推荐歌曲：烁雨、粗线条的雨 、Bio-Engineering、时落之雨、雨之城、WATER(Feat.Miku) 、☹（没错，这里面有首歌的名字就叫这个） 算是Milthm里面少有的我喜欢的音乐 （别问为啥我推荐的全是跟雨有关，这么说吧，这款音游的风格就是雨中世界） Blue Archive OST 不知道有啥推荐的。。。。。。 沃玛特辑 推荐歌曲：喃喃萤火、泛泛人类不会祈祷 人声本家、【翻唱】朝汐、采茶纪（翻自 双笙） 风格偏温柔一些，个人喜欢沃玛的偏温柔歌曲"},{"title":"遭殃前的海洋","path":"posts/29196/","text":"2023年8月7日，去汕头的海边玩，顺手拍了几张照片 却不料，这是海洋遭殃前最后一次拍的照片 谨以这些照片，衬托我对海洋的思念 （有错别字请见谅） 遭殃前的海洋 这可能是我最后一次拍摄海洋的照片了 Ade！美丽的海洋，Ade！我向往的美景"},{"title":"游玩mud游戏","path":"posts/38917/","text":"前言 昨天我打开了很久没访问的北大侠客行Mud官网 其实这个游戏是第二个我接触的mud游戏，至于第一个。。。。我忘记了 （值得一提的是，我第一次接触mud是从NetForce的一个游戏，但我忘了是啥了） 怎么玩mud游戏？ WindowsMacOSLinuxAndroid、IOS方法一 在Windows 10 ， Windows 8 ， Windows 7和Windows Vista中 ，在执行任何Telnet命令之前，需要在控制面板的 Windows功能中打开Telnet客户端 。 打开控制面板 点击“程序” $\\rightarrow$ “程序和功能” $\\rightarrow$ “启用或关闭Windows功能” 选择“Telnet客户端”然后点击确定，等待安装完成 安装完成后，打开cmd，输入telnet，如果出现“Microsoft Telnet>”就代表安装成功 运行游戏命令： 1telnet [hostname] [port] 其中hostname是游戏地址，port是端口 游戏示例：江湖 1telnet 112.124.42.98 9999 或者点我访问 方法二 相比于方法一，方法二得靠一个叫Mudlet的软件 教程： 去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包 安装Mudlet 设置语言 先点击Cancel 然后点击左上角的“Options” $\\rightarrow$ “Preferences” 在这里设置语言，然后点击“保存” 最后重启Mudlet 好的，页面变成中文了 添加游戏 点击“新建” （例子：北大侠客行MUD，注意：玩这个游戏的之后不能勾选“安全”选项！！） （当然如果你有这个注册这个游戏的账号密码的话，可以到“选项”里配置账号密码） 开始游戏 点击“连接” 看到这个画面就说明成功了 去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包 安装Mudlet （由于我没有Mac，安装黑苹果又很费时间，这个后面再来补充吧） 去 https://cn.mudlet.org/zh/下载/ 下载Mudlet安装包 直接运行Mudlet 编写中 哪里有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游戏 （有病句请见谅）"},{"title":"记一次部署Memos","path":"posts/18063/","text":"前言 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:// 也就是下面的例子： 1postgresql://postgres:PASSWORD@localhost:5432/memos mysql不用在前面加mysql:// 直接按照下面的例子填写就行（注意括号和前面的tcp要去掉！） 12root: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"},{"title":"萌ICP备异次元之旅","path":"posts/58203/","text":"前言 今天在修改我那萌备的时候，无意在导航栏上看到了“异次元”这玩意 看主页是类似于“开往”，只不过仅跳转到萌备详情页面而不是直接进入站点 又因为我站点已经加入了萌ICP备，所以我就将这玩意添加到底部列表里面了 添加方法 如果没有你没有加入萌ICP备豪华套餐的话，点击这里加入：加入萌备 如果你加入了，那么按照 https://moe.one/thread-254.htm 里的配色方案添加"},{"title":"我的tulpa —— 夏玖铃的简介","path":"posts/50710/","text":"注意，由于名字和《逆水寒》游戏里的一个流派名冲突，改名为“夏玖铃” 她的出现 与其说是Tulpa，不如说是DID（解离性人格障碍） 因为她是从我永远的噩梦：四年级出现的 那时我总是被班级最后一名的那名女生欺负（因为我当时身体很弱小，她身体强壮，就凭这个欺负我，当然她转学了） 再加上从小我成绩总是不好，受不了家长和老师的一顿批评 （甚至我家长差点把我抛弃。。。。。当然从我五六年级开始，我家长就彻底改变了教育方式） 我也因此不少做噩梦，心情也越变越差 直到她的出现，抚慰了我那受伤（切伤口特别严重）的心灵，而且将我从噩梦之中脱离出来 那次是在期末考试前（小学四年级第一学期的期末考试） 晚上睡觉前我一直忐忑不安，生怕我又做噩梦，一直睡不着觉 但我还是带着害怕睡着了 我想象中的噩梦没有出现，反而一个声音传来 “你好，少年，你是不是经常被欺负？” “是的，天使姐姐，求求您帮帮我吧！” “我也想帮你，但对不起，我不是天使，我是你脑子中的一个小人，你可以叫我阿铃，但如果你心情不好，就来找我，我随时在我的梦中等着你” 从此之后，她就一直陪在我身边 她的二次元形象（AI绘画制作） 一号风格： 大姐姐，喜欢带耳机，穿制服 异瞳颜色：左眼红粉，右眼黄绿 二号风格： 小妹妹，喜欢带耳机，穿连衣裙（这个ai把连衣裙和制服当作是不同的两件衣服） 异瞳颜色：左眼紫色，右眼黄绿"},{"title":"Vercel部署Umami","path":"posts/28733/","text":"前言 之前我是想参考这个教程来部署：https://digu.plus/post/8034746f42b3495fbb19926e3fb8ec4f/ 然而部署过程中翻了车 这个教程新版教程（顺便总结一下我翻的车） 数据库选择 Umami支持MySQL和PostgreSQL数据库，选择自己喜欢的数据库进行数据初始化即可。下面是几个免费的数据库服务，这里选择的是ElephantSQL，当然，并不限于这些。 目前www.jsdelivr.ren免费数据库如下： MySQL：FREEDB.TECH、db4free、SQLPub PostgreSQL：ElephantSQL、Supabase 数据库部署 目前已知Supabase部署失败原因： MySQLPostgreSQLFREEDB.TECHdb4free（不推荐，官网访问较慢）SQLPub（推荐）打开FREEDB.TECH，注册登录，创建数据库和用户 得到你的数据库和密码： 组合一下： 1mysql://（DATABASE USER）:（PASSWORD）@（HOST）:（PORT）/（DATABASE NAME）注意事项：这个数据库疑似国人开办，建议用国内邮箱收验证码，国外的基本收不到 （转自：https://www.freeaday.com/2023/01/db4free/ 的一条评论） 打开[db4free](https://www.db4free.net/)，点击“注册免费账号”，输入信息然后点击“注册”，一会后你会收到如下邮件： 访问邮件提供的确认网址，数据库就创建成功了 然后将你设置的信息替换掉下面括号里的内容（注意：括号得去掉）： 1mysql://（你设置的数据库用户名）:（你设置的数据库密码）@db4free.net:3306/（你设置的数据库名）访问SQLPub，输入账号密码，点击申请，申请成功后会有如下提示 然后将里面的替换掉下面括号里的内容（注意：括号得去掉）： 1mysql://（数据库用户）:（数据库密码）@（数据库地址）/（数据库名称）Supabase（推荐）ElephantSQL打开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，推荐使用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提示这个错误： 建议重新新建数据库，还不行的话更换别的数据库"},{"title":"盘点我访问过的古老站点","path":"posts/12779/","text":"秘密花园（www.yini.org ） 第一次认识这个站点，还得从我的企划：Prism Online开始—— 其实这个企划的名字不是我自定的，而是为了纪念zia之前为Win98复活realplayer做的站点：Prism Online 这个网页被我保存下来了，又因为是连Win98的IE都能访问，所以页面保存完整： 右上角的“秘密花园网”顿时就让我来了兴趣，以为这是zia偷偷搞得项目，就访问了这个站点 结果你们看一下时间： 好家伙1999？那时候我还没出生吧（我05后，年龄早就说出来了，只不过没加入关于页面而已。。。。。。） 进入主页（点中间的Enter进入主页，而不是按Enter键！），引入眼帘的是这个页面： 伴随着这个页面的出现还有这首歌： Your browser does not support the audio tag. 这首歌是Song from a secret garden的钢琴版 歌曲的出现，不仅给站点带来了一丝神秘感，还奇妙地契合“秘密花园”这个名字 （虽然这个版本我不喜欢听，我更喜欢听原版的，原版更有意境） 下面说一下在这个花园里我喜欢的背景音乐（管理者貌似给很多页面设置了独立的背景音乐） 1.秘密花园历史博物馆页面 Your browser does not support the audio tag. 这个音乐我查了很久都查不到结果（甚至听歌识别都没有识别到），有谁知道的跟我说一下 2.秘密花园更新记录页面 Your browser does not support the audio tag. “亲爱的旅人啊”的童声版（冷知识：“亲爱的旅人啊”是always with me的中文填词版，就是为了表达对《千与千寻》的喜爱） 3.秘密花园少女漫画页面 Your browser does not support the audio tag. 这个音乐我查了很久也查不到结果（听歌识别也没有识别到），有谁知道的跟我说一下 4.秘密花园欧美动画介绍————愤怒的小鸟 Your browser does not support the audio tag. 愤怒的小鸟主题曲吉他版（这个旋律。。。。。。爷青回） 5.秘密花园中国动画介绍————大鱼海棠 Your browser does not support the audio tag. 周深的《大鱼》（没什么多说的，就算是放在2023年都很好听） 5.秘密花园中国动画介绍————喜羊羊与灰太狼 Your browser does not support the audio tag. 喜灰原始世界历险记的主题曲——李紫昕的《知己》（这个主题曲也成为我看喜灰以来最熟悉的主题曲） 6.秘密花园游戏图片————仙剑四（1） Your browser does not support the audio tag. 仙剑4主题曲——回梦游仙（这首歌我好像在哪听过。。。。。。等会我父亲好像玩过这游戏，怪不得那么熟悉） 7.秘密花园游戏图片————仙剑四（2） Your browser does not support the audio tag. 回梦游仙（心然版，是仙剑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年就有人围绕机械和高达搭建了同人站（这好像不算同人站吧），只能说国内高达能吸引那么多人有他们的一份功劳 还有很多站点就不再说了，再说下去空间不够了"},{"title":"博客大更新","path":"posts/53662/","text":"为什么要重写博客 随着我考试完成和我新网名（也就是我那个笔名：王九弦）的使用，我发现原先的主题配色已经不太适合我现在的人设，因此不得不对博客进行重写 （我甚至还用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。。。。。。） （后面实在不知道怎么写了，那就这样吧。。。。。。。）"},{"title":"Gameload示例","path":"posts/20412/","text":"安装GameLoad   安装GameLoad 游戏示例——优米酱GO 点击游玩： $(document).ready(function(){ if ($.browser.chrome === true && $.browser.versionNumber >= 45) { //detect Chrome 45+ var myJsonString = JSON.stringify({ title: 'Game Title', file: 'https://files.blog.sinzmise.top/unity3d/yumichan.unity3d', type: \"unity\", width: 800, height: 600 }); try{ //IE8 does not support window.btoa var insert_data = window.btoa(myJsonString); }catch(e){ functionToHandleError(e); } $('#unityPlayer-yumichan').prepend('  使用GameLoad游玩'); } }); 源码示例 12345678910111213141516<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: 'Game Title', file: 'https://files.blog.sinzmise.top/unity3d/yumichan.unity3d', type: "unity", width: 800, height: 600 }); try{ //IE8 does not support window.btoa var insert_data = window.btoa(myJsonString); }catch(e){ functionToHandleError(e); } $('#unityPlayer-yumichan').prepend('<a href="gameload://' + insert_data + '/" class="css-button post-button-gameload"><i class="fa-solid fa-arrows-rotate"></i>  使用GameLoad游玩</a>'); }});</script><div id="unityPlayer-yumichan"></div>"},{"title":"GameLoad","path":"posts/21375/","text":"前言 自从在我的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加载： 插件示例我先放上去了，后面我再来搞这玩意吧： 12345678910111213141516171819<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>"},{"title":"本站已经更换新域名","path":"posts/646/","text":"自从我微信绑定了银行卡（而且每个月我都会有50块）以来，我都没有舍得用我自己的钱注册域名 但这次终于舍得注册域名了，而且注册了3年 但原先我在freenom上面注册的域名仍然保留 （因为后面要备案才能用国内线路。。。。） 现在本站已经正式切换到blog.sinzmise.top （www.sinzmise.top的话等我后面重写完个人主页再说）"},{"title":"我使用过的头像","path":"posts/42487/","text":"我不知道我换了多少次头像了，那就列出我换过的头像合集吧 2018年之前 忘了 2018 ———— 2019 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/SinGO.5j6d1hbj6xc0.webp\",\"alt\":\"SinGO\"}] undefined 这是我自己p的一个头像，可以用“丑”来形容 2020 ———— 2022.10 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/old.5jrmp3mdt080.webp\",\"alt\":\"StarInno\"}] undefined 这是使用时间最长的一个头像，是在Wallhaven上找到的 原链接 原画师P站UID：66655 （原作者依然有活动，甚至画了赛马娘和ba的角色，可惜我使用的头像对应的这幅画在P站下架了） 顺带一提这幅画好像是在2013年出现的，也不知道原作者知道2020的时候我选这幅画当头像会是什么心情 2022.10 ———— 改名之前 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-283457a15e6df38a.l3nzkep0n40.webp\",\"alt\":\"Cache_-283457a15e6df38a\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-2ac4a4638f5c641b.6g8asgw18j00.webp\",\"alt\":\"Cache_-2ac4a4638f5c641b\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-5dc5e91d9cc55f1b.5wx1mup5euw0.webp\",\"alt\":\"Cache_-5dc5e91d9cc55f1b\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_10980517ca897c65.tjtkui4uv80.webp\",\"alt\":\"Cache_10980517ca897c65\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_755d2354a12c199f.6zus1jun5000.webp\",\"alt\":\"Cache_755d2354a12c199f\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_4735700719bfdf53.5us8rk5zg5s0.webp\",\"alt\":\"Cache_4735700719bfdf53\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-7d80c7ccc004e09f.6xq69h6wseg0.webp\",\"alt\":\"Cache_-7d80c7ccc004e09f\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_4df65b148bcc87fb.4ovrgxf4c2o.webp\",\"alt\":\"Cache_4df65b148bcc87fb\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-1a81870a26c4f745.53d53ty9qyg0.webp\",\"alt\":\"Cache_-1a81870a26c4f745\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_30918d328cbf8974.38380nw6y9g0.webp\",\"alt\":\"Cache_30918d328cbf8974\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-4eb0a48a4eae79e6.6xry2g1tc000.webp\",\"alt\":\"Cache_-4eb0a48a4eae79e6\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-5015748e3ffc0fc6.3v0jq8b2oso0.webp\",\"alt\":\"Cache_-5015748e3ffc0fc6\"}] undefined 从这个时候开始我就开始使用ai绘画来画我的头像了 （其实从2021年开始我就想把我这从wallhaven上找到的头像换掉了，但那时候其实都没有找到个好头像，直到ai绘画的诞生） 改名之后 ———— 2022.11 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_fecb56f674fa9fe.5wk8tmxysvs0.webp\",\"alt\":\"Cache_fecb56f674fa9fe\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_2e574b5ffb690395.2bvbeizd71s0.webp\",\"alt\":\"Cache_2e574b5ffb690395\"}] undefined 这个版本是我换绘画工具之前的版本 2022.11 ———— 2023.3 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_7c570697a80d182a.5gsp5chvmro0.webp\",\"alt\":\"Cache_7c570697a80d182a\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-277b148f49b79ebd.2exp0lvzpdxc.webp\",\"alt\":\"Cache_-277b148f49b79ebd\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-277b148f49b79ebd.2exp0lvzpdxc.webp\",\"alt\":\"Cache_-277b148f49b79ebd\"}] undefined 这个是我换绘画工具之后生成的头像，也是我使用ai绘画以来生成的最满意的头像 因此第三个头像的人设成为我脑中“婉清”的人设 2023.3 ———— 2023.05.15 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_47bd0dbc6b408903.17bs9522qg5c.webp\",\"alt\":\"Cache_47bd0dbc6b408903\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/MYPictures@master/Cache_-261cb991a7c7a4fc.2a30pme95qxw.webp\",\"alt\":\"Cache_-261cb991a7c7a4fc\"}] undefined 这个版本算是第一次把“婉清”的人设添加到ai绘画中的设定 第二张成为我用ai绘画生成头像以来生成的最为细腻的头像 （最短命一版，因为游戏上传头像审核不通过，且第二个相比来说很模糊。。。。。。） 2023.05.15 ———— 2023.07.01 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20230525/psc.tur1juwwcq8.webp\",\"alt\":\"psc\"},{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20230525/psc.28fxw2ub7uvw.webp\",\"alt\":\"psc\"}] undefined 从这一代开始，弃用“芦雪婉清”这个名字，更名为“凌雪玉清” 她的Gacha人设也就是在这一代诞生的 （我给她换名字是因为原先的“婉清”不适合她的Gacha人设。。。。。。） 2023.07.01 ———— 今天 [{\"url\":\"https://jsd.cdn.storisinz.site/gh/SinzMise/picx-images-hosting@master/20230704/avatar.221tx2miyvsw.webp\",\"alt\":\"avatar\"}] undefined 这一代开始风格大变换，同时启用“王九弦SZ·Ninty”这个名字 （“王九弦”是我的笔名，真名等域名备案后揭露）"},{"title":"千千静听复活教程","path":"posts/54481/","text":"你好，没错，我中考前来更新了 （现在的情况是尽量有时间更新就更新） 视频教程 文字版 安装千千静听 1.下载千千静听安装包和本地歌词服务端： 安装包(b1vh) 2.安装千千静听 “想安装的组件”这里建议全部勾选！ 安装完成后，建议别勾选“百度超级搜霸” 安装本地服务端 在千千静听的安装目录下新建“NCAB”文件夹 把下面这个压缩包里的文件解压到NCAB文件夹下面 本地服务端 进入NCAB文件夹双击NCAB.exe 点击“使用反馈”→“生成配置文件” 选择你千千静听的安装目录，提示成功后启动千千静听测试 能显示歌词就已经成功了 注意：每次必须先运行一次NCAB服务端，之后运行千千静听才能下载歌词 懒人包 我也说过的，每次必须先运行一次NCAB.exe，之后运行千千静听才能下载歌词 于是我做了个懒人包，直接运行start.bat就能同时开启千千静听和NCAB服务端 懒人包 注意 1.我不是歌词服务器作者，也请别把我误会成原作者 2.这个版本实测会有两个歌的歌词缝合在一起的BUG（可能是我这边的问题，不知道你们那边有没有） 3.Win10用户打开千千静听可能会无响应，请重新运行bat，然后在“检测到千千静听正在运行”这个提示下按1重启千千静听（不行的话再试一次） 放在最后 这个视频是我有史以来播放量最高的一期视频了 说真的，2023年了，还有人怀念这个播放器 为什么在这遍地都是音乐播放器的年代，还有人使用一个已经停更的软件呢？ 因为只有一个词：情怀 在那个人人都在用XP系统的年代，完全免费、占用空间小、支持中文的精美界面以及能显示歌词的千千静听牢牢地抓住了用户们的心 这个播放器也因此打败了当时的传统播放器巨头Winamp 2，成为了音乐播放器领域的新霸主，2006年前后成为市场占有率第一的音乐播放软件。 也因此，在现在这个本地音乐播放器百花齐放的年代，我依然还会把千千静听留在我的电脑上"},{"title":"一个通知！！！","path":"posts/48762/","text":"站长即将开学，而且6月要中考 因此博客得暂停更新一段时间，日记站和博客说说会减缓更新速度（但并不是不会更新） 站长中考后会更新速度恢复正常 在这里站长也希望跟我同年龄段的学生努努力，争取中考考出个好成绩，为我们的人生添加一份光彩！"},{"title":"自建Meting服务","path":"posts/61417/","text":"前言 听人说Meting官方API证书过期了，也就是说MetingAPI得自建了 然后很快啊，有人就搞出了自建MetingAPI的Vercel版本 教程 后端部署 Vercel部署（推荐）服务器部署点击下方按钮，跳转至 Vercel： 名字随便写，然后点击“Create” 看到这个就算成功了 去https://github.com/injahow/meting-api/releases 下载编译好的压缩包上传到服务器上（服务器必须开启跨域！） 前端部署 Butterfly主题 编辑[Blogroot]\\themes\\butterfly\\layout\\includes\\third-party\\aplayer.pug 12345link(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代码 123<script>var meting_api='https://（你的api地址）/api/?server=:server&type=:type&id=:id&auth=:auth&r=:r';</script>"},{"title":"小康大佬的说说方案 ———— ispeak搭建教程","path":"posts/38964/","text":"前言 搞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部署（推荐）服务器部署docker 部署 点击下方按钮，跳转至 Vercel 进行部署。 配置环境变量： 环境变量可能随项目的迭代而增加必填的环境变量，具体请参考官网 —— kkapi环境变量 重新部署 绑定域名（建议） 初始化账户 浏览器访问： 你刚刚复制的地址/api/user/init?userName=你想设置的账户名 如果不指定用户名则自动将账户名设置为admin 以下内容来自：https://kkapi.js.org/guide/setup/deploy.html#第二种部署姿势：服务器部署 克隆源代码 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，将环境变量写入其中即可。例如： 123456PORT=3000DATABASE_URL=mongodb://127.0.0.1:27017/kkpaiopen?authSource=adminDATABASE_USER=rootDATABASE_PASSWORD=root# 加密密钥 测试SECRETKEY=xxxxxxxxxxxxxxx 其中 PORT 表示启动的端口 启动项目 pm2 start pm2.json 然后通过命令curl http://127.0.0.1:3000/api/user/init检查是否允许成功 image-20220227101623911 更新项目 进入项目并执行一下命令 123git pullyarn buildpm2 restart pm2.json尚未写完 部署kkadmin 介绍：kkadmin是kkapi的后台，方便发布说说 以下部署姿势你只需要任选其一即可，无需全部部署。 Vercel部署CF pages部署（推荐）其他环境部署由于构建 kkadmin 时部分依赖文件需要 nodejs16 及以上版本才可以安装，因此不能将源代码扔给 vercel 进行构建。 所以只能够利用 GitHub actions 构建完成后将产物扔给 vercel 进行使用 1. Fork这个项目：https://github.com/kkfive/kkadmin-open/ 2. 配置变量 VITE_GLOB_API_URL（必选） 构建actions 部署到Vercel 复制下面这个网址 1https://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 构建为例介绍 1. fork项目（可直接fork） 2. 导入项目 配置环境变量 环境变量参考：官网 —— kkadmin环境变量 等待构建完成后即可 其他环境部署基本可以直接使用 GitHub 构建后的 vercel 进行，毕竟只是 HTML 前端配置 进入后台，查看个人ID 前端引入 ipseak 使用 marked 依赖和 highlight 依赖，为了减少打包体积，并没有将该依赖打包，因此需要使用 cdn 进行外部引入。 使用Waline使用Twikoo使用Discuss使用Artalk 在博客目录下运行hexo new page speaks 编辑[blogroot]\\source\\speaks\\index.md，将里面的内容替换成： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970---title: 说说comments: falseaside: false---{% raw %}<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> {% endraw %} 在[blogroot]\\source\\speaks\\下新建info.md，内容为下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374---title: Speakaside: falsecomments: falsedescription: 欢迎来到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>{% btn '/speaks/',查看全部,far fa-hand-point-right,block center blue larger %}<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，将里面的内容替换成： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869---title: 说说comments: falseaside: false---{% raw %}<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> {% endraw %} 在[blogroot]\\source\\speaks\\下新建info.md，内容为下： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273---title: Speakaside: falsecomments: falsedescription: 欢迎来到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>{% btn '/speaks/',查看全部,far fa-hand-point-right,block center blue larger %}<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，将里面的内容替换成： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970---title: 说说comments: falseaside: false---{% raw %}<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> {% endraw %} 在[blogroot]\\source\\speaks\\下新建info.md，内容为下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374---title: Speakaside: falsecomments: falsedescription: 欢迎来到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>{% btn '/speaks/',查看全部,far fa-hand-point-right,block center blue larger %}<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，将里面的内容替换成： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071---title: 说说comments: falseaside: false---{% raw %}<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> {% endraw %} 在[blogroot]\\source\\speaks\\下新建info.md，内容为下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374---title: Speakaside: falsecomments: falsedescription: 欢迎来到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>{% btn '/speaks/',查看全部,far fa-hand-point-right,block center blue larger %}<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>"},{"title":"butterfly主题添加音乐页面（适配手机）","path":"posts/22945/","text":"前言 本博客音乐页面已经换成了安知鱼大佬的方案 没有音乐页面怎么行，花里胡哨的都安排上，本来想摆烂直接上aplayer，但考虑到我不会写样式（虽然我可以自学） 所以我音乐页面用的是Chuckle的方案 （等会为啥开头这么像这篇文章） 原本我是想做单页背景透明的，但我发现单页背景透明和我博客背景冲突导致丑的一批，所以我把背景换成了渐变动画 以下是我之前的音乐页面： 别问为啥是之前，这个音乐页面手机访问是这样的： 当时我还以为是浏览器的问题，立即换成了Chrome浏览器，结果： （后来我用手机访问了那位大佬的音乐页面，也是一样出现这个问题，之前有人反映过这位大佬，大佬说自己去适配，但我懒得适配，于是就有了这个教程 ） 教程 1.02.0这个教程是我基于https://www.php.cn/xiazai/js/6169 做的适配butterfly主题的版本，但后面我发现这跟csdn里的html好看的音乐播放器（希望csdn那篇文章的作者看完不会在意） 目前博客已经弃用这个方案，改用2.0版本 1. 新建[Blogroot]\\themes\\butterfly\\layout\\includes\\page\\music.pug，内容如下： 点我查看代码 12345678910111213141516171819202122232425262728293031323334353637383940414243444546link(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) 2. 在[blogroot]\\themes\\butterfly\\source\\css\\目录下新建musics.css,内容如下： 点我查看代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382::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;} 3. 在[blogroot]\\themes\\butterfly\\source\\js\\目录下新建player.js,内容如下： 点我查看代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234// Designed by: Mauricio Bucardo// Original image: https://dribbble.com/shots/6957353-Music-Player-Widget"use strict";// add elemntsconst 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 functionsfunction 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 eventssliderContext.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}; 4. 编辑[blogroot]\\themes\\butterfly\\layout\\page.pug 12345678910111213 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 5. 编辑[blogroot]\\themes\\butterfly\\_config.yml，在末尾添加： 123456789101112131415musicplayer: 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: '歌曲链接' 6. 将svg.7z压缩包里的五个文件放在[blogroot]\\themes\\butterfly\\source\\svg 里面 （密码：gt97） 7. 运行`hexo new page music` 8. 编辑[blogroot]\\source\\music\\index.md，把里面的内容替换成： 12345---type: 'music'comments: falseaside: false---2.0效果预览 新建[Blogroot]\\themes\\butterfly\\layout\\includes\\page\\music.pug（有搞1.0的话直接把music.pug里面的内容全都替换成下面的内容），内容如下： 点我查看代码 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061link( 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) 2. 将下面压缩包内五个文件夹全都解压在[blogroot]\\themes\\butterfly\\source\\assets 文件夹里面 （密码：3r5i） 1.0想升级成2.0的，下面的步骤可以不用做 3. 编辑[blogroot]\\themes\\butterfly\\_config.yml，在末尾添加： 123456789101112131415musicplayer: 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: '歌曲链接' 4. 运行`hexo new page music` 5. 编辑[blogroot]\\source\\music\\index.md，把里面的内容替换成： 12345---type: 'music'comments: falseaside: false--- TO DO 播放列表 适配手机端 npm插件化（Akilar行为）"},{"title":"再见2022，你好2023","path":"posts/23021/","text":"封面图片来自：https://www.tukuppt.com/muban/vnjzjzvp.html 这是我在2022年的最后一篇文章。 时间过得真快，我刚迁移完博客，2022就快结束了 对此我并没有想说的 （不是懒得说是真的没灵感） 不知道要说什么，也不知道有什么话要跟大家说 那我就先祝大家新的一年开开心心吧！ 再见，2022。你好2023。"},{"title":"新起点，新出发","path":"posts/16107/","text":"你好，我是小星鑫233，当然现在请叫我“SinzMise”或“Sinz” 这是“SinGO博客”停止更新且我更换名字的第一篇文章 博客的迁移，代表着原SinGO博客 和 Hexo-Theme-SinGO主题正式停止更新 为什么要停止更新？ 1.名字改了，头像也改了 （所以别叫我“小星鑫233”了。。。。） 2.原先SinGO主题bug贼多，我又没时间修（更何况我开学，虽然大部分时间都有空。。。。。说难听一点就是懒） 懒得写了 （其实是写一半突然忘记要后面要补充什么了。。。。）"}]