本文主要转载自Akilar点击查看参考教程参考方向教程原贴动画样式依赖animate.csswowjs文档wowjs插件化版本（推荐）点击查看参考教程安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：1npm install hexo-butterfly-wowjs --save添加配置信息，以下为写法示例在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加：12345678910111213141516wowjs:enable:true#控制动画开关。true是打开，false是关闭priority:10#过滤器优先级mobile:false#移动端是否启用，默认移动端禁用animateitem:-class:recent-post-item#必填项，需要添加动画的元素的classstyle:animate__zoomIn#必填项，需要添加的动画duration:2s#选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。delay:1s#选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。offset:100#选填项，开始动画的距离（相对浏览器底部）iteration:2#选填项，动画重复的次数-class:card-widgetstyle:animate__zoomIna ...继续阅读 (65)

最近看到Heo博客，发现了许多的两点，于是便去查找各种偏爱的地方，想着去实现它。偶然看到加载的时候，网页最上面会出现加载条便想着去实现它。查看效果具体效果查看本站魔改教程基础版引入css本地css（可以修改进度条样式，推荐）外部链接css新建[BlogRoot]themes/butterfly/source/css/custom/progress_bar.css：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127/* This is a compiled file, you should be editing the file in the templates directory */.pace{-webkit-pointer-events: none;pointer-events: ...继续阅读 (51)

可以通过将index_img设置成false使得首页图消失风车标题，文章置顶引用站外地址文章页H1-H6样式修改Guo Le将[BlogSource]/themes/butterfly/source/css/custom/下面的所有css文件在[BlogSource]themes/butterfly/source/css/index.styl处进行：1@import'custom/*.css'这样一来，每个魔改方案的CSS依然可以在独立的CSS文件中找到并修改（如果是手动添加整合的话，只能用注释分割，显然很不利于后续查找修改），而在每次提交时，运行hexo g的过程中就会将所有CSS文件都整合到index.css，并且不用自己去inject啦更改Twikoo评论区样式，在自定义样式文件引入即可12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511 ...继续阅读 (51)

使用了 hexo-butterfly-swiper 插件，可本站首页预览效果。点击查看效果魔改教程安装 hexo-butterfly-swiper 插件1npm install hexo-butterfly-swiper --save配置插件12345678910111213141516171819swiper:enable:true# 开关priority:5#过滤器优先权enable_page:/# 应用页面exclude:#屏蔽页面# - /posts/# - /about/timemode:date#date/updatedlayout:# 挂载容器类型type:idname:recent-postsindex:0error_img:/img/default.png#封面图片加载失败的默认封面insertposition:afterbegindefault_descr:再怎么看我也不知道怎么描述它的啦！swiper_css:https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.css#swiper css依赖swiper_js:https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.js#swiper js依赖custom_css:https ...继续阅读 (62)

看了那么多的博客，发现对导航栏居中有着独特的偏爱，于是便有了这篇！查看效果魔改教程自定义css（推荐，店主采用的方案）修改源码方式新建 themes/butterfly/source/css/custom/menu_center.css 文件：12345678/* 一级菜单居中 */#nav.menus_items{/* display: inline; 这个带不带都可以，本来就是inline */position: absolute;width: fit-content;left:50%;transform:translateX(-50%);}思路：其实如果单纯的使导航栏居中，是很简单的事情，我们只需要让他绝对定位，然后让他距离左边50%，然后再往左移动自身的50%即可实现。修改 themes\butterfly\source\css_layout\head.styl 文件：123456789.menus_itemsdisplay: inline// 修改导航栏居中，搜索居右+ position: absolute+ width: 600px //width长度根据自己菜单栏的长度来调整+ text-align: center+ left: 0+ right: 0+ margin: auto上述css样式方案复制于Heo。子菜单居中引 ...继续阅读 (56)

本文教程主要针对Hexo Butterfly主题博客，在Butterfly主题中，文章标签页和标签侧边栏都有文章标签的词云图 但仅仅用字体大小表示某个标签下的文章数量是不明显的，可以在这个基础上加上表示某个标签下文章数的上下标，其中表示上标，表示下标。魔改教程打开\themes \butterfly\layout\includes\page\tags.pug文件和themes\butterfly\layout\includes \widget\card_tags.pug文件，发现绘制彩色标签云都是使用了cloudTags函数。另外一个绘制标签云的 函数是hexo自带的，有兴趣的可以到\node_modules\hexo\lib\plugins \helper\tagcloud.js研究，这里不多介绍。搜索cloudTags函数，可以在\themes \butterfly\scripts \helpers\page.js找到绘制标签云的代码，增加${tag.length}< / sup>或${tag.length}可绘制表示标签文章数的上下标。123456789101112131415161718192021222324252627282930313233hexo.extend.helper.register('cloudTags&# ...继续阅读 (83)

本文将介绍如何增添随机诗词的展示。之前在很多主题中见过这类设置，正好最近想在站点添加一个关于笔者页面，想着内容太过空洞，于是就把随机诗词搬了过来。查看效果刷新页面会有变化哟！！！魔改教程输入命令hexo n page “XXX”在\source文件夹下新建一个XXX文件夹（名字自定义，也可以放在你想放的任何页面）进入XXX文件夹，编辑index.md文件，添加如下代码：12345678910111213141516念两句诗挑选中...jinrishici.load(function(result) {poem.innerHTML= result.data.content;info.innerHTML='【'+ result.data.origin.dynasty+'】'+ result.data.origin.author+'《'+ result.data.origin.title+'》';document.getElementById("poem").value;document.getElementById("info").value;});新建\themes\butterfly\source\css\custom\poem.css：12345678910111213141516 ...继续阅读 (68)

具体效果如下：效果预览魔改教程新建[BlogRoot]\themes\butterfly\source\js\custom\cheesy_pick-up_lines.js123456789101112131415functioncheesy_pick_up_lines() {lethtml ="";for(leti =0; i <3; i++) {fetch("https://api.vvhan.com/api/love").then((data) =>data.text()).then((data) =>{html +=""+ data +"";document.querySelector("#cheesy_pick-up_lines-container").innerHTML=html;}).catch(function(error) {console.log(error);});}}新建[BlogRoot]\themes\butterfly\layout\includes\widget\card_cheesy_pick-up_lines.pug12345678910.card-widget.card-cheesy_pick-up_lines.card-content.item-headlinei. ...继续阅读 (66)

本教程是基于Butterfly官网教程进行详细讲解，若有不明之处，可以查看原教程。搜索系统基于hexo-algoliasearch的搜索本地搜索（极力推荐）此搜索是博主最喜爱的一种了，它不是本地搜索，又可以实现搜索显示文章的内容，不像hexo-algolia搜索出来的结果只能显示文章标题下载安装hexo-algoliasearch1npm install hexo-algoliasearch --save在_config.yml文件中添加如下内容123456789101112131415algolia:appId:"Z7A3XW4R2I"apiKey:"12db1ad54372045549ef465881c17e743"adminApiKey:"40321c7c207e7f73b63a19aa24c4761b"chunkSize:5000indexName:"my-hexo-blog"fields:-content:strip:truncate,0,500-excerpt:strip-gallery-permalink-photos-slug-tags-title参考Butterfly官方文档即可 ...继续阅读 (57)

此文章转载自Akilarの糖果屋魔改步骤修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug，本教程算上默认的旋转盒子加载动画，一共提供7种款式，读者可以根据代码结构自行改写移除不需要的内容。12345678if theme.preloader.enablecase theme.preloader.load_stylewhen 'wizard'include ./load_style/wizard.pugwhen 'image'include ./load_style/image.pugdefaultinclude ./load_style/default.pug此处第一行的if用于判断preloader功能是否打开。下面的case和when则是根据配置项的内容加载指定的页面元素。default表示默认使用butterfly自带的旋转盒子动画。新建动画结构模板存放的文件夹，如无特别提示，所有动画模板均存放在[Blogroot]\themes\butterfly\layout\includes\loading\load_style\目录下defaultimagewizard新建[Blogroot]\themes\butterfly\layout\includes\lo ...继续阅读 (50)

这里收录了大部分的表情，可以直接使用到你想使用的地方，欢迎做出补充。表情与情感表情名称表情名称表情名称😀嘿嘿😃哈哈😄大笑😁嘻嘻😆斜眼笑😅苦笑🤣笑得满地打滚😂笑哭了🙂呵呵🙃倒脸😉眨眼😊羞涩微笑😇微笑天使🥰喜笑颜开😍花痴🤩好崇拜哦😘飞吻😗亲亲☺️微笑😚羞涩亲亲😙微笑亲亲😋好吃😛吐舌😜单眼吐舌🤪滑稽😝眯眼吐舌🤑发财🤗抱抱🤭不说🤫安静的脸🤔想一想🤐闭嘴🤨挑眉😐冷漠😑无语😶沉默😏得意😒不高兴🙄翻白眼😬龇牙咧嘴🤥说谎😌松了口气😔沉思😪困🤤流口水😴睡着了😷感冒🤒发烧🤕受伤🤢恶心🤮呕吐🤧打喷嚏🥵脸发烧🥶冷脸🥴头昏眼花😵晕头转向🤯爆炸头🤠牛仔帽脸🥳聚会笑脸😎墨镜笑脸🤓书呆子脸🧐带单片眼镜的脸😕困扰😟担心🙁微微不满☹️不满😮吃惊😯缄默😲震惊😳脸红🥺恳求的脸😦啊😧极度痛苦😨害怕😰冷汗😥失望但如释重负😢哭😭放声大哭😱吓死了😖困惑😣痛苦😞失望😓汗😩累死了😫累🥱打呵欠😤傲慢😡怒火中烧😠生气🤬嘴上有符号的脸😈恶魔微笑👿生气的恶魔💀头骨☠️骷髅💩大便🤡小丑脸👹食人魔👺小妖精👻鬼👽外星人👾外星怪物🤖机器人😺大笑的猫😸微笑的猫😹笑出眼泪的猫😻花痴的猫😼奸笑的猫😽亲亲猫🙀疲倦的猫😿哭泣的猫😾生气的猫🙈非礼勿视🙉非礼勿听🙊非礼勿言💋唇印💌情书💘心中箭了💝系有缎带的心💖闪亮的心💗搏动的心💓心跳💞舞动的心💕两颗心💟心型装饰❣️心叹号💔心碎❤️红心🧡橙心💛黄心💚绿心💙蓝心💜紫心🤎棕心🖤黑心🤍白心💯一百分💢怒💥爆炸💫头晕💦汗滴💨 ...继续阅读 (60)

参考自Akilarの糖果屋的Archive Beautify，本文仅为记录魔改过程步骤custom目录若没有需要自己新建在[Blogroot]\themes\butterfly\scripts\custom\目录下新建animals_timeline_year.js，并在[Blogroot]\themes\butterfly\scripts\custom\animals_timeline_year.js中输入以下内容：123456789101112131415161718hexo.extend.helper.register('getAnimalIcon',function(year) {varindex =parseInt(year) %12;varicon = {0:'icon-monkey',1:'icon-rooster',2:'icon-dog',3:'icon-boar',4:'icon-rat',5:'icon-ox',6:'icon-tiger',7:'icon-rabbit',8:'icon-dragon',9:'icon-snake&# ...继续阅读 (66)

此文章来自Akilarの糖果屋插件版配置教程插件版教程安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：1npm install hexo-butterfly-categories-card --save添加配置信息，以下为写法示例在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加1234567891011121314151617181920212223242526# hexo-butterfly-categories-card# see https://akilar.top/posts/a9131002/categoryBar:enable:true# 开关priority:5#过滤器优先权enable_page:/# 应用页面layout:# 挂载容器类型type:idname:recent-postsindex:0column:odd# odd：3列 | even：4列row:1#显示行数，默认两行，超过行数切换为滚动显示message:-descr:Ubuntu指南cover:https://npm.elemecdn.com/akilar-candyassets/image/cover1.webp-descr:玩转Win10cover:https://npm.elemecdn.com/akilar-cand ...继续阅读 (60)

白天黑夜转换动画点击查看白天黑夜切换动画教程custom文件夹若没有需要自己新建，以后新建的文件可以放置此处新建[Blogroot]\themes\butterfly\layout\includes\custom\sun_moon.pug,这部分其实实质上就是一个svg文件，通过js操作它的旋转显隐，淡入淡出实现动画效果。123456789svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0')symbol#icon-sun(viewBox='0 0 1024 1024')path(d='M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z', fill='#FFD878', p-id='8420')path(d='M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z', fill='#FFE4A9', p-id=& ...继续阅读 (61)

本文为记录自己学习算法的过程[70]爬楼梯假设你正在爬楼梯。需要n阶你才能到达楼顶。每次你可以爬1或2个台阶。你有多少种不同的方法可以爬到楼顶呢？示例 1：12345输入：n = 2输出：2解释：有两种方法可以爬到楼顶。1. 1 阶 + 1 阶2. 2 阶示例 2：123456输入：n = 3输出：3解释：有三种方法可以爬到楼顶。1. 1 阶 + 1 阶 + 1 阶2. 1 阶 + 2 阶3. 2 阶 + 1 阶提示：$1 <= n <= 45$题解：123456789101112131415161718classSolution{public:intclimbStairs(intn){if(n <=2) {//1个台阶一种方法，2个台阶有两种方法returnn;}//第n级台阶可以由n-1级台阶上来，也可以由n-2级台阶上来intans =0;inta =1;intb =2;for(inti =3; i <= n; ++i) {ans = a + b;a = b;b = ans;}returnans;}};思路：这题主要考察的就是思维能力是动态规划吧，在思考的时候不能总是固定着自己的思想，总是想着下一步可以走一步或者两步，一般都会考虑直接递归，但是在这题会导致超时，所以需要重新考虑方法。在这题主要的思 ...继续阅读 (52)

本文为记录自己学习算法的过程[28]实现 strStr()实现strStr()函数。给你两个字符串haystack和needle，请你在haystack字符串中找出needle字符串出现的第一个位置（下标从0开始）。如果不存在，则返回-1。说明：当needle是空字符串时，我们应当返回什么值呢？这是一个在面试中很好的问题。对于本题而言，当needle是空字符串时我们应当返回0。这与 C 语言的strstr()以及Java的indexOf()定义相符。示例 1：12输入：haystack = "hello", needle = "ll"输出：2示例 2：12输入：haystack = "aaaaa", needle = "bba"输出：-1示例 3：12输入：haystack = "", needle = ""输出：0提示：$1 <= haystack.length, needle.length <= 10^4$haystack和needle仅由小写英文字符组成题解：1234567891011121314151617181920212223242526272829classSolution{public:intstrStr(string haystack, string needle){if(needle.length() ==0) {//needle长 ...继续阅读 (67)

本文为记录自己学习算法的过程[9]回文数描述：给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。例如，121是回文数，而123不是示例112输入：x = 121输出：true示例2123输入：x = -121输出：false解释：从左向右读, 为 -121 。 从右向左读, 为 121- 。因此它不是一个回文数。示例3123输入：x = 10输出：false解释：从右向左读, 为 01 。因此它不是一个回文数提示$-2^{31} <= x <= 2^{31} - 1 $题解：方法一123456789101112classSolution{public:boolisPalindrome(intx){if(x <0) {//数字小于0不可能是回文数，直接返回falsereturnfalse;}string s =to_string(x);//将x转化成字符串string s1 = s;//接受字符串s，便于后面比对reverse(s.begin(), s.end());//翻转字符串returns1 == s;//判断翻转前后是否相等}};方法二12345678910111213141516classSolution{ ...继续阅读 (56)

本文实现了如何在butterfly主题中添加最新文章标签，其他主题可以在相应位置进行比较添加。预览效果本教程来自于Leonus几行代码实现最新文章标志，样式部分进行的修改。由于本站文章主页的datatime不知道为什么没有class的post-meta-date-created这个选择器，所以暂时采用旧版。实现教程非修改源码方案新建[BlogSource]/themes/butterfly/source/js/custom/newest_post.js文件：旧版新版12345678910111213141516171819202122// 旧版，本站采用// 确保其他页面第一个不添加if(location.pathname=='/')newPost();// 最新文章functionnewPost() {// 获取此类名而不是获取recent-post-item是因为一些插件也会使用recent-post-item类。// 所以获取recent-post-info可以确保每一篇都是文章。letls =document.querySelectorAll('.recent-post-info')for(leti =0; i < ls.length; i++) {// 如果是置顶则跳过，所以如果你最新文章置顶的话就无法添加标志， ...继续阅读 (41)