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

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

直接体验魔改效果可以访问我的个人博客小康博客

此文更新可能不及时，如果更新记录有新的方案后，本文没有那么请移至我的个人博客进行查找。

前置说明

魔改亮点

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

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

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

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

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

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

🍟更多优点等你发现

为什么写这篇文章?

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

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

此博客环境：Coding + Jsdeliver

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

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

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

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

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

JS/CSS如何使用

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

JS/CSS如何引用

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

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

示例：

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

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

引用方式说明

引用方式二选一即可。

以相对路径引入

将写好的css文件移动到\Butterfly\source\css\目录下。
然后修改配置文件的引入方式

以外链的方式引入

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

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

例如我的jsd链接

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

视觉体验

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

背景

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

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

鼠标样式

将以下代码复制到你所创建的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路径里的样式。

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

页脚渐变

效果图

同样的将以下代码复制到你所创建的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@master/Hexo/js/hideMobileSidebar.js

分类卡片隐藏

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

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;" onclick="toggle(this)"></i>';
}

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

https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/js/hideCategory.min.js

CSS

https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/hideCategory.min.css

页面类修改

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

友情链接页面修改

效果图

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

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

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

替换完pug模板之后将以下css复制到你所创建的css文件中即可。

/* 边框呼吸灯效果 */
@keyframes link_custom {
  from {
    box-shadow: 0 0 5px var(--primary-color, grey),
      inset 0 0 5px var(--primary-color, grey),
      0 1px 0 var(--primary-color, grey);
  }

  to {
    box-shadow: 0 0 20px var(--primary-color, grey),
      inset 0 0 10px var(--primary-color, grey),
      0 1px 0 var(--primary-color, grey);
  }
}
/* 边框彩色呼吸灯 */
@keyframes link_custom1 {
  0% {
    box-shadow: 0 0 4px #ca00ff;
  }

  25% {
    box-shadow: 0 0 16px #00b5e5;
  }

  50% {
    box-shadow: 0 0 4px #00f;
  }

  75% {
    box-shadow: 0 0 16px #b1da21;
  }

  100% {
    box-shadow: 0 0 4px #f00;
  }
}
/* 边框闪烁 */
@keyframes flash {
  from {
    border-color: transparent;
  }

  to {
    border-color: var(--primary-color, grey);
  }
}
/* 头像自动旋转 */
@keyframes auto_rotate_left {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes auto_rotate_right {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.flink#article-container .post-cards .md-links > .md-links-item a:hover {
  color: #fff;
}

.flink .post-cards .md-links > .md-links-item a {
  color: var(--primary-color, #49b1f5);
  text-decoration: none;
}

.flink .post-cards .md-links > .md-links-item:hover {
  box-shadow: 0 2px 20px var(--primary-color, #49b1f5);
  animation-play-state: paused;
}

.flink#article-container .post-cards .md-links > .md-links-item:before {
  background: var(--primary-color, #49b1f5);
}

.flink .post-cards .md-links > .md-links-item {
  border: 0px solid var(--primary-color, #49b1f5);
}
.flink#article-container .post-cards .md-links > .md-links-item:hover img {
  -webkit-transform: rotate(var(--primary-rotate));
  -moz-transform: rotate(var(--primary-rotate));
  -o-transform: rotate(var(--primary-rotate));
  -ms-transform: rotate(var(--primary-rotate));
  transform: rotate(var(--primary-rotate));
}
/* 头像自动旋转 */
.flink#article-container .post-cards .md-links > .md-links-item a .lauto {
  animation: auto_rotate_left var(--autotime) linear infinite;
}
.flink#article-container .post-cards .md-links > .md-links-item a .rauto {
  animation: auto_rotate_right var(--autotime) linear infinite;
}
/* 友联字体颜色 */

/* name与desc的颜色 */
.flink#article-container .post-cards .md-links > .md-links-item .customcolor {
  color: var(--namecolor, #1f2d3d);
}
/* name与des鼠标悬停的字体颜色 */
.flink#article-container
  .post-cards
  .md-links
  > .md-links-item
  .customcolor:hover {
  color: #fff;
}

字段说明

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

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"
# 旋转的周期（时长）
autotime: 2s
#移除此链接的权重 0为否 非0为移除
remove: 0

背景设置页

这个页面的初衷是为了测试不同背景下的博客效果。但可以勉强当作背景设置页。效果参考地址：butterfly主题背景更换

这个修改同样需要同时添加css与js代码。

JavaScript代码

// 获取标签
// 全局背景div
var web_bg = document.getElementById("web_bg");
// 公共父级
var content_inner = document.getElementById("content-inner");
// 获取Cookies
// 透明度
var opacity = Cookies.get("opacity");
// 背景
var bg = Cookies.get("bg");
// 动画
var animation = Cookies.get("animation");
// 背景类型
var type = Cookies.get("type");
// 声明遍历 用于记录当前color
// 设置背景
if (bg) {
  web_bg.style.background = bg;
  web_bg.setAttribute("data-type", type);
  if (animation) {
    web_bg.style.animation = animation;
  }
}
function setColor(opacity) {
  // style="--light_bg_color: rgb(255, 255, 255,.3);--dark_bg_color: rgba(18,18,18,.2);"
  var light_bg_color = "--light_bg_color: rgb(255, 255, 255," + opacity + ");";
  var dark_bg_color = "--dark_bg_color: rgba(18,18,18," + opacity + ");";
  content_inner.setAttribute("style", light_bg_color + dark_bg_color);
}
setColor(opacity);

CSS代码

#aside_content .card-widget,#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
    background: var(--light_bg_color)
}

