简介：之前一直在用hexo的butterfly主题，找到了一个日历插件，但是当时完全不能用，修改了好久终于和主题完美适配了，一直懒的写教程，但是也用了很久一直没发现问题，故而分享给大家，因为是针对butterfly主题修改的css，但是核心部分是通用的，希望大家喜欢！首先展示一下效果，各位更可以前往 旧站点 查看效果Butterly主题准备工作​先贴上净土大神写的日历插件，直接在在命令行窗口安装。前提是你要装的有node.jsnpm install save git://github.com/howiefh/hexo generator calendar.git安装完毕以后，运行一下 hexo g ，然后去hexo目录下的public 目录下看看是是否有一个calendar.json 文件，这个很重要的。在\hexo\themes\butterfly\layout\includes\widget目录下新建calendar.pug，内容如下.card widget.card calendar .card calendar include ./calendar.html在同目录中打开index.pug，选取适当位置类比添加如下内容if theme.aside.card_calendar include ./calendar.pug在同目录下新建calendar.html，内容如下 - 隐藏 - {message type="error" content="上方代码中，css及js需换成自己的链接，也可以用我的，但是！calendar.js文件中需要修改下方步骤，而且上方代码中的网站（第32行）需要换成自己的"/}三个文件css+jscalendar.js - 隐藏 - 上方代码的第823行处地址，需换成自己的地址calendar.css - 隐藏 -

简介：距离上次换站点，已经过了一年半了，现在又从Hexo换到了Typecho。不得不说很是不舍。但是还好，除了评论，大部分都得到了保留。之前明明说好了赖在Hexo不走了的，但是现在还是换掉了，也许未来，还是会换到新地方的。这也应该是一定的。但是虽然换了好多站点（虽然还是模板），但好歹代表着新的开始。从前网上认识的好多可爱的人，至今陪伴着我的寥寥。但是依然陪伴着我的朋友们，感谢你们，虽然大家都鸽了很久，但是大家都没有放弃。看到谁诈尸了赶紧上前踩一踩，哈哈哈真的是很感动，很久没写句子了，有些语无伦次。 ——火喵 2021年6月 说来你们有没有人注意到，喵窝･札记中间的【･】是日文符号方形点存活时间 2020年1月5日——2021年6月9日时间统计 1年零223天（本次建站不重置，继承博客时间）总访问量 33049（不蒜子）28681（51.LA）然后是小站最后的评论，来自新伙伴 守兰 ！！期望未来大家一起长久的走下去，这也是我加入十年之约的理由。然后就是截图啦！

简介：无意中发现的小方法，超级棒，解决了火喵多年苦于有的人没头像的困境，开心~ 分享给大家！前言WordPress sakura版本中，Mashiro大佬是添加了QQ邮箱识别生成头像地址的功能的，但是hojun大佬移植时没有注意这个功能哦！参考了其他版本评论系统对头像的处理方法：Typecho实现QQ邮箱识别生成头像地址获得两个接口?，美滋滋：一个是QQ头像的，一个是Gravatar国内源，它们的调用方式如下。QQ头像 http://q1.qlogo.cn/g?b=qq&nk=QQ号&s=100Gravatar头像 http://cdn.v2ex.com/gravatar/md5加密后的邮箱?s=100以上就是两个头像接口的信息，值得注意的是Gravatar后面的s分辨率参数可以随意定义，而QQ不行，QQ只有几个有限的分辨率，比如100,200,640，其它的数字会报400错误，所以QQ的s参数更像是一种清晰度，宽高还是通过css定义比较好。我的启示是：获取邮箱判断是否为qq邮箱提取qq号将valine中的头像地址改为上述接口地址此时，我觉得想法的实现流程非常缜密，感到可行，开心到飞起~ let me do it！F12查看源码–发现valine中显示头像的相关代码是：（关键标签：vimg）再以我ctrl+F快速查找的本领（关键词：vimg），不负众望，在Valine.min.js中找到首先我们要知道：valine的头像处理接口是gravator拼接头像地址并显示的关键步骤：ok，找到源头，替换src的内容即可。<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">正式开干！示例修改valine.min.js下载Valine.min.js到本地themes\sakura\source\js\Valine.min.js修改引入本地的Valine我的引入位置在：themes\sakura\layout\_partial\comment.ejs如果你是在footer.ejs，注意相对路径只有一个点打开Valine.min.js，ctrl+F快速查找关键词：m.cdn+a(e.get("mail"))+m.params定位到：稍加换行如图所示：修改前：C=function(e,n,r){ var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">',修改后：其实关键代码就这一点点~ QAQ var C=function(e,n,r){ var qq_img=m.cdn+a(e.get("mail"))+m.params;//默认gravator头像接口 if(e.get("mail").indexOf("@qq.com") >= 0){ var prefix = e.get("mail").replace(/@.*/, "");//前缀 var pattern=/^\d+$/g; //正则表达式，数字 var result= prefix.match(pattern);//match 是匹配的意思 if(result!==null){ qq_img = "//q1.qlogo.cn/g?b=qq&nk="+ prefix +"&s=100"; } } var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+ (qq_img)+'">',流程：默认还是gravator头像接口判断是否是qq邮箱，提取前缀prefixqq头像接口是qq号，如正则筛选剔除–重命名了带英文的qq邮箱拼接头像地址加入src显示！效果哈哈哈，如果有其他邮箱头像接口，都可以同理加上哦！都说博客的 评论模块 和 消息通知模块 是最难的，为了花式DIY评论区，效果自己也比较满意吧。补充：https://s.p.qq.com/pub/get_face?img_type=3&uin=你的QQ号https://ptlogin2.qq.com/getface?&imgtype=1&uin=你的QQ号

