Hexo博客之butterfly主题优雅魔改系列（持续更新）

最新推荐文章于 2024-04-05 05:25:16 发布
置顶 最新推荐文章于 2024-04-05 05:25:16 发布
阅读量2w 收藏 143
点赞数 22
分类专栏： # 优雅魔改 Hexo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012208219/article/details/106883001
版权

为了便于各位博主了解到是否新增了魔改方案，请查看更新记录页

前置说明

魔改亮点

🆙主题可升级：几乎不改动主题源码。即便魔改，也不需要为升级主题而烦恼。

🍳简单快速：简单上手，快速修改。

🍭看我72变：多种背景随意更换。

📕优雅阅读：对卡片进行不同的透明度设置，实现更优雅的阅读。

👦个性友联：为你的好友设置不同的颜色

🎈页脚更炫酷：彩色渐变footer喜欢么？

🍟更多优点等你发现


为什么写这篇文章?

相信在这之前，大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律，都是一种方式，大量修改模板（主题源文件）。这种方式的好处就是简单快速且直接，缺点就是每次升级😏，不用我说了吧。除非你不打算在升级。

但是对于一个热爱升级的我来说，我怎么可以这样。于是乎我便写了这篇文章。按照此教程进行的魔改，大部分都是通过引入新的js文件和css文件实现的。这意味着再也不用因为升级而再次魔改而苦恼了😄。同样的缺点也还是有的，引入新文件必定导致页面加载速度下降，下降多少取决于访客网速、电脑配置及服务器的带宽。具体速度可以参考本博客。

此博客环境：Coding + Jsdeliver

这篇文章大部分修改全部没有改动pug模板。基本都是添加css文件和js文件实现的修改。

至此（2020-06-12）只有两项（友链页、双评论）修改改动了pug模板。

至于友链页 ，可改动空间并不大，因此升级主题只需要直接将文件覆盖作者文件即可。

而双评论，只需要每次升级主题将对应文件的else if改为if即可。

相信上述两项pug模板的修改不需要刻意记录也能印在心头把？

快速预览魔改范围

JS/CSS如何使用

下面关于各种修改我会直接给出参考代码，你可以每做一个修改都建立一个新的css/js文件，也可以将所有的代码都复制到一个css/js文件。

JS/CSS如何引用

此篇文章所说的一切引用（包括css和js）都可以参考这里。

  1. 打开主题配置文件（butterfly.yml）
  2. 定位搜索 inject
  3. 其中head是用来引入css的。bottom是用来引入js的。

示例：

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/css/flink.min.css">
  bottom:
    - <script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/hideMobileSidebar.js"></script>

注：以上方式2.3.5版本可用，其他版本请自行查找引入自定义js及css的地方。

引用方式说明

引用方式二选一即可。

以相对路径引入

  1. 将写好的css文件移动到\Butterfly\source\css\目录下。

  2. 然后修改配置文件的引入方式

以外链的方式引入

同样的可以将这个文件上传到cdn，如七牛云、又拍云、GitHub+Jsdeliver等。

只需要将引入地址写为你的文件外链地址即可。

例如我的jsd链接

注：不同版本可能设置略有不同，请仔细对照你所使用版本的文档。引入并非写个连接，而是使用html标签引入。

快速“复制”

不想动手，就想得到魔改后的效果。😏可以直接使用作者自用的css。

直接使用作者自用的css可能会导致自己的布局出现错误排版，或者其他各种问题。无法解决！或者自行解决。（除非自己懂前端。）

css

  1. 自定义css

    https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/pool.min.css

  2. 阿里iconfont

    https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/iconfont.min.css

js

  1. 自定义js

    https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/js/pool.min.js

以上三个链接引用后理论上会与我的博客效果一模一样（不包含友链、双评论）。其中：

  • 友情链接页面

    替换模板即可，无需在添加css（引用以上三个链接的情况下）

  • 双评论

    修改模板，无需添加css（引用以上三个链接的情况下）

小康的蝴蝶魔改库

这个工具库主要为了方便修改js部分而编写的库，以后可能会扩充也可能是最后一个版本。