[data-theme=dark] #nav,[data-theme=dark] .layout_page>div:first-child:not(.recent-posts),[data-theme=dark] .layout_post>#post {
    background-color: var(--dark_bg_color)
}

将以上js与css全部引入后，新建一个页面。然后在其index.md中（正文部分）写入以下：

<style>@keyframes gradientBG{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100% {background-position: 0% 50%;}}#rightside{display:none;}</style>

> 这个页面是用来测试渐变背景的效果，以及不同透明度的效果。如果你有能力可以直接看 css 样式。否则请返回[Hexo 博客之 butterfly 主题优化更换背景](https://www.antmoe.com/posts/7198453/index.html#附录)复制代码。
> 阅读体验及个标签样式请自己进行调整。

## 透明度调节

<center style='margin-bottom:20px' id = 'opt'><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0">透明度0</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.1">透明度0.1</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.2">透明度0.2</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.3">透明度0.3</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.4">透明度0.4</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.5">透明度0.5</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.6">透明度0.6</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.7">透明度0.7</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.8">透明度0.8</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.9">透明度0.9</a><a style="color: #FFF;margin-bottom: 10px;"  style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="1">透明度1</a></center>

## 背景调节

<div id='demo_style' style='text-align:center;margin:0 auto;'>


### 渐变类

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: url(&quot;https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png&quot;),linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);text-align: center;line-height: 200px;margin-bottom:5px;cursor: pointer;">粉蓝色有图片</div>

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);text-align: center;line-height: 200px;cursor: pointer;">粉蓝色无图片</div>

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: linear-gradient(102.7deg,#fddaff 8.2%,#dfadfc 19.6%,#adcdfc 36.8%,#adfcf4 73.2%,#caf8d0 90.9%);text-align: center;line-height: 200px;cursor: pointer;">美美哒渐变</div>

<div data-type="color" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(90deg,rgba(247,149,51,.1) 0,rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1) 100%);text-align: center;line-height: 200px;cursor: pointer;">博主同款</div>

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);    background-size: 400% 400%;animation: gradientBG 15s ease infinite;text-align: center;line-height: 200px;cursor: pointer;">动态渐变</div>

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(to right bottom, rgb(0, 255, 240), rgb(92, 159, 247) 40%, rgb(211, 34, 255) 80%);text-align: center;line-height: 200px;cursor: pointer;">紫蓝色渐变</div>

### 渐变加图片类

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url(https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png),url(https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg)0% 0% / cover;text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">紫蓝色渐变</div>

### 图片类

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/tool/bing/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">必应壁纸</div>

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/others/randacgimage/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">随机二次元图</div>

<div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/others/randacgblogbg/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">随机二次元背景图</div>

</div>

## 测试文章

### 春

盼望着，盼望着，东风来了，春天的脚步近了。

一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。

小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。

桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。

“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。

雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片这安静而和平的夜。乡下去，小路上，石桥边，撑起伞慢慢走着的人;还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。

天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去，“一年之计在于春”;刚起头儿，有的是工夫，有的是希望。

春天像刚落地的娃娃，从头到脚都是新的，它生长着。

春天像小姑娘，花枝招展的，笑着，走着。

春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。

1. 有序列表
2. 有序
3. 有

- 无需列表
- 测试

{% note default icon %}
default
{% endnote %}

{% note primary icon %}
primary
{% endnote %}

{% note success icon %}
success
{% endnote %}

{% note info icon %}
info
{% endnote %}

{% note warning icon %}
warning
{% endnote %}

{% note danger icon %}
danger
{% endnote %}

{% note primary no-icon%}

#### Primary Header**Welcome** to [Hexo!](https://hexo.io)

{% endnote %}


<script>var article_container=document.getElementById("demo_style"),opt=document.getElementById("opt");article_container.addEventListener("click",function(e){var t=e.target;"DIV"===t.nodeName&&"bg_test"===t.className&&(web_bg.style.background=t.style.background,web_bg.style.animation=t.style.animation),Cookies.set("bg",t.style.background,{expires:1}),Cookies.set("animation",t.style.animation,{expires:1}),Cookies.set("type",t.getAttribute("data-type"),{expires:1})}),opt.addEventListener("click",function(e){var t=e.target;if("A"===t.nodeName){var a=t.getAttribute("data-opacity");if(a){Cookies.set("opacity",a,{expires:1});var n="--light_bg_color: rgb(255, 255, 255,"+a+");",i="--dark_bg_color: rgba(18,18,18,"+a+");";document.getElementById("content-inner").setAttribute("style",n+i)}}e.preventDefault()});</script>

功能扩展

这里的修改主要是针对一些功能性的拓展，例如tab，轮播图等。

标签外挂