简介：今天打算修改博客，打算尝试修改hexo的front matter，如何增加自定义值。但是一直无果。点击搜索结果偶然间发现了一个程序HexoClient。首先吸引我的不是什么内容，而是它的界面，非常好看，简洁小清新~ 于是立刻下载下来，果然非常的棒。自带的md编辑器能够很好的满足我现在的打字需求，而且还可以同步查看转换的内容，实在是太方便了，爱不释手。 功能也是非常多，文章添加文章修改文章删除草稿功能多图床支持：aliyun oss、七牛、sm.ms、Github（可惜没有我再用的腾讯cos）文章搜索文章按分类、标签分组展示多语言支持支持Travis CI自动部署（改日试试）具体的可以点此去看官方文档ps：本文就是使用HexoClient编辑并发布的~2020 3 27：今天在群里问了dalao，dalao说如果打开显示无文章的话，先使用git程序hexo g，然后就能打开了，亲测好用~

简介：转向HEXO很难过，使用在线MD编辑器敲了好多好多字结果没有自动保存，结果一下子全都没有了，还要重新写一遍真的很难受不知不觉博客下方的建站时间告诉我现在已经使用hexo达到100天的时间了。看着博客，100天的变化还是很不小的。当时使用的博客程序还是wordpress，但是因为实在是服务器比较便宜的原因，网站访问速度很慢。而且wordpress十分臃肿，程序和插件三天两天更新，更新之后还容易和原有的主题不兼容，每次维护博客旧很浪费时间，因此决定换掉wordpress。友情链接里的大佬们一个个都换到typecho和hexo了，因此作为只用过wordpress的小白，决定先整清楚他们之间的优缺点。我在网上寻找，看到了这样一篇文章：个人博客如何选择 Typecho 和 Hexo ？文章写的很清晰，作者是结合自己这两天使用 Hexo 的感受和 Typecho 博客的感受总结出这篇文章来的。其中作者对于hexo和typecho做了分析对比。其中对于typecho是这样描述的：Typecho是一个简单，轻巧的博客程序。基于PHP，使用多种数据库（Mysql，PostgreSQL，SQLite）储存数据。在GPLVersion 2许可证下发行，是一个开源的程序。这说明typecho是和wordpress一样，使用PHP+Mysql环境搭建的动态网站。而没有wordpress那种臃肿的复杂度和丰富的扩展性，仅仅主要是为了写博客的程序，因此速度会很快，但也需要数据库的支持再来看看对于hexo的描述：Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。没错，静态网页。根据百度查询，发现许多人都是使用github作为hexo的托管，免费还速度快。但是我还注意到了作者这样一句话：Hexo 是需要一定的技术门槛的，话来的是近乎“零成本”的博客网站搭建体验，而 Typecho 和 WordPress基本一样都是需要付出一定的“金钱成本”的，虽然 Typecho 相对于 WordPress 来说可以更加低廉一些。而我现在的wordpress不仅花钱买的服务器还很吃慢，作为玩了wordpress仍毫无建树的敲码小白因此决定，换到hexo搭建新的博客。安装与部署许多人都将博客程序托管到了github，因此我也打算效仿。具体过程网上有很多的教程了，因此就不啰嗦了。在成功搭建到github之后，我发现访问速度并不是很快，有的时候也是连接不上。毕竟github的链接也是不稳定。突然一想，因为在用wordpress时我是将图片放在腾讯cos存储中，于是作为静态站是否也可以呢？于是我就发现了这篇文章：如何在腾讯云COS部署HEXO博客。文章写的很好，一步步来就好了。但是在我要自定义域名加上ssl的时候问题来了。cos的证书是cos自己的，想要放自己的证书就需要开启cos的cdn加速。可是国内使用cdn服务的话需要备案！我的域名并没有备案，因此凉凉在了最后一步。没办法，没有cos我们还有腾讯的coding呢。于是现在，博客搭载了腾讯的香港coding服务器上，并使用腾讯的cos作为图床。而github就作为海外访问的站点，二级域名是mirror。主题的选择在官方hexo主题库里：https://hexo.io/zh cn/docs/themes.html 有不少好看的主题，也查看了不少知乎的介绍推荐，但是最后我看中了两款主题：hexo theme butterfly https://jerryc.me/hexo theme matery https://www.lixianglong.cn/第一款是很简单的双栏主题，作者很用心的写了主题使用官方文档，浅显易懂，主题很好而第二款主题是质感设计的瀑布流，搭配可以互动的统计表格，也很好看最后我选择了第一个。而且我也很感谢作者的帮助。遇到问题我就在留言板留言，作者也很耐心的帮助我，这点很感谢~主题的修改主题的官方文档写的很多，可以有许多自带的特效，但是我也自己加了许多，写了一篇简单的小结有兴趣的话可以去瞅瞅，但是有一些我就没写，比如右侧公告的修改，天气样式的修改（天气使用的是和风天气挂件），还有下载页面的修改等等，但是都很简单，也懒得打这么多字了。有想知道的可以直接给我留言就好了，但是都不难，毕竟我不会敲代码的都会照葫芦画瓢整出来~然后剩余的服务器资源我也没浪费，搭建了一下typecho，也就是现在的吃糖博客。