具体使用与文档参照：xkTool工具库文档

使用此库后此页面所有有关js部分的代码(css代码参照此文档)均可参照文档使用对象方法调用，而无需复制粘贴冗长的代码。例如：

  • 随机背景
  • 简单插入阿里svg
  • banner图滤镜效果、透明
  • 。。。

视觉体验

这部分修改主要是针对进入博客后的直观感受。

背景

与本博客同款背景。开启需关闭背景图片设置，可能也需要关闭js动态背景。具体请自己尝试，本人没有尝试过。（主题的background请设置'#efefef'）

背景可参照Hexo博客之butterfly主题优化更换背景这篇文章进行魔改

去掉Banner图

效果图：

通过几行JS即可搞定：

var full_page = document.getElementsByClassName("full_page");
if (full_page.length != 0) {
   
  full_page[0].style.background = "transparent";
}

  • 2020-05-17

    F 修复连同文章页也变透明的bug

鼠标样式

将以下代码复制到你所创建的css文件即可。

body {
   
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
a,
img {
   
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}

代码解读：以上代码表示当鼠标在body元素及a、img元素上时所显示的鼠标为url路径里的样式。

因此你可以将里边的文件替换为任意鼠标样式。

鼠标*字跟随样式

真实效果可以去IconFont表或者友情链接页面去体验。

这个修改只是一个js，当然你可以全局引入，这样就会在整个博客都有这种效果。当然也可以向我一样，只在某个文章引入。

  1. 全局引入

    直接在配置文件处引入这个js即可。

    https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js

  2. 只在部分文章引入

    将下边内容复制到markdown即可。注意：如果你的编辑器为你转化成了代码块，请删掉代码块。因为这是一个HTML标签

    <script src='https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js'></script>

页脚渐变

效果图

同样的将以下代码复制到你所创建的css文件即可。

/* 页脚footer */
/* 渐变色滚动动画 */
@-webkit-keyframes Gradient {
   
    0% {
   
        background-position: 0 50%;
    }

    50% {
   
        background-position: 100% 50%;
    }

    100% {
   
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
   
    0% {
   
        background-position: 0 50%;
    }

    50% {
   
        background-position: 100% 50%;
    }

    100% {
   
        background-position: 0 50%;
    }
}

@keyframes Gradient {
   
    0% {
   
        background-position: 0 50%;
    }

    50% {
   
        background-position: 100% 50%;
    }

    100% {
   
        background-position: 0 50%;
    }
}
#footer {
   
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#footer:before {
   
    background-color: rgba(0, 0, 0, 0);
}

滚动条

将以下代码复制到你所创建的css文件即可。

/* 滚动条 */
::-webkit-scrollbar {
   
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
   
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
   
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
   
  background-color: transparent;
}

::-moz-selection {
   
  color: #fff;
  background-color: #49b1f5;
}

手机侧边栏默认不展开

这段修改需要将下边的代码复制到新建的js文件中。

var mobile_sidebar_menus = document.getElementById("mobile-sidebar-menus");
var menus_item_child = mobile_sidebar_menus.getElementsByClassName(
    "menus_item_child"
);
var menus_expand = mobile_sidebar_menus.getElementsByClassName("menus-expand");
for (var i = 0; i < menus_item_child.length; i++) {
   
    menus_item_child[i].style.display = "none";
    menus_expand[i].className += " menus-closed";
}

这里提供一个现成的地址，可以直接在引用处填写。也可以复制上边的代码到你自己的js文件中。

在线地址：https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/hideMobileSidebar.js

分类卡片折叠

分类卡片隐藏需要同时引入css和js文件。

  1. JavaScript代码

    var card_category_list = document.getElementsByClassName(
    "card-category-list child"
);
var item = document.getElementsByClassName("card-category-list-item");
function toggle(t) {
     
    var display = t.parentElement.nextSibling.style.display;
    if (display == "none") {
     
        t.parentElement.nextSibling.style.display = "block";
        t.parentElement.nextSibling.style.height = "100%";
        t.className = t.className.replace("fa-chevron-up", "fa-chevron-down");
    } else {
     
        t.parentElement.nextSibling.style.display = "none";
        t.className = t.className.replace("fa-chevron-down", "fa-chevron-up");
    }
}

for (var i = 0; i < card_category_list.length; i++) {
     
    card_category_list[i].style.display = "none";
    card_category_list[i].style.transition = "all 1s";
    card_category_list[i].previousSibling.innerHTML +=
        '<i class="fa fa-chevron-up menus-expand  menus-closed" aria-hidden="true" style="margin-left:20px;" οnclick="toggle(this)"></i>';
}

  2. CSS代码

    #aside_content
.card-archives
ul.card-archive-list
> .card-archive-list-item
a
span:first-child,
#aside_content
.card-categories
ul.card-category-list
> .card-category-list-item
a
span:first-child {
     
    width: auto;
    min-width: 50%;
}

同样的，这个魔改也提供在线地址。

文章表情不换行

这个是一段JS代码，我建议在你需要添加表情的文章引入这段js。如果全局引入可能会拖慢页面加载速度。

<script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/WithoutLine.min.js"></script>

以上代码，直接在markdown文档最下边写即可。

注意：如果你用的markdown如果将其转为代码块，那么请删除代码块，因为这是一个脚本内容。正确写的姿势如图（typora为例）：

错误示例：

部分编辑器可能将其自动转化为代码块，请各位博主注意些！

阅读模式的背景与字体

阅读模式下会给body加一个class名，因此改起来很简单。

.read-mode{
   
    /* 字体大小 */
    font-size:17px;
    /* 可以在这里引入自定义字体，具体方法请自行百度css引入字体 */
}
.read-mode #web_bg{
   
    /* 背景颜色 */
    background:#fdf6e3;
}