此部分修改来源于Volantis主题，扩展的标签分别为Checkbox & Radio、富文本按钮、Tab、Folding。

此项修改需要在源文件中添加新的文件，当然了并不会修改作者源文件。升级时只需要重新把这几个文件放入相应文件即可。文件下载地址：https://tzk.lanzous.com/icbscdg。

添加的位置为：主题目录下的scripts中的tags文件夹中。

接下来继续添加css、js代码即可。

CSS代码

div.tabs {
  display: block;
  position: relative;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  background: #fff;
  border: 1px solid rgba(85, 85, 85, 0.2);
  font-size: 0.7375rem;
}

.tab::before {
  content: none !important;
}

div.tabs ul li {
  padding: 0 !important;
  margin: 0 !important;
}

div.tabs ul li a {
  border-radius: 0;
}

[data-theme="dark"] div.tabs {
  border-radius: 2px;
  border-color: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] div.tabs ul.nav-tabs {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  filter: brightness(0.7);
}
[data-theme="dark"] div.tabs .tab-content .tab-pane {
  background: rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 0.7);
}
div.tabs .highlight,
div.tabs details,
div.tabs div.note,
div.tabs ol,
div.tabs p,
div.tabs ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

div.tabs ul.nav-tabs {
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 0 !important;
  padding: 0 !important;
  background: #f6f6f6;
  border-radius: 4px 4px 0 0;
  line-height: 1.4em;
}

div.tabs ul.nav-tabs li.tab {
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
}

div.tabs ul.nav-tabs li.tab:last-child {
  padding-right: 16px;
}

div.tabs ul.nav-tabs li.tab a {
  display: block;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  padding: 8px;
  text-align: center;
  line-height: inherit;
  font-weight: 700;
  color: rgba(68, 68, 68, 0.65);
  border: 1px solid transparent;
}

div.tabs ul.nav-tabs li.tab a:hover {
  color: #555;
}

div.tabs ul.nav-tabs li.tab.active a {
  cursor: default;
  color: #555;
  background: #fff;
  border: 1px solid rgba(85, 85, 85, 0.2);
  border-bottom: 1px solid #fff;
}

div.tabs .tab-content {
  border-top: 1px solid rgba(85, 85, 85, 0.2);
  margin-top: -1px;
}

div.tabs .tab-content .tab-pane {
  padding: 16px;
}

div.tabs .tab-content .tab-pane:not(.active) {
  display: none;
  opacity: 0;
}

div.tabs .tab-content .tab-pane.active {
  display: block;
  opacity: 1;
}

div.tabs .tab-content .tab-pane > .fancybox:first-child,
div.tabs .tab-content .tab-pane > .highlight:first-child,
div.tabs .tab-content .tab-pane > .note:first-child,
div.tabs .tab-content .tab-pane > .tabs:first-child,
div.tabs .tab-content .tab-pane > ol:first-child,
div.tabs .tab-content .tab-pane > p:first-child,
div.tabs .tab-content .tab-pane > ul:first-child {
  margin-top: 0;
}

div.tabs .tab-content .tab-pane > .fancybox:last-child,
div.tabs .tab-content .tab-pane > .highlight:last-child,
div.tabs .tab-content .tab-pane > .note:last-child,
div.tabs .tab-content .tab-pane > .tabs:last-child,
div.tabs .tab-content .tab-pane > ol:last-child,
div.tabs .tab-content .tab-pane > p:last-child,
div.tabs .tab-content .tab-pane > ul:last-child {
  margin-bottom: 0;
}

div.btns {
  margin: 0 -8px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: start;
  align-items: flex-start;
  overflow: visible;
}

[data-theme="dark"] div.btns {
  filter: brightness(0.7);
}

[data-theme="dark"] div.btns a {
  background: 0 0;
}

div.btns,
div.btns a,
div.btns p {
  font-size: 0.8125rem;
  color: #555;
}

div.btns b {
  font-size: 0.875rem;
}

.btns img {
  margin: 0 !important;
}

div.btns.wide > a {
  padding-left: 32px;
  padding-right: 32px;
}

div.btns.fill > a {
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: auto;
}

div.btns.around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

div.btns.center {
  -ms-flex-pack: center;
  justify-content: center;
}

div.btns.grid2 > a {
  width: calc(100% / 2 - 16px);
}

@media screen and (max-width: 1024px) {
  div.btns.grid2 > a {
    width: calc(100% / 2 - 16px);
  }
}

@media screen and (max-width: 768px) {
  div.btns.grid2 > a {
    width: calc(100% / 2 - 16px);
  }
}

@media screen and (max-width: 500px) {
  div.btns.grid2 > a {
    width: calc(100% / 1 - 16px);
  }
}

div.btns.grid3 > a {
  width: calc(100% / 3 - 16px);
}

@media screen and (max-width: 1024px) {
  div.btns.grid3 > a {
    width: calc(100% / 3 - 16px);
  }
}

@media screen and (max-width: 768px) {
  div.btns.grid3 > a {
    width: calc(100% / 3 - 16px);
  }
}

@media screen and (max-width: 500px) {
  div.btns.grid3 > a {
    width: calc(100% / 1 - 16px);
  }
}

div.btns.grid4 > a {
  width: calc(100% / 4 - 16px);
}