简介：本页部分内容来自互联网，并附带转载链接；提取的内容仅仅指代本站实际使用内容，可能更换成本站主题适配的内容，仅适合本站主题使用，其他主题雷同；更多的共同内容请看原链接右下方看板娘https://blog.csdn.net/qq_36759224/article/details/85420403获取 live2d输入如下命令获取 live2d ： $ npm install save hexo helper live2d 输入以下命令，下载相应的模型，将 packagename 更换成模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者的博客,或者访问这里本小站使用的是live2d widget model shizuku添加如下代码打开站点目录下的 _config.yml 文件，添加如下代码：live2d: enable: true scriptFrom: local model: use: live2d widget model haruto #模型选择 display: position: right #模型位置 width: 150 #模型宽度 height: 300 #模型高度 mobile: show: false #是否在手机端显示 设置好过后我们就拥有了一个卡通人物自定义鼠标指针样式选好指针样式本站使用的是奥日与黑暗森林，下载地址在这里，你也可以换成自己喜欢的指针样式应用到本博客参考过本博客主题结构，定位到\hexo\themes\butterfly\source\css\index.styl将以下代码复制到最开头/**普通指针样式**/ body cursor url('xxxx.cur'),default /**链接指针样式**/ a &:hover cursor url('xxxx.cur'),pointer这样就好了~右侧小工具栏添加网易云音乐先去找网易云外链这部比较简单恕不详细说明，百度一大堆，举个例子，比如这首打上花火，播放页下侧就能找到外链的页面并取得下面的HTML代码修改主题文件首先模仿公告的样式，在hexo\themes\butterfly\layout\includes\widget多复制出来一个card_announcement.pug文件并更名将新文件中的最后一行.announcement_content= theme.announcement.content替换成网易云音乐外链，并在<iframe前加条竖线，例如这样|<iframe修改第一行和倒数第二号内容为自定义的命名...总之最后的我是这种效果...我也说不清楚惹qaq .card widget.card netmusic .card content .item headline i.fa.fa music(aria hidden="true") span= _p('aside.card_netmusic') |<iframe 吧啦吧啦在hexo\themes\butterfly\layout\includes\widget\index.pug中加入新的小工具列表，例如我的： if theme.aside.card_netmusic include ./card_netmusic.pug然后应该emmm没了吧，应该可以了~ps.果然忘了，在hexo\themes\butterfly\languages\zh CN.yml和butterfly.yml的aside:里添加对应名称浏览器网页标题修改♂（欺骗）在hexo\themes\butterfly\source\js中添加crash_cheat.js填入内容（别忘了修改成自己喜欢的）：<! 崩溃欺骗 > var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "/joke.ico"); document.title = '！！这里这里 ◕ ں ◕ '; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "/favicon.ico"); document.title = '(ฅ>ω<*ฅ) 喵喵爱你哟~' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } });然后在hexo\themes\butterfly\layout\includes\layout.pug文件中添加如下代码： script(type='text/javascript', src='/js/crash_cheat.js') 雪花背景特效雪花特效有两种，使用方法雷同上一个浏览器标题欺骗，在hexo\themes\butterfly\source\js中建立snow.js 文件，粘贴以下代码：/*样式一*/ (function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z index':'9999', 'top': ' 50px'}).html('&#10052;'), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */ }, options = $.extend( , defaults, options); var interval= setInterval( function(){ var startPositionLeft = Math.random() * documentWidth 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight 200, endPositionLeft = startPositionLeft 500 + Math.random() * 500, durationFall = documentHeight * 10 + Math.random() * 5000; $flake.clone().appendTo('body').css({ left: startPositionLeft, opacity: startOpacity, 'font size': sizeFlake, color: options.flakeColor }).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall,'linear',function(){ $(this).remove() }); }, options.newOn); }; })(jQuery); $(function(){ $.fn.snow({ minSize: 5, /* 定义雪花最小尺寸 */ maxSize: 50,/* 定义雪花最大尺寸 */ newOn: 300 /* 定义密集程度，数字越小越密集 */ }); });或者/*样式二*/ /* 控制下雪 */ function snowFall(snow) { /* 可配置属性 */ snow = snow || ; this.maxFlake = snow.maxFlake || 200; /* 最多片数 */ this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */ this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */ } /* 兼容写法 */ requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); }; cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame; /* 开始下雪 */ snowFall.prototype.start = function(){ /* 创建画布 */ snowCanvas.apply(this); /* 创建雪花形状 */ createFlakes.apply(this); /* 画雪 */ drawSnow.apply(this) } /* 创建画布 */ function snowCanvas() { /* 添加Dom结点 */ var snowcanvas = document.createElement("canvas"); snowcanvas.id = "snowfall"; snowcanvas.width = window.innerWidth; snowcanvas.height = document.body.clientHeight; snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z index: 1; pointer events: none;"); document.getElementsByTagName("body")[0].appendChild(snowcanvas); this.canvas = snowcanvas; this.ctx = snowcanvas.getContext("2d"); /* 窗口大小改变的处理 */ window.onresize = function() { snowcanvas.width = window.innerWidth; /* snowcanvas.height = window.innerHeight */ } } /* 雪运动对象 */ function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) { this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */ this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */ this.size = Math.random() * flakeSize + 2; /* 形状 */ this.maxSize = flakeSize; /* 最大形状 */ this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */ this.fallSpeed = fallSpeed; /* 坠落速度 */ this.velY = this.speed; /* Y方向速度 */ this.velX = 0; /* X方向速度 */ this.stepSize = Math.random() / 30; /* 步长 */ this.step = 0 /* 步数 */ } flakeMove.prototype.update = function() { var x = this.x, y = this.y; /* 左右摆动(余弦) */ this.velX *= 0.98; if (this.velY <= this.speed) { this.velY = this.speed } this.velX += Math.cos(this.step += .05) * this.stepSize; this.y += this.velY; this.x += this.velX; /* 飞出边界的处理 */ if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) { this.reset(canvas.width, canvas.height) } }; /* 飞出边界 放置最顶端继续坠落 */ flakeMove.prototype.reset = function(width, height) { this.x = Math.floor(Math.random() * width); this.y = 0; this.size = Math.random() * this.maxSize + 2; this.speed = Math.random() * 1 + this.fallSpeed; this.velY = this.speed; this.velX = 0; }; // 渲染雪花 随机形状（此处可修改雪花颜色！！！） flakeMove.prototype.render = function(ctx) { var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */ snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */ snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */ ctx.save(); ctx.fillStyle = snowFlake; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }; /* 创建雪花 定义形状 */ function createFlakes() { var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas; for (var i = 0; i < maxFlake; i++) { flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed)) } } /* 画雪 */ function drawSnow() { var maxFlake = this.maxFlake, flakes = this.flakes; ctx = this.ctx, canvas = this.canvas, that = this; /* 清空雪花 */ ctx.clearRect(0, 0, canvas.width, canvas.height); for (var e = 0; e < maxFlake; e++) { flakes[e].update(); flakes[e].render(ctx); } /* 一帧一帧的画 */ this.loop = requestAnimationFrame(function() { drawSnow.apply(that); }); } /* 调用及控制方法 */ var snow = new snowFall({maxFlake:60}); snow.start(); 然后在hexo\themes\butterfly\layout\includes\layout.pug文件里引用即可：<! 雪花特效 > <script type="text/javascript" src="\js\snow.js"></script>如果没效果，请确认网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可：<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>樱花背景特效https://yremp.live/sakura js/因雪花特效有点问题，打算换成樱花特效。在雪花特效处直接换成樱花特效的Jsdelivr缓存即可。网站底部设置已运行时间在主题设置中找到个性化页脚内容设置框，或者在footer.php代码中添加如下代码即可： 网站已运行:<span id="run_time" style="color: black;"></span> <script> function runTime() { var d = new Date(), str = ''; BirthDay = new Date("2018 12 31"); today = new Date(); timeold = (today.getTime() BirthDay.getTime()); sectimeold = timeold / 1000 secondsold = Math.floor(sectimeold); msPerDay = 24 * 60 * 60 * 1000 msPerYear = 365 * 24 * 60 * 60 * 1000 e_daysold = timeold / msPerDay e_yearsold = timeold / msPerYear daysold = Math.floor(e_daysold); yearsold = Math.floor(e_yearsold); //str = yearsold + "年"; str += daysold + "天"; str += d.getHours() + '时'; str += d.getMinutes() + '分'; str += d.getSeconds() + '秒'; return str; } setInterval(function () { $('#run_time').html(runTime()) }, 1000); </script>本小站使用的是这个：<! 网站运行时间的设置 > <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script> var now = new Date(); function createtime() { var grt= new Date("03/09/2019 13:14:21"); now.setTime(now.getTime()+250); days = (now grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now grt ) / 1000 / 60 / 60 (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now grt ) / 1000 /60 (24 * 60 * dnum) (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now grt ) / 1000 (24 * 60 * 60 * dnum) (60 * 60 * hnum) (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; } setInterval("createtime()",250); </script>右键菜单美化在主题设置中加入如下js：var options = {items:[ {header: '欢迎做客 喵窝･札记'}, {divider: true}, {text: '↜&nbsp;&nbsp;回到首页', href: 'https://dorcandy.cn'}, {text: '↷&nbsp;&nbsp;刷新页面', onclick: function() {alert("功能添加中，先请手动是用F5或者ctrl+F5刷新页面")}}, {divider: true}, {text: '☍&nbsp;&nbsp;友情链接', href: '/link/'}, {text: '✓&nbsp;&nbsp;留言板', href: '/guestbook/'}, {text: 'ฅ&nbsp;&nbsp;关于火喵', href: '/about/'}, {divider: true}, {text: '☇&nbsp;&nbsp;百度搜索', ======}, {text: '☄&nbsp;&nbsp;更多...', onclick: function() {alert("噗qaq，更完善的右键菜单 火喵 正在努力攻克中...")}} ]} $('body').contextify(options);引入js<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery contextify/1.0.8/jquery.contextify.min.js"></script>还要引入bootstrap.min.css，但是需要做适量修改。主页头图上升气泡效果在butterfly中的cdn use—>js里添加一行即可： https://cdn.jsdelivr.net/gh/sunchaser lilu/sunchaser cdn@master/js/circleMagic.min.js引入steam游戏展示小工具代码如下：<iframe src="https://store.steampowered.com/widget/{%APPID%}/" frameborder="0" width="100%" height=190"></iframe>代码中的APPID可查询SteamDB效果如下：关于背景样式的修改自动更换随机背景butterfly.yml里的background:可以直接填写api接口，这里推荐使用岁月小筑大佬提供的API，实现背景自动更换，效果如下：https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302实现背景重复平铺butterfly.yml里的background:修改成素材图片地址css\_global\index.styl→#web_bg内最后两行 background size: cover background repeat: no repeat修改为 background size: 400px //cover // background repeat: no repeat400px为自定义尺寸实现独立页面无侧边栏定位到hexo\themes\butterfly\layout\page.pug仿照在else处加上注释之间的内容 //...................... else if page.type === 'nosidebar' article#page h1= page.title .article container!= page.content //else...................... 在想要设置无侧边栏的页面，上方加上type: "nosidebar"完成，其中nosidebar可以换自己喜欢的名字，具体效果参照我的关于页