任意元素添加动效动画

On DOM load On hover On parent hover
 faa-wrench animated  faa-wrench animated-hover  faa-wrench
 faa-ring animated  faa-ring animated-hover  faa-ring
 faa-horizontal animated  faa-horizontal animated-hover  faa-horizontal
 faa-vertical animated  faa-vertical animated-hover  faa-vertical
 faa-flash animated  faa-flash animated-hover  faa-flash
 faa-bounce animated  faa-bounce animated-hover  faa-bounce
 faa-spin animated  faa-spin animated-hover  faa-spin
 faa-float animated  faa-float animated-hover  faa-float
 faa-pulse animated  faa-pulse animated-hover  faa-pulse
 faa-shake animated  faa-shake animated-hover  faa-shake
 faa-tada animated  faa-tada animated-hover  faa-tada
 faa-passing animated  faa-passing animated-hover  faa-passing
 faa-passing-reverse animated  faa-passing-reverse animated-hover  faa-passing-reverse
 faa-burst animated  faa-burst animated-hover  faa-burst
 faa-falling animated  faa-falling animated-hover  faa-falling
 faa-rising animated  faa-rising animated-hover  faa-rising

理论上这些动效是可以给任意DOM元素添加的。添加方式很简单，引入一个css库：https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css

然后在DOM元素的类名添加相应的动画即可。

例如网址导航栏可以写为- 网址收藏 || https://dh.xiaokang.me/ || fas fa-infinity faa-shake animated

注意：如果使用On parent hover需要向父级元素添加class名faa-parent animated-hover。其余两个不需要。

MAC代码框美化

将butterfly.yml的highlight_theme配置项改为mac后任意引入下方一个css即可。（也可加入到自己的css文件中）

  • 白色代码框

    https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/macWhite.css

    image-20200625185013423

  • 黑色美化版

    https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/macblack.css

    image-20200625184949239

页面类修改

这部分的修改主要是针对一些特殊的页面，例如友链页。

友情链接页面修改

效果图

友情链接修改内容过大，不建议小白修改。

此修改需要替换作者文件（及flink.pug），位置\themes\Butterfly\layout\

flink.pug下载地址：https://tzk.lanzous.com/b06lwtwkb