@media screen and (max-width: 1024px) {
  div.btns.grid4 > a {
    width: calc(100% / 3 - 16px);
  }
}

@media screen and (max-width: 768px) {
  div.btns.grid4 > a {
    width: calc(100% / 3 - 16px);
  }
}

@media screen and (max-width: 500px) {
  div.btns.grid4 > a {
    width: calc(100% / 2 - 16px);
  }
}

div.btns.grid5 > a {
  width: calc(100% / 5 - 16px);
}

@media screen and (max-width: 1024px) {
  div.btns.grid5 > a {
    width: calc(100% / 4 - 16px);
  }
}

@media screen and (max-width: 768px) {
  div.btns.grid5 > a {
    width: calc(100% / 3 - 16px);
  }
}

@media screen and (max-width: 500px) {
  div.btns.grid5 > a {
    width: calc(100% / 2 - 16px);
  }
}

div.btns a {
  transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  margin: 8px;
  margin-top: calc(1.25 * 16px + 32px);
  min-width: 120px;
  font-weight: 700;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 8px;
  text-align: center;
  background: #f6f6f6;
  border-radius: 4px;
}

div.btns a > i:first-child,
div.btns a > img:first-child {
  transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  height: 64px;
  width: 64px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  margin: 16px 8px 4px 8px;
  margin-top: calc(-1.25 * 16px - 32px);
  border: 2px solid #fff;
  background: #fff;
  line-height: 60px;
  font-size: 28px;
}

div.btns a > i:first-child.auto,
div.btns a > img:first-child.auto {
  width: auto;
}

div.btns a > i:first-child {
  color: #fff;
  background: #2196f3;
}

div.btns a b,
div.btns a p {
  margin: 0.25em;
  font-weight: 400;
  line-height: 1.25;
  word-wrap: break-word;
}

div.btns a b {
  font-weight: 700;
  line-height: 1.3;
}

div.btns a img {
  margin: 0.4em auto;
}

div.btns a:not([href]) {
  cursor: default;
  color: inherit;
}

div.btns a[href]:hover {
  background: rgba(255, 87, 34, 0.15);
}

div.btns a[href]:hover,
div.btns a[href]:hover b {
  color: #ff5722;
}

