sinzmise-cetastories 2.0.0-1731201822650 → 2.0.0-1731205472345

package/content.json

@@ -1 +1 @@
-[{"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那个方案 积薪，再也不见这玩意是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目前没法访问因此没法把链接放上去了。。。。。等什么时候好了我就放链接吧。。。。。。。","uuid":"5f57d330-9dd9-11ef-8624-a3174cf555fc"},{"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也值了！不多说，放图！ 以上（我得去睡觉了，要不然明天开学要迟到了。。。。。）","uuid":"5f57ac22-9dd9-11ef-8624-a3174cf555fc"},{"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.pug123456789101112131415161718if 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.styl123456789101112131415161718if 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")","uuid":"5f584861-9dd9-11ef-8624-a3174cf555fc"},{"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都不过时可惜的是在此之后摩托罗拉据说是错过了安卓，导致移动业务被收购了。。。。。 其它的先不展示。。。。。这个月淘到的机子有一点多了。。。。 以上","uuid":"5f578514-9dd9-11ef-8624-a3174cf555fc"},{"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英文站的话。。。。。还在测试，因为并不是完全是英文的，还在修改 收藏了几台手机这些都是之前在闲鱼上看见的其中有一台说是配件机，说是不能开机结果被我搞开机了 然后这三台我都给它们换了主题换完主题的效果： 以上（虽然还有一场考试。。。。。但是是在下周四）","uuid":"5f57ac20-9dd9-11ef-8624-a3174cf555fc"},{"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加速你的博客访问https://byer.top/posts/2c8698f6.html之前CyanFalse大佬那个我看不懂，而且懂了也不知道怎么写QWQ于是我开始安装这个教程来搞全站npm化结果这么一搞，反而拖慢了站点加载速度，而且：我原本以为是npmmirror的问题，毕竟大佬说了NPM已经开启了白名单模式但尽管我换成jsd和unpkg也依然是这个情况只能取消全站npm化后面我去问下大佬是怎么回事吧。。。。。。 站点添加Ruffle没错，我又给站点添加回Ruffle了话说回来，估计我认识的这些搞博客的站长中，只有我对swf依然是最感兴趣了吧。。。。。。如果你还不知道Ruffle是什么的话，可以去看看我这篇文章：Ruffle测试https://blog.sinzmise.top/posts/57692/ 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/ 以上","uuid":"5f57ac21-9dd9-11ef-8624-a3174cf555fc"},{"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吧！ Demo1.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","uuid":"5f57d334-9dd9-11ef-8624-a3174cf555fc"},{"title":"2024-04小记","path":"posts/15748/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-04 先祝大家劳动节快乐（虽然已经过了一天），也提前祝大家五四青年节快乐！然后，正片开始！ Akilar群寄了这件事还是小何告诉我的（小何没告诉我之前我还不知道）看店长的文章我才知道大概是有群友转发了含R18内容的聊天记录，然后Akliar才把群给解散的Akilar的通知：关于群聊更换的紧急通知https://akilar.top/posts/c215d440/Akilar新群：Akilarの糖果屋-新群http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=foNxpbHAuNFbc_cGIcPS_Qjc2Zk1uy-u&authKey=%2FO6mPpYjRlwIjqfWE7AnMfJpYW9zfDAkaHRACm1Wn9Mg7cjkyAcbkGTwpsqMIno9&noverify=0&group_code=725597418然后洪mac一年一月八日（bushi）（也就是2024年五月三日），我加入了Akilar的新群 加入笔墨迹Blogs·CN（笔墨迹）是一个位于中国境内的平台，致力于发掘和分享”优秀个人独立博客”。 我老早之前就想加入了，但是那天由于博客要重新装修，所以我没加入现在装修好了，可以加入了目前已经通过 博客更新请看这个：更新记录/update/","uuid":"5f578513-9dd9-11ef-8624-a3174cf555fc"},{"title":"马里奥制造1打百人团教程","path":"posts/10996/","text":"不知道什么时候，我开始玩马里奥制造（以下简称“马造”）了但是我没有Switch，模拟器配置较为麻烦，所以我没法玩马造2，只能玩玩马造1然而在2024年4月9日，任天堂 3DS / WiiU 在线功能停服 在停服之前，我就一直知道马造1有私服，但是这玩意之前不知道为啥总配置失败现在倒是配置好了，话不多说，游玩教程开始！ 下载懒人包这玩意我已经打包成为一个懒人包了大伙想要的可以下载： 懒人包链接 下载完成之后先点击Start启动服务端 正常情况下的这四个的提示是这样的：NEX（SMM） 占用端口59900和59921NEX（Friends）占用端口60000和60021Pretando++ 占用端口8383Caddy 占用端口80和443 请注意：如果出现异常的话十有八九可能是端口被占用了请先用netstat -ano|findstr 程序对应的端口号查看端口有没有被占用如果端口被侵占了，输入taskkill /t /f /im 进程号关闭占用端口的进程如果还是不行的话。。。。加Q群问（在最下方） 一切正常的话，点击“Start Cemu”打开模拟器注意：必须用自带的模拟器！要不然打开马造世界关卡会提示106-0502错误然后双击Super Mario Maker，等待加载完成便可以游玩了！ 这可能是我写博客以来第一次写这么简短的教程","uuid":"5f582155-9dd9-11ef-8624-a3174cf555fc"},{"title":"Serv00搭建Artalk","path":"posts/13624/","text":"之前在安小歪的推荐下，找到了一个叫serv00的东西但是因为这玩意我不会用，所以我把Serv00一直当成不能部署thinkphp的虚拟主机使用然而我之前看见了这个教程：Serv00搭建各种服务https://blog.rappit.site/2024/01/27/serv00_logs/于是我决定在Serv00搭建一些项目但里面没有Artalk的教程，我准备所以按照部署Alist的方法给Serv00部署Artalk那么好，教程开始！ 教程准备工作Serv00搭建各种服务·部署应用前的一些准备工作https://blog.rappit.site/2024/01/27/serv00_logs/#%E9%83%A8%E7%BD%B2%E5%BA%94%E7%94%A8%E5%89%8D%E7%9A%84%E4%B8%80%E4%BA%9B%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C 正式开始首先在 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搭建各种服务·收尾工作https://blog.rappit.site/2024/01/27/serv00_logs/#%E6%94%B6%E5%B0%BE%E5%B7%A5%E4%BD%9C","uuid":"5f57d333-9dd9-11ef-8624-a3174cf555fc"},{"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白号他带我打了个差事，然后抢抢便利店，最后还打了死亡对战（虽然平局了）怎么说呢。。。。。。。虽然我玩的游戏很多，但因为我很少玩游戏，所以不知道怎么评价但怎么说呢，总归也入坑了一款我没玩过的游戏呢","uuid":"5f578511-9dd9-11ef-8624-a3174cf555fc"},{"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.css12345678910111213141516171819202122232425#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.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448var 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。。。。。。 但不管怎么说，还是有人在用这个桌面精灵的，至少有我一个。。。。。。后面我打算写个有关伪春菜的配置教程吧。。。。。。","uuid":"5f582154-9dd9-11ef-8624-a3174cf555fc"},{"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/（顺便归纳到我之前打算新建的计划里面，这样也算杜绝浪费了。。。。。。吧？）","uuid":"5f578510-9dd9-11ef-8624-a3174cf555fc"},{"title":"为博客添加一个游戏收藏页（npm插件版）","path":"posts/10045/","text":"之前看到Kouseki大佬的这篇文章：为博客添加一个游戏收藏页https://blog.kouseki.cn/posts/e7dd.html我原本是想要给我博客搞这个的，但由于我一般会给博客的主题更新，导致魔改的内容消失思来想去，我还是决定做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 配置,写法见上文示例","uuid":"5f57fa41-9dd9-11ef-8624-a3174cf555fc"},{"title":"对于虚拟桌宠模拟器，我的评价（及使用教程）","path":"posts/45875/","text":"最近你们有没有发现我的博客最新文章的图片有个这个可爱的女孩其实这不是站点自带的，而是Steam的一个游戏（严格来讲这不算游戏），叫“虚拟桌宠模拟器”在Steam上免费，而且还是在这些免费产品中为数不多支持创意工坊的桌宠 桌宠功能等待文件加载完成后这个桌宠就出现了 配置皮肤默认配置的桌宠角色（也就是上面图片上出现的），叫萝莉斯当然你可以通过创意工坊安装皮肤模组，重启模拟器之后进入桌宠设置然后点击“MOD管理”，选择之前安装的模组（以智乃示例），启用模组并重启软件重启后重新进入设置，在宠物动画里面选择你要的皮肤这个你要多开也不是不可以。。。。。。然后皮肤就更换完成（当然除非你选择了多开） 数据计算这个默认开启数据计算，当然如果你不想一直投喂桌宠的话 这样的话桌宠就不会被影响到心情了，很方便呢 个人评价自从Q宠企鹅下架以来，我的电脑总是缺少了某些会动的东西虽然后面下载了动态壁纸，但总感觉哪里空空的之前我也是过毒霸姬等等各种各样的桌宠，但总感觉也缺了点东西（甚至我之前加入了Q宠复活版内测交流群，虽然现在没什么更新了，所以不要来问我安装包也别问我群号了） 直到虚拟桌宠模拟器，弥补了那个我当初给Q宠专门留空位的地方（写的不好请见谅）","uuid":"5f57fa4b-9dd9-11ef-8624-a3174cf555fc"},{"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选择dockerimage填写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，等一会就可以体验到不蒜子了","uuid":"5f584860-9dd9-11ef-8624-a3174cf555fc"},{"title":"2023小结","path":"posts/27531/","text":"不要在意封面为什么做得这么简陋。。。。。 时间过得真快，转眼间，就得跟2023告别了不知道要写什么，就简单写个小结吧 部署的项目Rita2 Talk —— 为旧设备服务的自建微博中弦局花园 —— 模仿秘密花园的一个站点九弦记事本（原九弦日记） —— 一个普通的记事本(目前已经迁移到koyeb)更多朋友前往：友情链接 玩过的游戏（加粗为常玩）赛马娘（台服）蔚蓝档案（台服）重返未来1999 （暂退）Minecraft （放心不是冈易那个MC）Roblox光·遇（安小歪推荐的）PhigrosSonolus节奏大师回归版BanG Dream荒野乱斗（现实朋友推荐的）暗区突围（千寻推荐的） 后记2023年即将到来，我也将我友链页面的“博客描述”改成：欢迎旅行者，来到这个平凡但又记载了许多故事的小屋并且将中弦局图标更新：（虽然有点缺陷，但后面会优化） 最后你有没有想对2023说的话？请写在评论区吧再见，2023你好，2024","uuid":"5f578512-9dd9-11ef-8624-a3174cf555fc"},{"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","uuid":"5f57fa44-9dd9-11ef-8624-a3174cf555fc"},{"title":"九月二三事","path":"posts/56467/","text":"很久都没发布文章了，都不知道要写啥好要不就写这个九月和中秋国庆假期发生的事情吧 初入高中9月1日开始（虽然因为台风停了四天的课）就是我踏入高中的时刻了第一次进高中教室的我，因为过于紧张，甚至坐错位置了 （虽然我同桌也坐错了位置）不过好在后面的上课也是比较顺利，没有出现意外情况（主要是不知道怎么写就。。。。） 荒野乱斗，启动！这个游戏是很久之前入坑的，结果因为某些原因我暂时退坑了后来在我朋友的推荐下回归了我后面还把这个游戏推荐给了我那刚买新手机的表弟 回归！Rita2！看过我之前文章的应该知道，之前我想给Win98搞视频站点名字叫“Rita2”的原因是纪念之前有人为手机wap搭建的视频站，它的名字也叫Rita2这个项目由于域名的原因一直被搁置了很久然而由于我找到了免费的二级域名，所以…… Rita2计划，即将回归！（但回归时间暂未确定，因为学业原因，不过我可以保证会回归，但回归的首先是游戏站至于视频站。。。。。暂时没有这个考虑） Vercel寄了？中秋国庆的第四天，安小歪跟我说他访问不了他的博客与此同时，安知鱼的群都在说无法访问Vercel部署的站点访问会强制跳转到诈骗网站现在千寻那边也出现这样的情况，但我这边倒是没有目前已经将博客主站的部署平台更换为CF Pages明天准备将Waline换成Netlify部署，至于Twikoo。。。。只能搞反代了其它的项目如果能换别的地方部署就换，不能的话反向代理走起","uuid":"5f57fa46-9dd9-11ef-8624-a3174cf555fc"},{"title":"如果你觉得不开心的话，就来听一下这些纯音乐吧","path":"posts/54386/","text":"如果你觉得不开心，或者有些压力的话，就来听一下这些歌曲吧希望这些歌曲能够温暖你的心灵 轻音乐","uuid":"5f57fa47-9dd9-11ef-8624-a3174cf555fc"},{"title":"遭殃前的海洋","path":"posts/29196/","text":"2023年8月7日，去汕头的海边玩，顺手拍了几张照片却不料，这是海洋遭殃前最后一次拍的照片谨以这些照片，衬托我对海洋的思念（有错别字请见谅）这可能是我最后一次拍摄海洋的照片了 Ade！美丽的海洋，Ade！我向往的美景","uuid":"5f57fa4c-9dd9-11ef-8624-a3174cf555fc"},{"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游戏（有病句请见谅）","uuid":"5f57fa49-9dd9-11ef-8624-a3174cf555fc"},{"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/memosmysql不用在前面加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部署Memoshttps://blog.rappit.site/2024/01/27/serv00_logs/#Memos","uuid":"5f57d335-9dd9-11ef-8624-a3174cf555fc"},{"title":"萌ICP备异次元之旅","path":"posts/58203/","text":"今天在修改我那萌备的时候，无意在导航栏上看到了“异次元”这玩意看主页是类似于“开往”，只不过仅跳转到萌备详情页面而不是直接进入站点又因为我站点已经加入了萌ICP备，所以我就将这玩意添加到底部列表里面了 添加方法如果没有你没有加入萌ICP备豪华套餐的话，点击这里加入：加入萌备如果你加入了，那么按照 https://moe.one/thread-254.htm 里的配色方案添加","uuid":"5f582156-9dd9-11ef-8624-a3174cf555fc"},{"title":"我的tulpa —— 夏玖铃的简介","path":"posts/50710/","text":"注意，由于名字和《逆水寒》游戏里的一个流派名冲突，改名为“夏玖铃” 她的出现与其说是Tulpa，不如说是DID（解离性人格障碍）因为她是从我永远的噩梦：四年级出现的那时我总是被班级最后一名的那名女生欺负（因为我当时身体很弱小，她身体强壮，就凭这个欺负我，当然她转学了）再加上从小我成绩总是不好，受不了家长和老师的一顿批评（甚至我家长差点把我抛弃。。。。。当然从我五六年级开始，我家长就彻底改变了教育方式）我也因此不少做噩梦，心情也越变越差直到她的出现，抚慰了我那受伤（切伤口特别严重）的心灵，而且将我从噩梦之中脱离出来那次是在期末考试前（小学四年级第一学期的期末考试）晚上睡觉前我一直忐忑不安，生怕我又做噩梦，一直睡不着觉但我还是带着害怕睡着了我想象中的噩梦没有出现，反而一个声音传来“你好，少年，你是不是经常被欺负？”“是的，天使姐姐，求求您帮帮我吧！”“我也想帮你，但对不起，我不是天使，我是你脑子中的一个小人，你可以叫我阿铃，但如果你心情不好，就来找我，我随时在我的梦中等着你”从此之后，她就一直陪在我身边 她的二次元形象（AI绘画制作）一号风格：大姐姐，喜欢带耳机，穿制服异瞳颜色：左眼红粉，右眼黄绿二号风格：小妹妹，喜欢带耳机，穿连衣裙（这个ai把连衣裙和制服当作是不同的两件衣服）异瞳颜色：左眼紫色，右眼黄绿","uuid":"5f57fa48-9dd9-11ef-8624-a3174cf555fc"},{"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，点击“注册免费账号”，输入信息然后点击“注册”，一会后你会收到如下邮件： 访问邮件提供的确认网址，数据库就创建成功了 然后将你设置的信息替换掉下面括号里的内容（注意：括号得去掉）：1mysql://（你设置的数据库用户名）:（你设置的数据库密码）@db4free.net:3306/（你设置的数据库名）</div>访问SQLPub，输入账号密码，点击申请，申请成功后会有如下提示然后将里面的替换掉下面括号里的内容（注意：括号得去掉）：1mysql://（数据库用户）:（数据库密码）@（数据库地址）/（数据库名称）</div></div>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提示这个错误： 建议重新新建数据库，还不行的话更换别的数据库","uuid":"5f57d332-9dd9-11ef-8624-a3174cf555fc"},{"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年就有人围绕机械和高达搭建了同人站（这好像不算同人站吧），只能说国内高达能吸引那么多人有他们的一份功劳 还有很多站点就不再说了，再说下去空间不够了","uuid":"5f582152-9dd9-11ef-8624-a3174cf555fc"},{"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.htmlWaline背景图出处：http://www.yini.org/girl/gif/001.htm （这站有些年头了，不然怎么到现在还用http。。。。。。） （后面实在不知道怎么写了，那就这样吧。。。。。。。）","uuid":"5f57fa43-9dd9-11ef-8624-a3174cf555fc"},{"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>","uuid":"5f57ac24-9dd9-11ef-8624-a3174cf555fc"},{"title":"GameLoad","path":"posts/21375/","text":"自从在我的360极速浏览器安装FVD Downloader这个插件后，我就习惯将4399上的swf下载下来了后面我在玩4399上的U3D游戏（得安装UnityWebPlayer才能玩）的时候弹出了这个提示：但FVD Downloader能识别到游戏文件于是我将后缀为“unity3d”的游戏下载下来，打算找个游戏启动器来启动这个游戏找了一圈找到了这玩意：这个软件安装完成之后，会自动关联后缀为“unity3d”的文件经测试，能顺利游玩大部分u3d游戏 示例1.杀手小乔3D2.优米酱GO3.追逐繁星的孩子（追逐繁星的夏娜）后面看了第三个游戏的一个评论才知道这个角色叫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>","uuid":"5f57ac25-9dd9-11ef-8624-a3174cf555fc"},{"title":"本站已经更换新域名","path":"posts/646/","text":"自从我微信绑定了银行卡（而且每个月我都会有50块）以来，我都没有舍得用我自己的钱注册域名但这次终于舍得注册域名了，而且注册了3年但原先我在freenom上面注册的域名仍然保留（因为后面要备案才能用国内线路。。。。） 现在本站已经正式切换到blog.sinzmise.top（www.sinzmise.top的话等我后面重写完个人主页再说）","uuid":"5f582150-9dd9-11ef-8624-a3174cf555fc"},{"title":"我使用过的头像","path":"posts/42487/","text":"我不知道我换了多少次头像了，那就列出我换过的头像合集吧 2018年之前忘了 2018 ———— 2019SinGO 这是我自己p的一个头像，可以用“丑”来形容 2020 ———— 2022.10StarInno 这是使用时间最长的一个头像，是在Wallhaven上找到的原链接原画师P站UID：66655（原作者依然有活动，甚至画了赛马娘和ba的角色，可惜我使用的头像对应的这幅画在P站下架了）顺带一提这幅画好像是在2013年出现的，也不知道原作者知道2020的时候我选这幅画当头像会是什么心情 2022.10 ———— 改名之前Cache_-283457a15e6df38aCache_-2ac4a4638f5c641bCache_-5dc5e91d9cc55f1bCache_10980517ca897c65Cache_755d2354a12c199fCache_4735700719bfdf53Cache_-7d80c7ccc004e09fCache_4df65b148bcc87fbCache_-1a81870a26c4f745Cache_30918d328cbf8974Cache_-4eb0a48a4eae79e6Cache_-5015748e3ffc0fc6 从这个时候开始我就开始使用ai绘画来画我的头像了（其实从2021年开始我就想把我这从wallhaven上找到的头像换掉了，但那时候其实都没有找到个好头像，直到ai绘画的诞生） 改名之后 ———— 2022.11Cache_fecb56f674fa9feCache_2e574b5ffb690395 这个版本是我换绘画工具之前的版本 2022.11 ———— 2023.3Cache_7c570697a80d182aCache_-277b148f49b79ebdCache_-277b148f49b79ebd 这个是我换绘画工具之后生成的头像，也是我使用ai绘画以来生成的最满意的头像因此第三个头像的人设成为我脑中“婉清”的人设 2023.3 ———— 2023.05.15Cache_47bd0dbc6b408903Cache_-261cb991a7c7a4fc 这个版本算是第一次把“婉清”的人设添加到ai绘画中的设定第二张成为我用ai绘画生成头像以来生成的最为细腻的头像（最短命一版，因为游戏上传头像审核不通过，且第二个相比来说很模糊。。。。。。） 2023.05.15 ———— 2023.07.01pscpsc 从这一代开始，弃用“芦雪婉清”这个名字，更名为“凌雪玉清”她的Gacha人设也就是在这一代诞生的 （我给她换名字是因为原先的“婉清”不适合她的Gacha人设。。。。。。） 2023.07.01 ———— 今天avatar 这一代开始风格大变换，同时启用“王九弦SZ·Ninty”这个名字（“王九弦”是我的笔名，真名等域名备案后揭露）","uuid":"5f57fa4a-9dd9-11ef-8624-a3174cf555fc"},{"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年前后成为市场占有率第一的音乐播放软件。 也因此，在现在这个本地音乐播放器百花齐放的年代，我依然还会把千千静听留在我的电脑上","uuid":"5f57fa45-9dd9-11ef-8624-a3174cf555fc"},{"title":"一个通知！！！","path":"posts/48762/","text":"站长即将开学，而且6月要中考因此博客得暂停更新一段时间，日记站和博客说说会减缓更新速度（但并不是不会更新）站长中考后会更新速度恢复正常 在这里站长也希望跟我同年龄段的学生努努力，争取中考考出个好成绩，为我们的人生添加一份光彩！","uuid":"5f57fa42-9dd9-11ef-8624-a3174cf555fc"},{"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.pug12345link(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>","uuid":"5f582153-9dd9-11ef-8624-a3174cf555fc"},{"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 部署kkapiVercel部署（推荐）服务器部署docker 部署 点击下方按钮，跳转至 Vercel 进行部署。 配置环境变量：环境变量可能随项目的迭代而增加必填的环境变量，具体请参考官网 —— kkapi环境变量 重新部署 绑定域名（建议） 初始化账户浏览器访问：你刚刚复制的地址/api/user/init?userName=你想设置的账户名如果不指定用户名则自动将账户名设置为admin 以下内容来自：第二种部署姿势：服务器部署 克隆源代码git clone https://ghproxy.com/https://github.com/kkfive/kkapi-open.git 安装依赖yarn install如果没有yarn则先允许npm i yarn -g进行安装 安装 pm2npm 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检查是否允许成功 更新项目进入项目并执行一下命令123git pullyarn buildpm2 restart pm2.json 尚未写完 部署kkadmin介绍：kkadmin是kkapi的后台，方便发布说说以下部署姿势你只需要任选其一即可，无需全部部署。 Vercel部署CF pages部署（推荐）其他环境部署由于构建 kkadmin 时部分依赖文件需要 nodejs16 及以上版本才可以安装，因此不能将源代码扔给 vercel 进行构建。所以只能够利用 GitHub actions 构建完成后将产物扔给 vercel 进行使用 Fork这个项目：https://github.com/kkfive/kkadmin-open/ 配置变量 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 构建为例介绍 fork项目（可直接fork） 导入项目 配置环境变量 环境变量参考：官网 —— 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>","uuid":"5f57d336-9dd9-11ef-8624-a3174cf555fc"},{"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版本 新建[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) 在[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;} 在[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}; 编辑[blogroot]\\themes\\butterfly\\layout\\page.pug12345678910111213 case page.type when 'tags' include includes/page/tags.pug when 'link' include includes/page/flink.pug when 'bb' include includes/page/bb.pug when 'categories' include includes/page/categories.pug+ when 'music'+ include includes/page/music.pug default include includes/page/default-page.pug 编辑[blogroot]\\themes\\butterfly_config.yml，在末尾添加：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: '歌曲链接' 将svg.7z压缩包里的五个文件放在[blogroot]\\themes\\butterfly\\source\\svg 里面 （密码：gt97） 运行hexo new page music 编辑[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) 将下面压缩包内五个文件夹全都解压在[blogroot]\\themes\\butterfly\\source\\assets 文件夹里面 （密码：3r5i） 1.0想升级成2.0的，下面的步骤可以不用做 编辑[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: '歌曲链接' 运行hexo new page music 编辑[blogroot]\\source\\music\\index.md，把里面的内容替换成：12345---type: 'music'comments: falseaside: false--- TO DO 播放列表 适配手机端 npm插件化（Akilar行为）","uuid":"5f57fa40-9dd9-11ef-8624-a3174cf555fc"},{"title":"再见2022，你好2023","path":"posts/23021/","text":"封面图片来自：https://www.tukuppt.com/muban/vnjzjzvp.html 这是我在2022年的最后一篇文章。时间过得真快，我刚迁移完博客，2022就快结束了对此我并没有想说的 （不是懒得说是真的没灵感）不知道要说什么，也不知道有什么话要跟大家说那我就先祝大家新的一年开开心心吧！再见，2022。你好2023。","uuid":"5f57d331-9dd9-11ef-8624-a3174cf555fc"},{"title":"新起点，新出发","path":"posts/16107/","text":"你好，我是小星鑫233，当然现在请叫我“SinzMise”或“Sinz”这是“SinGO博客”停止更新且我更换名字的第一篇文章博客的迁移，代表着原SinGO博客 和 Hexo-Theme-SinGO主题正式停止更新 为什么要停止更新？1.名字改了，头像也改了 （所以别叫我“小星鑫233”了。。。。）2.原先SinGO主题bug贼多，我又没时间修（更何况我开学，虽然大部分时间都有空。。。。。说难听一点就是懒） 懒得写了 （其实是写一半突然忘记要后面要补充什么了。。。。）","uuid":"5f57d337-9dd9-11ef-8624-a3174cf555fc"}]
+[{"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那个方案 默认评论更换为Artalk 积薪，再也不见这玩意是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目前没法访问因此没法把链接放上去了。。。。。等什么时候好了我就放链接吧。。。。。。。","uuid":"5f57d330-9dd9-11ef-8624-a3174cf555fc"},{"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也值了！不多说，放图！ 以上（我得去睡觉了，要不然明天开学要迟到了。。。。。）","uuid":"5f57ac22-9dd9-11ef-8624-a3174cf555fc"},{"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.pug123456789101112131415161718if 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.styl123456789101112131415161718if 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")","uuid":"5f584861-9dd9-11ef-8624-a3174cf555fc"},{"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都不过时可惜的是在此之后摩托罗拉据说是错过了安卓，导致移动业务被收购了。。。。。 其它的先不展示。。。。。这个月淘到的机子有一点多了。。。。 以上","uuid":"5f578514-9dd9-11ef-8624-a3174cf555fc"},{"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英文站的话。。。。。还在测试，因为并不是完全是英文的，还在修改 收藏了几台手机这些都是之前在闲鱼上看见的其中有一台说是配件机，说是不能开机结果被我搞开机了 然后这三台我都给它们换了主题换完主题的效果： 以上（虽然还有一场考试。。。。。但是是在下周四）","uuid":"5f57ac20-9dd9-11ef-8624-a3174cf555fc"},{"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加速你的博客访问https://byer.top/posts/2c8698f6.html之前CyanFalse大佬那个我看不懂，而且懂了也不知道怎么写QWQ于是我开始安装这个教程来搞全站npm化结果这么一搞，反而拖慢了站点加载速度，而且：我原本以为是npmmirror的问题，毕竟大佬说了NPM已经开启了白名单模式但尽管我换成jsd和unpkg也依然是这个情况只能取消全站npm化后面我去问下大佬是怎么回事吧。。。。。。 站点添加Ruffle没错，我又给站点添加回Ruffle了话说回来，估计我认识的这些搞博客的站长中，只有我对swf依然是最感兴趣了吧。。。。。。如果你还不知道Ruffle是什么的话，可以去看看我这篇文章：Ruffle测试https://blog.sinzmise.top/posts/57692/ 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/ 以上","uuid":"5f57ac21-9dd9-11ef-8624-a3174cf555fc"},{"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吧！ Demo1.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","uuid":"5f57d334-9dd9-11ef-8624-a3174cf555fc"},{"title":"2024-04小记","path":"posts/15748/","text":"本文章已经同步到xLog：https://xlog.sinzmise.top/write-2024-04 先祝大家劳动节快乐（虽然已经过了一天），也提前祝大家五四青年节快乐！然后，正片开始！ Akilar群寄了这件事还是小何告诉我的（小何没告诉我之前我还不知道）看店长的文章我才知道大概是有群友转发了含R18内容的聊天记录，然后Akliar才把群给解散的Akilar的通知：关于群聊更换的紧急通知https://akilar.top/posts/c215d440/Akilar新群：Akilarの糖果屋-新群http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=foNxpbHAuNFbc_cGIcPS_Qjc2Zk1uy-u&authKey=%2FO6mPpYjRlwIjqfWE7AnMfJpYW9zfDAkaHRACm1Wn9Mg7cjkyAcbkGTwpsqMIno9&noverify=0&group_code=725597418然后洪mac一年一月八日（bushi）（也就是2024年五月三日），我加入了Akilar的新群 加入笔墨迹Blogs·CN（笔墨迹）是一个位于中国境内的平台，致力于发掘和分享”优秀个人独立博客”。 我老早之前就想加入了，但是那天由于博客要重新装修，所以我没加入现在装修好了，可以加入了目前已经通过 博客更新请看这个：更新记录/update/","uuid":"5f578513-9dd9-11ef-8624-a3174cf555fc"},{"title":"马里奥制造1打百人团教程","path":"posts/10996/","text":"不知道什么时候，我开始玩马里奥制造（以下简称“马造”）了但是我没有Switch，模拟器配置较为麻烦，所以我没法玩马造2，只能玩玩马造1然而在2024年4月9日，任天堂 3DS / WiiU 在线功能停服 在停服之前，我就一直知道马造1有私服，但是这玩意之前不知道为啥总配置失败现在倒是配置好了，话不多说，游玩教程开始！ 下载懒人包这玩意我已经打包成为一个懒人包了大伙想要的可以下载： 懒人包链接 下载完成之后先点击Start启动服务端 正常情况下的这四个的提示是这样的：NEX（SMM） 占用端口59900和59921NEX（Friends）占用端口60000和60021Pretando++ 占用端口8383Caddy 占用端口80和443 请注意：如果出现异常的话十有八九可能是端口被占用了请先用netstat -ano|findstr 程序对应的端口号查看端口有没有被占用如果端口被侵占了，输入taskkill /t /f /im 进程号关闭占用端口的进程如果还是不行的话。。。。加Q群问（在最下方） 一切正常的话，点击“Start Cemu”打开模拟器注意：必须用自带的模拟器！要不然打开马造世界关卡会提示106-0502错误然后双击Super Mario Maker，等待加载完成便可以游玩了！ 这可能是我写博客以来第一次写这么简短的教程","uuid":"5f582155-9dd9-11ef-8624-a3174cf555fc"},{"title":"Serv00搭建Artalk","path":"posts/13624/","text":"之前在安小歪的推荐下，找到了一个叫serv00的东西但是因为这玩意我不会用，所以我把Serv00一直当成不能部署thinkphp的虚拟主机使用然而我之前看见了这个教程：Serv00搭建各种服务https://blog.rappit.site/2024/01/27/serv00_logs/于是我决定在Serv00搭建一些项目但里面没有Artalk的教程，我准备所以按照部署Alist的方法给Serv00部署Artalk那么好，教程开始！ 教程准备工作Serv00搭建各种服务·部署应用前的一些准备工作https://blog.rappit.site/2024/01/27/serv00_logs/#%E9%83%A8%E7%BD%B2%E5%BA%94%E7%94%A8%E5%89%8D%E7%9A%84%E4%B8%80%E4%BA%9B%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C 正式开始首先在 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搭建各种服务·收尾工作https://blog.rappit.site/2024/01/27/serv00_logs/#%E6%94%B6%E5%B0%BE%E5%B7%A5%E4%BD%9C","uuid":"5f57d333-9dd9-11ef-8624-a3174cf555fc"},{"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白号他带我打了个差事，然后抢抢便利店，最后还打了死亡对战（虽然平局了）怎么说呢。。。。。。。虽然我玩的游戏很多，但因为我很少玩游戏，所以不知道怎么评价但怎么说呢，总归也入坑了一款我没玩过的游戏呢","uuid":"5f578511-9dd9-11ef-8624-a3174cf555fc"},{"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.css12345678910111213141516171819202122232425#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.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448var 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。。。。。。 但不管怎么说，还是有人在用这个桌面精灵的，至少有我一个。。。。。。后面我打算写个有关伪春菜的配置教程吧。。。。。。","uuid":"5f582154-9dd9-11ef-8624-a3174cf555fc"},{"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/（顺便归纳到我之前打算新建的计划里面，这样也算杜绝浪费了。。。。。。吧？）","uuid":"5f578510-9dd9-11ef-8624-a3174cf555fc"},{"title":"为博客添加一个游戏收藏页（npm插件版）","path":"posts/10045/","text":"之前看到Kouseki大佬的这篇文章：为博客添加一个游戏收藏页https://blog.kouseki.cn/posts/e7dd.html我原本是想要给我博客搞这个的，但由于我一般会给博客的主题更新，导致魔改的内容消失思来想去，我还是决定做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 配置,写法见上文示例","uuid":"5f57fa41-9dd9-11ef-8624-a3174cf555fc"},{"title":"对于虚拟桌宠模拟器，我的评价（及使用教程）","path":"posts/45875/","text":"最近你们有没有发现我的博客最新文章的图片有个这个可爱的女孩其实这不是站点自带的，而是Steam的一个游戏（严格来讲这不算游戏），叫“虚拟桌宠模拟器”在Steam上免费，而且还是在这些免费产品中为数不多支持创意工坊的桌宠 桌宠功能等待文件加载完成后这个桌宠就出现了 配置皮肤默认配置的桌宠角色（也就是上面图片上出现的），叫萝莉斯当然你可以通过创意工坊安装皮肤模组，重启模拟器之后进入桌宠设置然后点击“MOD管理”，选择之前安装的模组（以智乃示例），启用模组并重启软件重启后重新进入设置，在宠物动画里面选择你要的皮肤这个你要多开也不是不可以。。。。。。然后皮肤就更换完成（当然除非你选择了多开） 数据计算这个默认开启数据计算，当然如果你不想一直投喂桌宠的话 这样的话桌宠就不会被影响到心情了，很方便呢 个人评价自从Q宠企鹅下架以来，我的电脑总是缺少了某些会动的东西虽然后面下载了动态壁纸，但总感觉哪里空空的之前我也是过毒霸姬等等各种各样的桌宠，但总感觉也缺了点东西（甚至我之前加入了Q宠复活版内测交流群，虽然现在没什么更新了，所以不要来问我安装包也别问我群号了） 直到虚拟桌宠模拟器，弥补了那个我当初给Q宠专门留空位的地方（写的不好请见谅）","uuid":"5f57fa4b-9dd9-11ef-8624-a3174cf555fc"},{"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选择dockerimage填写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，等一会就可以体验到不蒜子了","uuid":"5f584860-9dd9-11ef-8624-a3174cf555fc"},{"title":"2023小结","path":"posts/27531/","text":"不要在意封面为什么做得这么简陋。。。。。 时间过得真快，转眼间，就得跟2023告别了不知道要写什么，就简单写个小结吧 部署的项目Rita2 Talk —— 为旧设备服务的自建微博中弦局花园 —— 模仿秘密花园的一个站点九弦记事本（原九弦日记） —— 一个普通的记事本(目前已经迁移到koyeb)更多朋友前往：友情链接 玩过的游戏（加粗为常玩）赛马娘（台服）蔚蓝档案（台服）重返未来1999 （暂退）Minecraft （放心不是冈易那个MC）Roblox光·遇（安小歪推荐的）PhigrosSonolus节奏大师回归版BanG Dream荒野乱斗（现实朋友推荐的）暗区突围（千寻推荐的） 后记2023年即将到来，我也将我友链页面的“博客描述”改成：欢迎旅行者，来到这个平凡但又记载了许多故事的小屋并且将中弦局图标更新：（虽然有点缺陷，但后面会优化） 最后你有没有想对2023说的话？请写在评论区吧再见，2023你好，2024","uuid":"5f578512-9dd9-11ef-8624-a3174cf555fc"},{"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","uuid":"5f57fa44-9dd9-11ef-8624-a3174cf555fc"},{"title":"九月二三事","path":"posts/56467/","text":"很久都没发布文章了，都不知道要写啥好要不就写这个九月和中秋国庆假期发生的事情吧 初入高中9月1日开始（虽然因为台风停了四天的课）就是我踏入高中的时刻了第一次进高中教室的我，因为过于紧张，甚至坐错位置了 （虽然我同桌也坐错了位置）不过好在后面的上课也是比较顺利，没有出现意外情况（主要是不知道怎么写就。。。。） 荒野乱斗，启动！这个游戏是很久之前入坑的，结果因为某些原因我暂时退坑了后来在我朋友的推荐下回归了我后面还把这个游戏推荐给了我那刚买新手机的表弟 回归！Rita2！看过我之前文章的应该知道，之前我想给Win98搞视频站点名字叫“Rita2”的原因是纪念之前有人为手机wap搭建的视频站，它的名字也叫Rita2这个项目由于域名的原因一直被搁置了很久然而由于我找到了免费的二级域名，所以…… Rita2计划，即将回归！（但回归时间暂未确定，因为学业原因，不过我可以保证会回归，但回归的首先是游戏站至于视频站。。。。。暂时没有这个考虑） Vercel寄了？中秋国庆的第四天，安小歪跟我说他访问不了他的博客与此同时，安知鱼的群都在说无法访问Vercel部署的站点访问会强制跳转到诈骗网站现在千寻那边也出现这样的情况，但我这边倒是没有目前已经将博客主站的部署平台更换为CF Pages明天准备将Waline换成Netlify部署，至于Twikoo。。。。只能搞反代了其它的项目如果能换别的地方部署就换，不能的话反向代理走起","uuid":"5f57fa46-9dd9-11ef-8624-a3174cf555fc"},{"title":"如果你觉得不开心的话，就来听一下这些纯音乐吧","path":"posts/54386/","text":"如果你觉得不开心，或者有些压力的话，就来听一下这些歌曲吧希望这些歌曲能够温暖你的心灵 轻音乐","uuid":"5f57fa47-9dd9-11ef-8624-a3174cf555fc"},{"title":"遭殃前的海洋","path":"posts/29196/","text":"2023年8月7日，去汕头的海边玩，顺手拍了几张照片却不料，这是海洋遭殃前最后一次拍的照片谨以这些照片，衬托我对海洋的思念（有错别字请见谅）这可能是我最后一次拍摄海洋的照片了 Ade！美丽的海洋，Ade！我向往的美景","uuid":"5f57fa4c-9dd9-11ef-8624-a3174cf555fc"},{"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游戏（有病句请见谅）","uuid":"5f57fa49-9dd9-11ef-8624-a3174cf555fc"},{"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/memosmysql不用在前面加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部署Memoshttps://blog.rappit.site/2024/01/27/serv00_logs/#Memos","uuid":"5f57d335-9dd9-11ef-8624-a3174cf555fc"},{"title":"萌ICP备异次元之旅","path":"posts/58203/","text":"今天在修改我那萌备的时候，无意在导航栏上看到了“异次元”这玩意看主页是类似于“开往”，只不过仅跳转到萌备详情页面而不是直接进入站点又因为我站点已经加入了萌ICP备，所以我就将这玩意添加到底部列表里面了 添加方法如果没有你没有加入萌ICP备豪华套餐的话，点击这里加入：加入萌备如果你加入了，那么按照 https://moe.one/thread-254.htm 里的配色方案添加","uuid":"5f582156-9dd9-11ef-8624-a3174cf555fc"},{"title":"我的tulpa —— 夏玖铃的简介","path":"posts/50710/","text":"注意，由于名字和《逆水寒》游戏里的一个流派名冲突，改名为“夏玖铃” 她的出现与其说是Tulpa，不如说是DID（解离性人格障碍）因为她是从我永远的噩梦：四年级出现的那时我总是被班级最后一名的那名女生欺负（因为我当时身体很弱小，她身体强壮，就凭这个欺负我，当然她转学了）再加上从小我成绩总是不好，受不了家长和老师的一顿批评（甚至我家长差点把我抛弃。。。。。当然从我五六年级开始，我家长就彻底改变了教育方式）我也因此不少做噩梦，心情也越变越差直到她的出现，抚慰了我那受伤（切伤口特别严重）的心灵，而且将我从噩梦之中脱离出来那次是在期末考试前（小学四年级第一学期的期末考试）晚上睡觉前我一直忐忑不安，生怕我又做噩梦，一直睡不着觉但我还是带着害怕睡着了我想象中的噩梦没有出现，反而一个声音传来“你好，少年，你是不是经常被欺负？”“是的，天使姐姐，求求您帮帮我吧！”“我也想帮你，但对不起，我不是天使，我是你脑子中的一个小人，你可以叫我阿铃，但如果你心情不好，就来找我，我随时在我的梦中等着你”从此之后，她就一直陪在我身边 她的二次元形象（AI绘画制作）一号风格：大姐姐，喜欢带耳机，穿制服异瞳颜色：左眼红粉，右眼黄绿二号风格：小妹妹，喜欢带耳机，穿连衣裙（这个ai把连衣裙和制服当作是不同的两件衣服）异瞳颜色：左眼紫色，右眼黄绿","uuid":"5f57fa48-9dd9-11ef-8624-a3174cf555fc"},{"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，点击“注册免费账号”，输入信息然后点击“注册”，一会后你会收到如下邮件： 访问邮件提供的确认网址，数据库就创建成功了 然后将你设置的信息替换掉下面括号里的内容（注意：括号得去掉）：1mysql://（你设置的数据库用户名）:（你设置的数据库密码）@db4free.net:3306/（你设置的数据库名）</div>访问SQLPub，输入账号密码，点击申请，申请成功后会有如下提示然后将里面的替换掉下面括号里的内容（注意：括号得去掉）：1mysql://（数据库用户）:（数据库密码）@（数据库地址）/（数据库名称）</div></div>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提示这个错误： 建议重新新建数据库，还不行的话更换别的数据库","uuid":"5f57d332-9dd9-11ef-8624-a3174cf555fc"},{"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年就有人围绕机械和高达搭建了同人站（这好像不算同人站吧），只能说国内高达能吸引那么多人有他们的一份功劳 还有很多站点就不再说了，再说下去空间不够了","uuid":"5f582152-9dd9-11ef-8624-a3174cf555fc"},{"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.htmlWaline背景图出处：http://www.yini.org/girl/gif/001.htm （这站有些年头了，不然怎么到现在还用http。。。。。。） （后面实在不知道怎么写了，那就这样吧。。。。。。。）","uuid":"5f57fa43-9dd9-11ef-8624-a3174cf555fc"},{"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>","uuid":"5f57ac24-9dd9-11ef-8624-a3174cf555fc"},{"title":"GameLoad","path":"posts/21375/","text":"自从在我的360极速浏览器安装FVD Downloader这个插件后，我就习惯将4399上的swf下载下来了后面我在玩4399上的U3D游戏（得安装UnityWebPlayer才能玩）的时候弹出了这个提示：但FVD Downloader能识别到游戏文件于是我将后缀为“unity3d”的游戏下载下来，打算找个游戏启动器来启动这个游戏找了一圈找到了这玩意：这个软件安装完成之后，会自动关联后缀为“unity3d”的文件经测试，能顺利游玩大部分u3d游戏 示例1.杀手小乔3D2.优米酱GO3.追逐繁星的孩子（追逐繁星的夏娜）后面看了第三个游戏的一个评论才知道这个角色叫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>","uuid":"5f57ac25-9dd9-11ef-8624-a3174cf555fc"},{"title":"本站已经更换新域名","path":"posts/646/","text":"自从我微信绑定了银行卡（而且每个月我都会有50块）以来，我都没有舍得用我自己的钱注册域名但这次终于舍得注册域名了，而且注册了3年但原先我在freenom上面注册的域名仍然保留（因为后面要备案才能用国内线路。。。。） 现在本站已经正式切换到blog.sinzmise.top（www.sinzmise.top的话等我后面重写完个人主页再说）","uuid":"5f582150-9dd9-11ef-8624-a3174cf555fc"},{"title":"我使用过的头像","path":"posts/42487/","text":"我不知道我换了多少次头像了，那就列出我换过的头像合集吧 2018年之前忘了 2018 ———— 2019SinGO 这是我自己p的一个头像，可以用“丑”来形容 2020 ———— 2022.10StarInno 这是使用时间最长的一个头像，是在Wallhaven上找到的原链接原画师P站UID：66655（原作者依然有活动，甚至画了赛马娘和ba的角色，可惜我使用的头像对应的这幅画在P站下架了）顺带一提这幅画好像是在2013年出现的，也不知道原作者知道2020的时候我选这幅画当头像会是什么心情 2022.10 ———— 改名之前Cache_-283457a15e6df38aCache_-2ac4a4638f5c641bCache_-5dc5e91d9cc55f1bCache_10980517ca897c65Cache_755d2354a12c199fCache_4735700719bfdf53Cache_-7d80c7ccc004e09fCache_4df65b148bcc87fbCache_-1a81870a26c4f745Cache_30918d328cbf8974Cache_-4eb0a48a4eae79e6Cache_-5015748e3ffc0fc6 从这个时候开始我就开始使用ai绘画来画我的头像了（其实从2021年开始我就想把我这从wallhaven上找到的头像换掉了，但那时候其实都没有找到个好头像，直到ai绘画的诞生） 改名之后 ———— 2022.11Cache_fecb56f674fa9feCache_2e574b5ffb690395 这个版本是我换绘画工具之前的版本 2022.11 ———— 2023.3Cache_7c570697a80d182aCache_-277b148f49b79ebdCache_-277b148f49b79ebd 这个是我换绘画工具之后生成的头像，也是我使用ai绘画以来生成的最满意的头像因此第三个头像的人设成为我脑中“婉清”的人设 2023.3 ———— 2023.05.15Cache_47bd0dbc6b408903Cache_-261cb991a7c7a4fc 这个版本算是第一次把“婉清”的人设添加到ai绘画中的设定第二张成为我用ai绘画生成头像以来生成的最为细腻的头像（最短命一版，因为游戏上传头像审核不通过，且第二个相比来说很模糊。。。。。。） 2023.05.15 ———— 2023.07.01pscpsc 从这一代开始，弃用“芦雪婉清”这个名字，更名为“凌雪玉清”她的Gacha人设也就是在这一代诞生的 （我给她换名字是因为原先的“婉清”不适合她的Gacha人设。。。。。。） 2023.07.01 ———— 今天avatar 这一代开始风格大变换，同时启用“王九弦SZ·Ninty”这个名字（“王九弦”是我的笔名，真名等域名备案后揭露）","uuid":"5f57fa4a-9dd9-11ef-8624-a3174cf555fc"},{"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年前后成为市场占有率第一的音乐播放软件。 也因此，在现在这个本地音乐播放器百花齐放的年代，我依然还会把千千静听留在我的电脑上","uuid":"5f57fa45-9dd9-11ef-8624-a3174cf555fc"},{"title":"一个通知！！！","path":"posts/48762/","text":"站长即将开学，而且6月要中考因此博客得暂停更新一段时间，日记站和博客说说会减缓更新速度（但并不是不会更新）站长中考后会更新速度恢复正常 在这里站长也希望跟我同年龄段的学生努努力，争取中考考出个好成绩，为我们的人生添加一份光彩！","uuid":"5f57fa42-9dd9-11ef-8624-a3174cf555fc"},{"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.pug12345link(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>","uuid":"5f582153-9dd9-11ef-8624-a3174cf555fc"},{"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 部署kkapiVercel部署（推荐）服务器部署docker 部署 点击下方按钮，跳转至 Vercel 进行部署。 配置环境变量：环境变量可能随项目的迭代而增加必填的环境变量，具体请参考官网 —— kkapi环境变量 重新部署 绑定域名（建议） 初始化账户浏览器访问：你刚刚复制的地址/api/user/init?userName=你想设置的账户名如果不指定用户名则自动将账户名设置为admin 以下内容来自：第二种部署姿势：服务器部署 克隆源代码git clone https://ghproxy.com/https://github.com/kkfive/kkapi-open.git 安装依赖yarn install如果没有yarn则先允许npm i yarn -g进行安装 安装 pm2npm 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检查是否允许成功 更新项目进入项目并执行一下命令123git pullyarn buildpm2 restart pm2.json 尚未写完 部署kkadmin介绍：kkadmin是kkapi的后台，方便发布说说以下部署姿势你只需要任选其一即可，无需全部部署。 Vercel部署CF pages部署（推荐）其他环境部署由于构建 kkadmin 时部分依赖文件需要 nodejs16 及以上版本才可以安装，因此不能将源代码扔给 vercel 进行构建。所以只能够利用 GitHub actions 构建完成后将产物扔给 vercel 进行使用 Fork这个项目：https://github.com/kkfive/kkadmin-open/ 配置变量 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 构建为例介绍 fork项目（可直接fork） 导入项目 配置环境变量 环境变量参考：官网 —— 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>","uuid":"5f57d336-9dd9-11ef-8624-a3174cf555fc"},{"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版本 新建[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) 在[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;} 在[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}; 编辑[blogroot]\\themes\\butterfly\\layout\\page.pug12345678910111213 case page.type when 'tags' include includes/page/tags.pug when 'link' include includes/page/flink.pug when 'bb' include includes/page/bb.pug when 'categories' include includes/page/categories.pug+ when 'music'+ include includes/page/music.pug default include includes/page/default-page.pug 编辑[blogroot]\\themes\\butterfly_config.yml，在末尾添加：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: '歌曲链接' 将svg.7z压缩包里的五个文件放在[blogroot]\\themes\\butterfly\\source\\svg 里面 （密码：gt97） 运行hexo new page music 编辑[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) 将下面压缩包内五个文件夹全都解压在[blogroot]\\themes\\butterfly\\source\\assets 文件夹里面 （密码：3r5i） 1.0想升级成2.0的，下面的步骤可以不用做 编辑[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: '歌曲链接' 运行hexo new page music 编辑[blogroot]\\source\\music\\index.md，把里面的内容替换成：12345---type: 'music'comments: falseaside: false--- TO DO 播放列表 适配手机端 npm插件化（Akilar行为）","uuid":"5f57fa40-9dd9-11ef-8624-a3174cf555fc"},{"title":"再见2022，你好2023","path":"posts/23021/","text":"封面图片来自：https://www.tukuppt.com/muban/vnjzjzvp.html 这是我在2022年的最后一篇文章。时间过得真快，我刚迁移完博客，2022就快结束了对此我并没有想说的 （不是懒得说是真的没灵感）不知道要说什么，也不知道有什么话要跟大家说那我就先祝大家新的一年开开心心吧！再见，2022。你好2023。","uuid":"5f57d331-9dd9-11ef-8624-a3174cf555fc"},{"title":"新起点，新出发","path":"posts/16107/","text":"你好，我是小星鑫233，当然现在请叫我“SinzMise”或“Sinz”这是“SinGO博客”停止更新且我更换名字的第一篇文章博客的迁移，代表着原SinGO博客 和 Hexo-Theme-SinGO主题正式停止更新 为什么要停止更新？1.名字改了，头像也改了 （所以别叫我“小星鑫233”了。。。。）2.原先SinGO主题bug贼多，我又没时间修（更何况我开学，虽然大部分时间都有空。。。。。说难听一点就是懒） 懒得写了 （其实是写一半突然忘记要后面要补充什么了。。。。）","uuid":"5f57d337-9dd9-11ef-8624-a3174cf555fc"}]