替换完pug模板之后引入此css样式即可：https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/flink.min.css

  • 2020-0617

    适配蝴蝶3.0版本

  • 2020-05-09

    加入一行小字效果。

字段说明

至于如何配合使用，请自行尝试（此配置加在link.yml下即可）示例如下：

class_test:
  class_name: class名
  class_desc: 小字描述支持html标签
  link_list:
    name: 小康博客
    link: https://antmoe.com
    avatar: https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg
    descr: 更多效果自行搭配
    # 边框大小 默认为0 
    width: 0px
    # 边框样式 默认 solid
    style: solid
    # 边框颜色 默认淡蓝色 #49b1f5
    color: "#0078e7"
    # 自动旋转 可选值 flash（闪现） link_custom（单色呼吸灯） link_custom1（彩色呼吸灯）
    custom: link_custom1
    # 动画时长设定，默认为0
    time: 4s
    # name的颜色
    namecolor: "#ff9191"
    # descr的颜色
    descolor: "#ff9191"
    # 背景颜色
    background: 0
    # 鼠标悬停旋转角度
    rotate: 360deg
    # 自动旋转 latuo左旋转 rauto右旋转
    autorotate: "lauto"
    # 旋转的
最低0.47元/天 解锁文章
DreamyTZK
关注
专栏目录
html5去掉图片背景颜色
07-11
可以将image中的背景颜色变成透明的，实现去背景的功能
记录一次hexo及butterfly版本更新，以及对博客魔改的恢复
qq_27489877的博客
07-26 1108
最近放假闲来无事，想着更新一下博客使用的hexo和butterfly版本不改不知道，先前在原版主题上做的一些魔改已经让更新版本不再是替换文件那么简单了所以在本文中我打算记录一下这次版本更新的一些经验，并记录一下我做的一些魔改，方便下次版本更新时查阅
Hexo：Butterfly主题魔改之首页置顶轮博插件
weixin_42464282的博客
06-01 507
Hexo：Butterfly主题魔改之首页置顶轮博插件
Hexo 魔改主题 butterfly
云玩家
05-07 1833
欢迎到我的博客查看最新文章: https://blog.clouder.im 所有魔改均可取消! 配置默认不开启, 因此可以平滑换到魔改 butterfly 主题. 首先推介 butterfly 文档, 这里只介绍魔改部分的配置. 这里的示例仅为合法示例, 即你填了该示例不一定能正确显示, 仅供参考. 魔改主题 Github 地址 使用主题 & 平滑更换 下载并配置 进入主题目录, 下载主...
Butterfly 主题魔改记录_has-jax(2)，2024网络安全进阶者的新篇章
m0_58397123的博客
04-05 722
在实际的渗透测试过程中，面对复杂多变的网络环境，当常用工具不能满足实际需求的时候，往往需要对现有工具进行扩展，或者编写符合我们要求的工具、自动化脚本，这个时候就需要具备一定的编程能力。#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**
hexo（butterfly）蝴蝶主题+个性美化
热门推荐
cungudafa的博客
04-23 3万+
文章目录一、前言二、蝴蝶主题1.快速入门2.valine评论移植3.文章移植三、个性美化1.boyui对话框式简介页面2.说说动态页面3.友链页面优化 一、前言 这两天心血来潮给自己的hexo网站换了主题，从sakura到butterfly了， 原sakura主题全部内容放到：http://cungudafa.gitee.io （ps.sakura主题后面作者好像又有更新，我就不更新啦~） 现目...
Hexo：Butterfly主题魔改之头部导航栏
weixin_42464282的博客
06-01 1933
Butterfly主题魔改之头部导航栏
html背景图片溢出,如何清除背景图片溢出？
weixin_42237496的博客
06-09 1647
我试图从div中的背景图像中删除溢出。我有4个相同图像的div创建一个背景图像(我定位每个图像，以便它匹配4个div)。基本上我试图给左边的“奇异”图像制作动画，并用另一幅图像在相同的动画中替换它(这实际上只是一个CSS转换)。问题是overflow：hidden隐藏了溢出，但是当你将它移动到左边时，你会看到隐藏图像的其余部分。如何清除背景图片溢出？是否有任何方法来剪辑或删除溢出，使我的过渡看起来...
html5去除页面背景,背景图像使用HTML5来适应页面
weixin_39673947的博客
06-03 259
我想使一个图像成为网站的完整背景！我知道这听起来很简单,但它只是让我疯狂,它不适合的页面,这是我达到的最后一次尝试！CSS：body {background:url('images/bg_img1.jpg') #A98436 no-repeat left top;-webkit-background-size: cover;-moz-background-size: cover;backgroun...
基于Hexo的安静优雅主题Ayer设计源码
04-07
Hexo主题Ayer：基于Javascript构建，包含172个文件，包括47个EJS模板文件、36个Stylus样式文件、27个JavaScript文件、19个YAML配置文件、11...该项目是一个安静且优雅的Hexo主题，提供了一个简洁、舒适的博客阅读体验。
hexo-blog-lionkk:魔改自butterfly主题，提供完整详细的文档，同时为了回馈开源，这不是生成后的网页文件，是您可以直接使用的源码，您只需要把博客相关信息换成您自己的就可以可以部署了，对于新手或者不懂编程的小伙伴来说，简直是福音！
03-23
:sun: hexo-blog-lionkk 这是我的个人博客库。 现在，每个人都可以下载和修改它。 如果它可以帮助您建立博客或您喜欢该回购协议，可以给我一个星星！ 谢谢！目前是已经在做开源的准备了，当然还有一些优化项和功能...
基于Hexo的Butterfly主题设计源码
最新发布
09-23
该项目是基于Hexo的Butterfly主题设计源码，共计205个文件，其中包括107个Pug模板文件、45个Stylus样式文件、33个JavaScript脚本文件、12个YAML配置文件、2个Markdown文档、1个LICENSE文件、1个JSON数据文件、1个CSS...
hexo_butterfly_blog:使用Hexo + Butterfly主题搭建的博客
03-17
在这个项目“hexo_butterfly_blog”中，我们将深入探讨如何使用Hexo与Butterfly主题搭建一个个人博客。 首先，你需要在本地安装Node.js环境，因为Hexo依赖于Node.js。安装完成后，通过npm（Node包管理器）全局安装...
hexo__butterfly:博客
04-22
总的来说，这个压缩包提供了一个基于Hexo和Butterfly主题的博客系统，结合Stylus预处理器，允许用户创建一个既有良好视觉效果又易于维护的个人博客。通过学习和使用这个系统，我们可以深入了解静态站点生成器的工作...
Hexo博客美化之蝴蝶(butterfly)主题魔改
glassy___sky的博客
09-03 8305
这里写自定义目录标题首先下载主题配置博客主题_config.yaml配置前须知_config.yaml配置简单介绍如果参考我的脚手架，大家可以阅读readme和changelog文件，和蝴蝶主题官方文档。   Hexo是轻量级的极客博客，因为它简便，轻巧，扩展性强，搭建部署方便深受广大人们的喜爱。各种琳琅满路的Hexo主题也是被各种大佬开发出来，十分钦佩，向大佬仰望，大声称赞：流批！！！ 我在翻看各种主题后，便选择了蝴蝶这个主题，蝴蝶主题是由大佬Jerry制作的，其简洁，具有现代风格，扩展强，配置简单明了将
【blog】小白博客搭建和踩坑历程 hexo+butterfly
chierhy的博客
12-07 2765
blog 博客搭建和踩坑历程 hexo+butterfly
【Hexo】Hexo搭建Butterfly主题并快速美化
D_AKJS
03-01 1万+
快速美化hexo博客。
hexo个人博客搭建（二）butterfly主题配置
YR_112233的博客
02-04 1万+
设置网站个人资料、修改导航菜单、代码块展示设置、本地搜索功能、创建文件夹、修改副标题、图片设置（网站图标、头像、封面、详情页的顶部图片、文章封面、错误页面）、图片懒加载、图片大图查看、文章页样式、侧边栏样式、特效美化、字数统计、文章分享功能
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值