div.btns a[href]:hover > i:first-child,
div.btns a[href]:hover > img:first-child {
  transform: scale(1.1) translateY(-8px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

div.btns a[href]:hover > i:first-child {
  background: #ff5722;
}

div.btns.circle a > i:first-child,
div.btns.circle a > img:first-child {
  border-radius: 32px;
}

div.btns.rounded a > i:first-child,
div.btns.rounded a > img:first-child {
  border-radius: 16px;
}

.checkbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  height: 16px;
  width: 16px;
  transition: all 0.15s ease-out 0s;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  border-radius: 2px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 8px;
}

[data-theme="dark"] .checkbox {
  filter: brightness(0.7);
}

.checkbox input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:before {
  position: absolute;
  content: "";
  background: #fff;
}

.checkbox input[type="checkbox"]:before {
  left: 1px;
  top: 5px;
  width: 0;
  height: 2px;
  transition: all 0.2s ease-in;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.checkbox input[type="checkbox"]:after {
  right: 7px;
  bottom: 3px;
  width: 2px;
  height: 0;
  transition: all 0.2s ease-out;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transition-delay: 0.25s;
}

.checkbox input[type="checkbox"]:checked:before {
  left: 0;
  top: 7px;
  width: 6px;
  height: 2px;
}

.checkbox input[type="checkbox"]:checked:after {
  right: 3px;
  bottom: 1px;
  width: 2px;
  height: 10px;
}

.checkbox.minus input[type="checkbox"]:before {
  transform: rotate(0);
  left: 1px;
  top: 5px;
  width: 0;
  height: 2px;
}

.checkbox.minus input[type="checkbox"]:after {
  transform: rotate(0);
  left: 1px;
  top: 5px;
  width: 0;
  height: 2px;
}

.checkbox.minus input[type="checkbox"]:checked:before {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 2px;
}

.checkbox.minus input[type="checkbox"]:checked:after {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 2px;
}

.checkbox.plus input[type="checkbox"]:before {
  transform: rotate(0);
  left: 1px;
  top: 5px;
  width: 0;
  height: 2px;
}

.checkbox.plus input[type="checkbox"]:after {
  transform: rotate(0);
  left: 5px;
  top: 1px;
  width: 2px;
  height: 0;
}

.checkbox.plus input[type="checkbox"]:checked:before {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 2px;
}

.checkbox.plus input[type="checkbox"]:checked:after {
  left: 5px;
  top: 1px;
  width: 2px;
  height: 10px;
}

.checkbox.times input[type="checkbox"]:before {
  transform: rotate(45deg);
  left: 3px;
  top: 1px;
  width: 0;
  height: 2px;
}

.checkbox.times input[type="checkbox"]:after {
  transform: rotate(135deg);
  right: 3px;
  top: 1px;
  width: 0;
  height: 2px;
}

.checkbox.times input[type="checkbox"]:checked:before {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 2px;
}

.checkbox.times input[type="checkbox"]:checked:after {
  right: 1px;
  top: 5px;
  width: 10px;
  height: 2px;
}

.checkbox input[type="radio"] {
  border-radius: 50%;
}

.checkbox input[type="radio"]:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 2px;
  transform: scale(0);
  transition: all 0.25s ease-out;
}

.checkbox input[type="radio"]:checked:before {
  transform: scale(1);
}

.checkbox input {
  border: 2px solid #2196f3;
}

.checkbox input[type="checkbox"]:checked {
  background: #2196f3;
}

.checkbox input[type="radio"]:checked:before {
  background: #2196f3;
}

.checkbox.red input {
  border-color: #fe5f58;
}

.checkbox.red input[type="checkbox"]:checked {
  background: #fe5f58;
}

.checkbox.red input[type="radio"]:checked:before {
  background: #fe5f58;
}

.checkbox.green input {
  border-color: #3dc550;
}

.checkbox.green input[type="checkbox"]:checked {
  background: #3dc550;
}

.checkbox.green input[type="radio"]:checked:before {
  background: #3dc550;
}

.checkbox.yellow input {
  border-color: #ffbd2b;
}

.checkbox.yellow input[type="checkbox"]:checked {
  background: #ffbd2b;
}

.checkbox.yellow input[type="radio"]:checked:before {
  background: #ffbd2b;
}

.checkbox.cyan input {
  border-color: #1bcdfc;
}

.checkbox.cyan input[type="checkbox"]:checked {
  background: #1bcdfc;
}

.checkbox.cyan input[type="radio"]:checked:before {
  background: #1bcdfc;
}

.checkbox.blue input {
  border-color: #2196f3;
}

.checkbox.blue input[type="checkbox"]:checked {
  background: #2196f3;
}

.checkbox.blue input[type="radio"]:checked:before {
  background: #2196f3;
}

.checkbox p {
  display: inline-block;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

div.tabs details {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

details {
  display: block;
  padding: 16px;
  margin: 0.5rem 0;
  border-radius: 4px;
  font-size: 0.7375rem;
  transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  border: 1px solid #f6f6f6;
  line-height: 1.3;
}

[data-theme="dark"] details {
  filter: brightness(0.7);
}

details summary {
  cursor: pointer;
  padding: 16px;
  margin: -16px;
  border-radius: 4px;
  color: rgba(85, 85, 85, 0.7);
  font-size: 0.775rem;
  font-weight: 700;
  position: relative;
}

details summary > h1,
details summary > h2,
details summary > h3,
details summary > h4,
details summary > h5,
details summary > h6,
details summary > p {
  display: inline;
  border-bottom: none !important;
  margin-top: 2px;
  margin-bottom: 0;
}

details summary:hover {
  color: #555;
}

details summary:hover:after {
  position: absolute;
  content: "+";
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
}

details > summary {
  background: #f6f6f6;
}

details[blue] {
  border-color: #e8f4fd;
}

details[blue] > summary {
  background: #e8f4fd;
}

details[cyan] {
  border-color: #e8fafe;
}

details[cyan] > summary {
  background: #e8fafe;
}

details[green] {
  border-color: #ebf9ed;
}

details[green] > summary {
  background: #ebf9ed;
}

details[yellow] {
  border-color: #fff8e9;
}

details[yellow] > summary {
  background: #fff8e9;
}

details[red] {
  border-color: #feefee;
}

details[red] > summary {
  background: #feefee;
}

details[open] {
  border-color: rgba(85, 85, 85, 0.2);
}

details[open] > summary {
  border-bottom: 1px solid rgba(85, 85, 85, 0.2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

details[open][blue] {
  border-color: rgba(33, 150, 243, 0.3);
}

details[open][blue] > summary {
  border-bottom-color: rgba(33, 150, 243, 0.3);
}

details[open][cyan] {
  border-color: rgba(27, 205, 252, 0.3);
}

details[open][cyan] > summary {
  border-bottom-color: rgba(27, 205, 252, 0.3);
}

details[open][green] {
  border-color: rgba(61, 197, 80, 0.3);
}

details[open][green] > summary {
  border-bottom-color: rgba(61, 197, 80, 0.3);
}

details[open][yellow] {
  border-color: rgba(255, 189, 43, 0.3);
}

details[open][yellow] > summary {
  border-bottom-color: rgba(255, 189, 43, 0.3);
}

details[open][red] {
  border-color: rgba(254, 95, 88, 0.3);
}

details[open][red] > summary {
  border-bottom-color: rgba(254, 95, 88, 0.3);
}

details[open] > summary {
  color: #555;
  margin-bottom: 0;
}

details[open] > summary:hover:after {
  content: "-";
}

details[open] > div.content {
  padding: 16px;
  margin: -16px;
  margin-top: 0;
}

details[open] > div.content > .fancybox:first-child,
details[open] > div.content > .highlight:first-child,
details[open] > div.content > .note:first-child,
details[open] > div.content > .tabs:first-child,
details[open] > div.content > ol:first-child,
details[open] > div.content > p:first-child,
details[open] > div.content > ul:first-child {
  margin-top: 0;
}

details[open] > div.content > .fancybox:last-child,
details[open] > div.content > .highlight:last-child,
details[open] > div.content > .note:last-child,
details[open] > div.content > .tabs:last-child,
details[open] > div.content > ol:last-child,
details[open] > div.content > p:last-child,
details[open] > div.content > ul:last-child {
  margin-bottom: 0;
}

JS代码

/* eslint-disable */
(function ($) {
  "use strict";
  function setTabs() {
    const $tabs = $(".tabs");
    if ($tabs.length === 0) return;
    let $navs = $tabs.find(".nav-tabs .tab");
    for (var i = 0; i < $navs.length; i++) {
      let $a = $tabs.find($navs[i].children[0]);
      $a.addClass($a.attr("href"));
      $a.removeAttr("href");
    }
    $(".tabs .nav-tabs").on("click", "a", (e) => {
      e.preventDefault();
      e.stopPropagation();
      let $tab = $(e.target.parentElement.parentElement.parentElement);
      $tab.find(".nav-tabs .active").removeClass("active");
      $tab.find(e.target.parentElement).addClass("active");
      $tab.find(".tab-content .active").removeClass("active");
      $tab.find($(e.target).attr("class")).addClass("active");
      return false;
    });
  }

  $(function () {
    setTabs();
    // $(".article .video-container").fitVids();
    $(".scroll-down").on("click", function () {
      scrolltoElement(".l_body");
    });
    setTimeout(function () {
      $("#loading-bar-wrapper").fadeOut(500);
    }, 300);
  });
})(jQuery);

接下来就可以使用扩展标签了，具体语法可以参照源主题文档。

注意：不是所有的标签都可以使用，请对应功能进行使用。

自定义note（图标、颜色）

此项修改引用的图标是阿里iconfont图标。并不适用于Font Awesome。且你所使用的图标需引入的css中存在。关于如何使用阿里iconfont请参考Hexo博客之优雅使用阿里iconfont图标。这里只介绍成功引入阿里图标后如何自定义note标签的图标及颜色。

需要在css中加入以下规则。

/* 自定义note */
.note.custom {
  background-color: #f7f7f7;
  border-left-color: #777;
  display: block;
}
.custom:not(.no-icon)::before {
  font-family: "iconfont";
}

接下来便可以在md中直接使用HTML标签自定义图标了。

示例：

<div class="note icon custom iconfont 图标名" style="background: #f7f7f7;border-left-color: #777;"><p>default</p></div>

以上代码中的class名中的图标名在项目中查找。

background

表示note的背景，可以自行设置。当然渐变背景理论上也是可以的。
border-left-color

左边框的颜色。

点击复制代码即可粘贴到图表名。例如以下代码效果。

<div class="note icon custom iconfont icon-QQ" style="background: #f7f7f7;border-left-color: #777;"><p>default</p></div>

QQ图标

因为每个人的项目图标不一样，因此可能会出现class名相同但图标不一样的效果。具体效果以图标项目仓库为准。

常用配色搭配

/* default */
<div class="note  icon custom iconfont icon-QQ2" style="background: #f7f7f7;border-left-color: #777;"><p>default</p></div>

/* success */
<div class="note  icon custom iconfont icon-QQ2" style="background: #eff8f0;border-left-color: #5cb85c;"><p>success</p></div>

/* primary */
<div class="note  icon custom iconfont icon-QQ2" style="background: #f5f0fa;border-left-color: #6f42c1;"><p>primary</p></div>

/* info */
<div class="note  icon custom iconfont icon-QQ2" style="background: #eef7fa;border-left-color: #428bca;"><p>info</p></div>

/* warning */
<div class="note  icon custom iconfont icon-QQ2" style="background: #fdf8ea;border-left-color: #f0ad4e;"><p>warning</p></div>

/* danger */
<div class="note  icon custom iconfont icon-QQ2" style="background: #fcf1f2;border-left-color: #d9534f;"><p>danger</p></div>

主题自带隐藏按钮

主题自带的隐藏按钮点击后消失，则不可以再次隐藏。修改方法很简单，一段css代码即可。

.hide-block>a.hide-button.open, .hide-inline>a.hide-button.open {
    display: inline-block;
}

轮播图

轮播图的修改来源于网络（jq）的一个插件。此项修改引入js文件即可。

(function () {
  function Slider(option) {
    this.wrap = option.wrap;
    this.imgList = option.imgList;
    this.imgNum = this.imgList.length;
    this.width = option.width || $(this.wrap).width();
    this.height = option.height || $(this.wrap).height();
    this.isAuto = option.isAuto || true;
    this.moveTime = option.moveTime;
    this.direction = option.direction || "right";
    this.btnWidth = option.btnWidth;
    this.btnHeight = option.btnHeight;
    this.spanWidth = option.spanWidth;
    this.spanHeight = option.spanHeight;
    this.spanColor = option.spanColor;
    this.activeSpanColor = option.activeSpanColor;
    this.btnBackgroundColor = option.btnBackgroundColor;
    this.spanRadius = option.spanRadius;
    this.spanMargin = option.spanMargin;
    this.flag = false;
    this.nowIndex = 0;
    this.createDom();
    this.initStyle();
    this.bindEvent();
    if (this.isAuto === true) {
      this.autoMove();
    }
  }

  Slider.prototype.createDom = function () {
    var oUl = $('<ul class="imgList"></ul>');
    var Spot = $('<div class="spot"></div>');
    this.imgList.forEach(function (item) {
      var oLi =
        '<li><a  href=" ' +
        item.a +
        'target="_blank" "><img src=" ' +
        item.img +
        ' "></a></li>';
      oUl.append(oLi);
      var span = "<span></span>";
      Spot.append(span);
    });
    var leftBtn = $(
      '<div class="left-btn"><i class="fas fa-angle-left"></i></div>'
    );
    var rightBtn = $(
      '<div class="right-btn"><i class="fas fa-angle-right"></i></div>'
    );
    this.wrap.append(oUl).append(leftBtn).append(rightBtn).append(Spot);
  };
  Slider.prototype.initStyle = function () {
    $("*", this.wrap).css({ margin: 0, padding: 0, listStyle: "none" });
    $(this.wrap).css({ overflow: "hidden", position: "relative" });
    $(".imgList", this.wrap).css({
      width: this.width,
      height: this.height,
      position: "relative",
    });
    $(".imgList li", this.wrap)
      .css({
        width: this.width,
        height: this.height,
        position: "absolute",
        left: 0,
        top: 0,
        display: "none",
      })
      .eq(this.nowIndex)
      .css({ display: "block" });
    $(".imgList li a, .imgList li a img", this.wrap).css({
      display: "inline-block",
      width: this.width,
      height: this.height,
    });
    $(".left-btn, .right-btn", this.wrap).css({
      width: this.btnWidth,
      height: this.btnHeight,
      backgroundColor: this.btnBackgroundColor,
      color: "#fff",
      textAlign: "center",
      lineHeight: this.btnHeight + "px",
      position: "absolute",
      top: "50%",
      marginTop: -this.btnHeight / 2,
      cursor: "pointer",
    });
    $(".right-btn", this.wrap).css({ right: 0 });
    $(".spot", this.wrap).css({
      height: this.spanHeight + this.spanMargin * 2,
      position: "absolute",
      left: "50%",
      marginLeft: (-this.imgNum * (this.spanWidth + this.spanMargin * 2)) / 2,
      bottom: 10,
    });
    $(".spot span", this.wrap)
      .css({
        display: "inline-block",
        width: this.spanWidth,
        height: this.spanHeight,
        margin: this.spanMargin,
        backgroundColor: this.spanColor,
        borderRadius: this.spanRadius,
        cursor: "pointer",
      })
      .eq(this.nowIndex)
      .css({ backgroundColor: this.activeSpanColor });
  };
  Slider.prototype.bindEvent = function () {
    var self = this;
    $(".left-btn", this.wrap).click(function () {
      self.move("prev");
    });
    $(".right-btn", this.wrap).click(function () {
      self.move("next");
    });
    $(".spot span").click(function (e) {
      self.move($(this).index());
    });
    $(this.wrap).mouseenter(function () {
      clearInterval(self.time);
    });
  };
  Slider.prototype.move = function (dir) {
    if (this.flag) {
      return false;
    }
    this.flag = true;
    switch (dir) {
      case "prev":
        if (this.nowIndex === 0) {
          this.nowIndex = this.imgNum - 1;
        } else {
          this.nowIndex--;
        }
        break;
      case "next":
        if (this.nowIndex === this.imgNum - 1) {
          this.nowIndex = 0;
        } else {
          this.nowIndex++;
        }
        break;
      default:
        this.nowIndex = dir;
        break;
    }
    var self = this;
    $(".imgList li", this.wrap)
      .fadeOut()
      .eq(this.nowIndex)
      .fadeIn(function () {
        self.flag = false;
      });
    $(".spot  span", this.wrap)
      .css({ backgroundColor: this.spanColor })
      .eq(this.nowIndex % this.imgNum)
      .css({ backgroundColor: this.activeSpanColor });
  };
  Slider.prototype.autoMove = function () {
    var self = this;
    this.time = setInterval(function () {
      if (this.direction == "left") {
        $(".left-btn", this.wrap).trigger("click");
      } else {
        $(".right-btn", this.wrap).trigger("click");
      }
    }, self.moveTime);
  };
  $.fn.extend({
    slider: function (option) {
      option.wrap = this;
      new Slider(option);
    },
  });
})();

使用也很简单，只要在md文章中写入以下内容即可

<div class="demo"></div>
<script>
    function tt(){
        $('.demo').slider({
    imgList: [
        {
            img: 'https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/2a877ea5da1292c817cbc2a254c01c31.png',
            a: '跳转url地址',
        },
        {
            img: 'https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/5005109d1aa2ffd28984c2b02b8cbfbe.png',
            a: '跳转url地址',
        },
        {
            img: 'https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/163a2ade4361d1ed705ed523091af67e.png',
            a: '跳转url地址',
        }
    ], //图片的列表，a属性里面存放的是网络地址，img存放的是图片地址
    width: "100%", //图片的宽
    height: 500, //图片的高
    isAuto: false, //是否自动轮播
    moveTime: 3000, //运动时间
    direction: 'right', //轮播的方向
    btnWidth: 30, //按钮的宽
    btnHeight: 30, //按钮的高
    spanWidth: 10, //span按钮的宽
    spanHeight: 10, //span按钮的高
    spanColor: '#fff', //span按钮的颜色
    activeSpanColor: 'red', //选中的span颜色
    btnBackgroundColor: 'rgba(0, 0, 0, 0.3)', //两侧按钮的颜色
    spanRadius: '50%', //span按钮的圆角程度
    spanMargin: 3, //span之间的距离
})
    }
    window.addEventListener('DOMContentLoaded',tt)
</script>

代码解读：<div class="demo"></div>用于下边JS代码定位元素用。如果改变class名，下边的JS选择器也需要做出对应的改变。

下边的Javascript代码用于生成轮播图。各项配置看注释即可。

特殊按钮

只需要引入一个css即可解决。由于css过长，因此只给出一个在线链接，你可以将其下载放到自己的空间里，也可以直接引用。

地址：https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/buttons.min.css

样式及使用请参考https://www.antmoe.com/posts/58a62380/index.html

使用阿里Iconfont图标

参考Hexo博客之优雅使用阿里iconfont图标

评论类修改

此项修改主要是针对valine评论以及双评论。

valine评论小标签

这里valine的修改主要是一些小标签（访客，博主等。）

可以参照：HCLonely Blog的修改教程

双评论支持

双评论支持也是源于HCLonely Blog的修改教程,但是他的教程需要改动三个pug模板，因此这种做法对于升级主题来说成本还是有点高的。因此我的解决方案最大限度的减少了更改pug模板的成本。但还是需要改动pug模板的。

修改pug模板

位置：\themes\Butterfly\layout\includes\comments\index.pug

修改内容：将所有的 else if 改为 if。

添加JS代码

将以下代码复制到你自己创建的JS文件中。

function switchComment() {
  const t =
      "切换为Gitalk" === $("#switch-comment").attr("title")
        ? "切换为Valine"
        : "切换为Gitalk",
    o = $("#switch-comment>i");
  "none" === $("#gitalk-container").css("display")
    ? $("#vcomment").slideUp("normal", () => {
        $("#gitalk-container").slideDown("normal", () => {
          $("#switch-comment").attr("title", t),
            o.hasClass("fa-toggle-off")
              ? o.removeClass("fa-toggle-off").addClass("fa-toggle-on")
              : o.removeClass("fa-toggle-on").addClass("fa-toggle-off");
        });
      })
    : $("#gitalk-container").slideUp("normal", () => {
        $("#vcomment").slideDown("normal", () => {
          $("#switch-comment").attr("title", t),
            o.hasClass("fa-toggle-off")
              ? o.removeClass("fa-toggle-off").addClass("fa-toggle-on")
              : o.removeClass("fa-toggle-on").addClass("fa-toggle-off");
        });
      });
}
var commentElement = document.getElementsByClassName("comment_headling")[0];
if (commentElement != undefined) {
  commentElement.innerHTML +=
    '<a id="switch-comment" href="javascript:void(0);" title="切换为Gitalk" target="_self"><i class="fa fas fa-toggle-off" aria-hidden="true"></i></a>';
  document.getElementById("gitalk-container").style.display = "none";
}
$("#switch-comment").click(function () {
  return switchComment(), !1;
});

这个js脚本也提供现成的链接，https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/js/switch.min.js

至此即可完成双评论的修改，只修改else if 为if是不是比修改三处pug模板简单多了。

吃瓜-小康博客

Valine评论添加表情

参考Valine如何添加多个表情

Valien评论QQ、微信提醒

两份方案任选其一即可。

Hexo博客valine评论微信、qq提醒与评论微信通知及qq通知

在线css提供

以下链接不完整，更多链接请到我的仓库自行寻觅！

背景、滚动条、鼠标三合一

背景颜色及鼠标不单独提供，如需单独启动，请自行创建css并引用

https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/custom.min.css
单独页脚渐变

https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/footer.min.css
友链页面css

https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/flink.min.css
多种按钮

https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/buttons.min.css

遇到问题

如果遇到什么问题例如：修改完成后样式不对、缺少文件（~~写文章时可能忘记加上~~）等问题可以在下方留言或者将问题发送到我的邮箱。我会在第一时间内帮助解决问题。

温馨提示

如果不知道怎么引入css/js请仔细看文章开头部分。

如果还是看不懂，那么我建议你不要魔改。

posted @ 2020-05-07 22:58 antmoe 阅读(8557) 评论(1) 编辑收藏举报

刷新页面返回顶部

小康博客

每天进步一点点

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

前置说明

JS/CSS如何使用

JS/CSS如何引用

引用方式说明

以相对路径引入

以外链的方式引入

视觉体验

背景

鼠标样式

页脚渐变

滚动条

手机侧边栏默认不展开

分类卡片隐藏

页面类修改

友情链接页面修改

字段说明

背景设置页

功能扩展

标签外挂

自定义note（图标、颜色）

主题自带隐藏按钮

轮播图

特殊按钮

使用阿里Iconfont图标

评论类修改

valine评论小标签

双评论支持

Valine评论添加表情

Valien评论QQ、微信提醒

在线css提供

遇到问题

公告