我的butterfly主题修改记录

警告警告，小白勿入！！！
请确认，您在阅读本篇之前已经详细阅读了butterfly的官方文档：https://demo.jerryc.me/
谢谢理解！！！

修改特色

本着不改动主题源码的原则，基本采用外挂js和css

分类折叠可以直达到文章

个性说说，记录快乐每一天

丰富的外挂插件，炫酷到爆炸

重要说明：这是修改记录贴，不是手把手教程贴。友情提醒：魔改不是目的，写作才是王道，共勉。

如何修改

一些小伙伴看不懂我是怎么修改的，什么叫外挂js，什么叫修改源码等等。我在CSDN写了一文基础教程，有需要可以参考一下

手把手教你修改butterfly主题的样式

版本说明

🦋 Butterfly 已经更新到 3.0.0 RC1，会飞的小弋博客也升级至3.0.0 RC1版本

背景页面优化

1. 主页半透明
2. 修改滚动条
3. 去除banner背景，取消页脚背景
4. 手机侧边栏默认不展开
5. 增加阅读模式自定义，护眼
6. 隐藏按钮不消失，且修复点击小手的问题
7. 主页点击头像特效
8. 增加浏览器搞笑标题
9. 优化友链特效 ，需修改\themes\Butterfly\layout\中的flink.pug
10. 增加上标外挂的配置
11. 添加右下角gif可爱卡通人物

css外挂

无需全部复制粘贴使用，按照注释，取需要的代码就行

查看代码

/* 主页半透明度 */
.layout_page {
  opacity: 0.9;
}

/* 取消页脚背景 */
#footer {
  background: none;
}

/* 取消banner背景 */
#page-header {
  /* 采用透明的方式取消，最后一个0表示透明 */
  background-color: rgba(255, 255, 255, 0);
}

/* 滚动条优化 */
::-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: #ec29f3;
}

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

/* 隐藏按钮不消失 */
.hide-block>a.hide-button.open, .hide-inline>a.hide-button.open {
  display: inline-block;
}
/* 用于修复隐藏按钮的hover问题 */
#article-container a:hover {
  text-decoration: none;
  cursor: pointer;
}

/*友链相关*/
/* 边框呼吸灯效果 */
@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 red;
  }
}
@keyframes borderFlash {
  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 .flink-list > .flink-list-item a:hover {
  color: #fff;
}
.flink .flink-list > .flink-list-item a {
  color: var(--primary-color, #49b1f5);
  text-decoration: none;
}
.flink .flink-list > .flink-list-item:hover {
  box-shadow: 0 2px 20px var(--primary-color, #49b1f5);
  animation-play-state: paused;
}
.flink#article-container .flink-list > .flink-list-item:before {
  background: var(--primary-color, #49b1f5);
}
.flink .flink-list > .flink-list-item {
  border: 0 solid var(--primary-color, #49b1f5);
}
.flink#article-container .flink-list > .flink-list-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 .flink-list > .flink-list-item a .lauto {
  animation: auto_rotate_left var(--autotime) linear infinite;
}
.flink#article-container .flink-list > .flink-list-item a .rauto {
  animation: auto_rotate_right var(--autotime) linear infinite;
}
.flink#article-container .flink-list > .flink-list-item .customcolor {
  color: var(--namecolor, #1f2d3d);
}
.flink#article-container .flink-list > .flink-list-item .customcolor:hover {
  color: #fff;
}

/* 跳动的心 */
#heartbeat {
  color: red;
  animation: iconAnimate 1.33s ease-in-out infinite;
}
@-moz-keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}
@-webkit-keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}
@-o-keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}
@keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}

/* 头像点击特效 */
.card-info-avatar:hover {
  background: url(https://gitee.com/lovelijunyi/images/raw/master/20200530181856.gif);
}

/* 标签自定义颜色 */
/* 分类 */
.card-folder-animation {
  color: rgba(107, 72, 255, 1);
}
/* 最近文章 */
.card-history-animation {
  color: rgb(34, 218, 241);
}
/* 天气 */
.card-umbrella-animation {
  color: rgba(255, 80, 47, 1);
}
/* 标签 */
.card-tags-animation {
  color: rgba(13, 63, 103, 1);
}

/*上标外挂标签相关css*/
.tip {
  position: relative;
  color: #fff;
  background: #20a0ff;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#20a0ff),
    to(#20b8ff)
  );
  background: -webkit-linear-gradient(left, #5b1bd0, #20b8ff);
  background: linear-gradient(90deg, #0092ff, #6a3fb9);
  padding: 6px 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 5px rgba(32, 160, 255, 0.5);
  box-shadow: 0 3px 5px rgba(32, 160, 255, 0.5);
  margin-bottom: 20px;
}
.tip p {
  margin: 5px 0 !important;
}
.tip:before {
  background: #20a0ff;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#0092ff),
    to(#20b8ff)
  );
  background: -webkit-linear-gradient(bottom, #0092ff, #20b8ff);
  background: linear-gradient(0deg, #0092ff, #20b8ff);
  border-radius: 50%;
  color: #fff;
  content: "\f129";
  font-size: 12px;
  position: absolute;
  width: 24px;
  height: 24px;
  line-height: 24.5px;
  left: -12px;
  top: -12px;
  -webkit-box-shadow: 0 0 0 2.5px #fff;
  box-shadow: 0 0 0 2.5px #fff;
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  text-align: center;
}
.btn,
.getit a {
  position: relative;
}
.well .tip:before {
  -webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
  box-shadow: 0 0 0 2.5px #f7f8f9;
}
.tip ol {
  margin: 0;
}
.tip.success {
  background: #61be33;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#61be33),
    to(#8fce44)
  );
  background: -webkit-linear-gradient(left, #61be33, #8fce44);
  background: linear-gradient(90deg, #61be33, #8fce44);
  text-shadow: 0 -1px #61be33;
  -webkit-box-shadow: 0 3px 5px rgba(104, 195, 59, 0.5);
  box-shadow: 0 3px 5px rgba(104, 195, 59, 0.5);
}
.tip.success:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#52bb1d),
    to(#95d34b)
  );
  background: -webkit-linear-gradient(bottom, #52bb1d, #95d34b);
  background: linear-gradient(0deg, #52bb1d, #95d34b);
  content: "\f00c";
  text-shadow: 0 -1px #61be33;
}
.tip.warning {
  background: #ff953f;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ff953f),
    to(#ffb449)
  );
  background: -webkit-linear-gradient(left, #ff953f, #ffb449);
  background: linear-gradient(90deg, #ff953f, #ffb449);
  text-shadow: 0 -1px #ff953f;
  -webkit-box-shadow: 0 3px 5px rgba(255, 154, 73, 0.5);
  box-shadow: 0 3px 5px rgba(255, 154, 73, 0.5);
}
.tip.warning:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#ff8f35),
    to(#ffc149)
  );
  background: -webkit-linear-gradient(bottom, #ff8f35, #ffc149);
  background: linear-gradient(0deg, #ff8f35, #ffc149);
  content: "\f12a";
  text-shadow: 0 -1px #ff953f;
}
.tip.error {
  background: #ff4949;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ff4949),
    to(#ff7849)
  );
  background: -webkit-linear-gradient(left, #ff4949, #ff7849);
  background: linear-gradient(90deg, #ff4949, #ff7849);
  text-shadow: 0 -1px #ff4949;
  -webkit-box-shadow: 0 3px 5px rgba(255, 73, 73, 0.5);
  box-shadow: 0 3px 5px rgba(255, 73, 73, 0.5);
}
.tip.error:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#ff3838),
    to(#ff7849)
  );
  background: -webkit-linear-gradient(bottom, #ff3838, #ff7849);
  background: linear-gradient(0deg, #ff3838, #ff7849);
  content: "\f00d";
  text-shadow: 0 -1px #ff4949;
}
.tip.wtgo {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#3d8b48),
    to(#477837)
  );
  background: -webkit-linear-gradient(bottom, #3c3, #459431);
  background: linear-gradient(530deg, #78ca33, #25822c);
  content: "\f00d";
  text-shadow: 0 -1px #4cf706;
}
.tip.wtgo:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#3c0),
    to(#3c0)
  );
  background: -webkit-linear-gradient(bottom, #3c3, #459431);
  background: linear-gradient(776deg, #78ca33, #25822c);
  content: "\f0e7";
  text-shadow: 0 -1px #4cf706;
}
.tip.ban {
  background: #ff4949;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ff4949),
    to(#ff3443)
  );
  background: -webkit-linear-gradient(left, #ff4949, #ff1022);
  background: linear-gradient(90deg, #ff4949, #f03b49);
  text-shadow: 0 -1px #ff4949;
  -webkit-box-shadow: 0 3px 5px rgba(255, 73, 73, 0.5);
  box-shadow: 0 3px 5px rgba(255, 73, 73, 0.5);
}
.tip.ban:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#ff3838),
    to(#ce4617)
  );
  background: -webkit-linear-gradient(bottom, #ff3838, #d23e49);
  background: linear-gradient(0deg, #ff3838, #ff1022);
  content: "\f05e";
  text-shadow: 0 -1px #ff4949;
}
.tip.home {
  background: #15e5ff;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#5bc6d4) to(#0ec0ef)
  );
  backgroune: -webkit-linear-gradient(left, #0ec0ef, #80e0f9);
  background: linear-gradient(90deg, #0ec0ef, #80e0f7);
  text-shadow: 0 -1px #0ec0ef;
  -webkit-box-shadow: 0 3px 5px #01caff;
  box-shadow: 0 3px 5px #01caff;
}
.tip.home:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    form(#0ec0ee) to(#0ee0cc)
  );
  background: -webkit-linear-gradient(bottom, #0ec0ee, #0ec2ee);
  background: linear-gradient(0deg, #0ec0ee, #0ec0ea);
  content: "\f015";
  text-shadow: 0 -1px #0ec0ea;
}
.tip.important {
  background: #f3a700;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ffbd2b),
    to(#ffbd2b)
  );
  background: -webkit-linear-gradient(left, #ffbd2b, #ffd26f);
  background: linear-gradient(290deg, #ef6e6e, #ffb000);
  text-shadow: 0 -1px #a97a12;
  -webkit-box-shadow: 0 3px 5px #ffb000;
  box-shadow: 0 3px 5px #ffb000;
}
.tip.important:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#ff3838),
    to(#ffbd2b)
  );
  background: -webkit-linear-gradient(bottom, #ff3838, #ffbd2b);
  background: linear-gradient(270deg, #ffbd2b, #f5626d);
  content: "\f129";
  text-shadow: 0 -1px #ffbd2b;
}
.tip.ref {
  background: #00a9ff;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#51a7bd33),
    to(#c7eef9)
  );
  background: -webkit-linear-gradient(left, #53cff1, #2e9fbd);
  background: linear-gradient(230deg, #47c0e0, #2dc342);
  text-shadow: 0 -1px #1bcdfc;
  -webkit-box-shadow: 0 3px 5px #1bcdfc;
  box-shadow: 0 3px 5px #20b1ad;
}
.tip.ref:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#00c3f7),
    to(#88d3e6)
  );
  background: -webkit-linear-gradient(bottom, #83e5ff, #0aa8d2);
  background: linear-gradient(270deg, #40c0e2, #3dc550);
  content: "\f021";
  text-shadow: 0 -1px #17cfff;
}
.tip.ffa {
  background: #1502ff;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#51a7bd33),
    to(#8379ff)
  );
  background: -webkit-linear-gradient(left, #5246e2, #5246e2);
  background: linear-gradient(230deg, #40c0e2, #5247e2);
  text-shadow: 0 -1px #8278fd;
  -webkit-box-shadow: 0 3px 5px #4037a7;
  box-shadow: 1 3px 5px #5e52ec;
}
.tip.ffa:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#3020f3),
    to(#b1abf5)
  );
  background: -webkit-linear-gradient(bottom, #5246e2, #5246e2);
  background: linear-gradient(560deg, #40c0e2, #5246e2);
  content: "\f085";
  text-shadow: 0 -1px #098cf5;
}
.tip.key {
  background: #25c33b;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#51a7bd33),
    to(#8379ff)
  );
  background: -webkit-linear-gradient(left, #648798, #90a4ae);
  background: linear-gradient(230deg, #90a4ae, #b7a7a7);
  text-shadow: 0 -1px #c1c0d4;
  -webkit-box-shadow: 0 3px 5px #d3d2de;
  box-shadow: 1 3px 5px #d5d4de;
}
.tip.key:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#dddce8),
    to(#b1abf5)
  );
  background: -webkit-linear-gradient(bottom, #5246e2, #5246e2);
  background: linear-gradient(560deg, #bccdd2, #cfced4);
  content: "\f084";
  text-shadow: 0 -1px #a9b2b9;
}
.tip.socd {
  background: #25c33b;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#51a7bd33),
    to(#8379ff)
  );
  background: -webkit-linear-gradient(left, #648798, #90a4ae);
  background: linear-gradient(230deg, #ffaa0d, #deb455);
  text-shadow: 0 -1px #c1c0d4;
  -webkit-box-shadow: 0 3px 5px #d3d2de;
  box-shadow: 1 3px 5px #d5d4de;
}
.tip.socd:before {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#dddce8),
    to(#b1abf5)
  );
  background: -webkit-linear-gradient(bottom, #5246e2, #5246e2);
  background: linear-gradient(560deg, #f9ae07, #ffb615);
  content: "\f0f3";
  text-shadow: 0 -1px #ffb81b;
}

/*用于上标标签兼容黑暗模式，勿要删除*/

[data-theme="dark"] .tip {
  filter: brightness(0.7);
}
[data-theme="dark"] .tip {
  color: #4c4948;
}

js外挂

查看代码

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

// 手机侧边栏默认不展开
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";

}


// 浏览器搞笑标题
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/funny.ico");
        document.title = 'ヽ(●-`Д´-)ノ你要走嘛我好伤心！';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(Ő∀Ő3)ノ哇喔！欢迎！' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

// 添加八毛卡通人物
/*右下角添加卡通人物*/
var bamao = '<i class="fas fa-arrow-up" style ="padding:8px" ></i><img style="max-width: 234%;transform: translate(-65px,-65px);" src="https://cdn.jsdelivr.net/gh/fudalijunyi/picture-bed/img/20200629182853.gif" title="回到顶部" data-ll-status="loaded" class="loaded">';
/*添加到返回顶部按钮下*/
document.getElementById("go-up").innerHTML = bamao

使用阿里图标

缘起使用Font Awesome出现蜜汁问题，引用不上，再加之很多图标也没有，所以使用阿里图标来进行扩充，详细教程参考Hexo博客之优雅使用阿里iconfont图标

源码分析

这里要说明的是在css代码生成后，如下

@font-face {font-family: "iconfont";
这里有一大串省略
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bilibili-fill:before {
  content: "\e75c";
}

• font-face在每次给项目添加图标后都要重新更换
• iconfont每次都一样
• icon-bilibili-fill类似这样的就是图标类了

源码修改

修改目的

使得图标可以旋转

自定义图标大小和颜色，使得排版更舒服

修改iconfont的代码为

.iconfont {
  font-family: iconfont !important;
  font-size: 16px;
  font-style: normal;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

增加css，可以置于最后

.custom:not(.no-icon)::before {
  font-family: iconfont;
  color: var(--icon-color, #333);
}
.note.custom {
  background-color: #f7f7f7;
  border-left-color: #777;
  display: block;
}

给图标增加参数，例如，哔哩哔哩，这里给出了大小和颜色

/*bilibili*/
.icon-bilibili-fill:before {
  content: "\e75c";
  color: #d4237a;
  font-size: 25px;
}

标签引用

阿里图标也可引用到其他标签，例如，把微信支付引用到按钮上

微信支付

快来扫一扫吧

查看代码

{% btns circle center grid5 %}
<a href='https://gitee.com/lovelijunyi/images/raw/master/20200525181612.jpg'>
  <i class='iconfont icon-weixin'></i>
  <b>微信支付</b>
  {% p red, 快来扫一扫吧 %}
  <img src='https://gitee.com/lovelijunyi/images/raw/master/20200525181612.jpg'>
{% endbtns %}

外挂插件增强

3.0版本的蝴蝶默认是fontawesome_v5，接着将volantis主题的插件进行移植，先点击下载源码

下载源码 查看样式

然后将hexo-theme-volantis-master\scripts\tags中的所有js放到Butterfly\scripts\tags，出现覆盖的覆盖掉

css外挂

查看代码

* {
  box-sizing: border-box;
  outline: none;
  margin: 0;
  padding: 0;
}
details {
  display: block;
  padding: 20px;
  margin: 0.5rem 0;
  border-radius: 4px;
  background: #fff;
  font-size: 0.9375rem;
  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;
}
summary {
  display: block;
}
details summary {
  cursor: pointer;
  padding: 16px;
  margin: -20px;
  border-radius: 4px;
  color: rgba(85, 85, 85, 0.7);
  font-size: 0.875rem;
  font-weight: bold;
  position: relative;
  line-height: normal;
}
details summary > p,
details summary > h1,
details summary > h2,
details summary > h3,
details summary > h4,
details summary > h5,
details summary > h6 {
  display: inline;
  border-bottom: none !important;
}
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;
}





/*note标签*/


div.note {
  position: relative;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem 16px 0.5rem 16px;
  padding-left: calc(16px + 16px);
  border-radius: 4px;
  background: #f6f6f6;
  border-left: 4px solid #767676;
}
div.note h2,
div.note h3,
div.note h4,
div.note h5,
div.note h6 {
  margin-top: 3px;
  margin-bottom: 0;
  padding-top: 0 !important;
  border-bottom: initial;
}
div.note p,
div.note ul,
div.note ol,
div.note blockquote,
div.note img {
  font-size: 14px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
div.note::before {
  position: absolute;
  top: calc(50% - 24px * 0.5);
  left: 4px;
  width: 24px;
  height: 24px;
  text-align: center;
  font-weight: 600;
  line-height: 24px;
  vertical-align: middle;
  font-family: 'Font Awesome 5 Free';
}
div.note::before {
  color: #767676;
  content: '\f054';
}
div.note::before {
  content: '\f054';
}
div.note.quote {
  background: #e8f4fd;
  border-color: #2196f3;
}
div.note.quote::before {
  color: #2196f3;
  content: '\f10d';
}
div.note.info {
  background: #e8f4fd;
  border-color: #2196f3;
}
div.note.info::before {
  color: #2196f3;
  content: '\f129';
}
div.note.success,
div.note.done {
  background: #ebf9ed;
  border-color: #3dc550;
}
div.note.success::before,
div.note.done::before {
  color: #3dc550;
  content: '\f00c';
}
div.note.warning {
  background: #fff8e9;
  border-color: #ffbd2b;
}
div.note.warning::before {
  color: #ffbd2b;
  content: '\f12a';
}
div.note.danger,
div.note.error {
  background: #feefee;
  border-color: #fe5f58;
}
div.note.danger::before,
div.note.error::before {
  color: #fe5f58;
  content: '\f00d';
}
div.note.radiation::before {
  content: '\f7b9';
}
div.note.bug::before {
  content: '\f188';
}
div.note.idea::before {
  content: '\f0eb';
}
div.note.link::before {
  content: '\f0c1';
}
div.note.paperclip::before {
  content: '\f0c6';
}
div.note.todo::before {
  content: '\f0ae';
}
div.note.message::before {
  content: '\f4ad';
}
div.note.guide::before {
  content: '\f277';
}
div.note.download::before {
  content: '\f019';
}
div.note.up::before {
  content: '\f102';
}
div.note.undo::before {
  content: '\f2ea';
}
div.note.play::before {
  content: '\f144';
}
div.note.clear {
  background: none;
  border-color: none;
}
div.note.light {
  background: #f6f6f6;
  border-color: #aaa;
}
div.note.light::before {
  color: #aaa;
}
div.note.gray {
  background: #f6f6f6;
  border-color: #767676;
}
div.note.gray::before {
  color: #767676;
}
div.note.red {
  background: #feefee;
  border-color: #fe5f58;
}
div.note.red::before {
  color: #fe5f58;
}
div.note.yellow {
  background: #fff8e9;
  border-color: #ffbd2b;
}
div.note.yellow::before {
  color: #ffbd2b;
}
div.note.green {
  background: #ebf9ed;
  border-color: #3dc550;
}
div.note.green::before {
  color: #3dc550;
}
div.note.cyan {
  background: #e8fafe;
  border-color: #1bcdfc;
}
div.note.cyan::before {
  color: #1bcdfc;
}
div.note.blue {
  background: #e8f4fd;
  border-color: #2196f3;
}
div.note.blue::before {
  color: #2196f3;
}


/*note标签结束*/

/*文字标签*/
p.p.subtitle {
  font-weight: bold;
  color: #2196f3;
  padding-top: 1rem;
}
p.p.subtitle:first-child {
  padding-top: 0.5rem;
}
span.p.logo,
p.p.logo {
  font-family: "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, Helvetica, monospace;
}
span.p.code,
p.p.code {
  font-family: Menlo, UbuntuMono, Monaco, monospace, courier, sans-serif;
}
span.p.left,
p.p.left {
  display: block;
  text-align: left;
}
span.p.center,
p.p.center {
  display: block;
  text-align: center;
}
span.p.right,
p.p.right {
  display: block;
  text-align: right;
}
span.p.small,
p.p.small {
  font-size: 0.875rem;
}
span.p.large,
p.p.large {
  font-size: 3rem;
  line-height: 1.4;
}
span.p.huge,
p.p.huge {
  font-size: 4rem;
  line-height: 1.4;
}
span.p.ultra,
p.p.ultra {
  font-size: 6rem;
  line-height: 1.4;
}
span.p.small,
p.p.small,
span.p.large,
p.p.large,
span.p.huge,
p.p.huge,
span.p.ultra,
p.p.ultra {
  margin: 0;
  padding: 0;
}
span.p.bold,
p.p.bold {
  font-weight: bold;
}
span.p.h1,
p.p.h1 {
  font-size: 1.625rem;
  color: #555;
  padding-top: 1rem;
}
span.p.h2,
p.p.h2 {
  font-size: 1.375rem;
  color: #555;
  padding-top: 1rem;
  border-bottom: 1px solid rgba(85,85,85,0.1);
}
span.p.h3,
p.p.h3 {
  font-size: 1.25rem;
  color: #2196f3;
  padding-top: 1rem;
}
span.p.h4,
p.p.h4 {
  font-size: 1.125rem;
  color: #555;
  padding-top: 1rem;
}
span.p.red,
p.p.red {
  color: #fe5f58;
}
span.p.yellow,
p.p.yellow {
  color: #ffbd2b;
}
span.p.green,
p.p.green {
  color: #3dc550;
}
span.p.cyan,
p.p.cyan {
  color: #1bcdfc;
}
span.p.blue,
p.p.blue {
  color: #2196f3;
}
span.p.gray,
p.p.gray {
  color: #666;
}
/*文字标签结束*/




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*/
.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;
}

div.dropmenu {
  display: inline-block;
  position: relative;
  line-height: 2.4;
  cursor: default;
  transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  color: rgba(85,85,85,0.85);
  background: #f6f6f6;
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  padding: 0 16px;
  padding-top: 1px;
  font-size: 0.875rem;
  font-weight: bold;
}
div.dropmenu:hover {
  background: #e8f4fd;
  border-color: #cce7fb;
}
div.dropmenu:hover >ul {
  display: block;
  margin-left: -8px;
  margin-top: -4px;
}
div.dropmenu ul>li {
  list-style: none;
}
div.dropmenu ul>li >a:hover {
  text-decoration: none !important;
}
div.dropmenu .list-v .list-v {
  left: calc(100% - 0.5 * 16px);
}



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

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


div.tabs .tab-content .tab-pane > p:first-child,
div.tabs .tab-content .tab-pane > .tabs:first-child,
div.tabs .tab-content .tab-pane > ul:first-child,
div.tabs .tab-content .tab-pane > ol: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 > .fancybox:first-child {
  margin-top: 0;
}
div.tabs .tab-content .tab-pane > p:last-child,
div.tabs .tab-content .tab-pane > .tabs:last-child,
div.tabs .tab-content .tab-pane > ul:last-child,
div.tabs .tab-content .tab-pane > ol: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 > .fancybox:last-child {
  margin-bottom: 0;
}

/*fancybox图片相关*/


div.gallery {
  margin: 0.5rem 0;
  overflow: hidden;
}
div.gallery >.fancybox,
div.gallery >p>.fancybox {
  margin: 1px;
  padding: 0;
  position: relative;
}
div.gallery >.fancybox .image-caption,
div.gallery >p>.fancybox .image-caption {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  pointer-events: none;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  background: rgba(0,0,0,0.3);
  color: #fff;
}
div.gallery >.fancybox .image-caption:empty,
div.gallery >p>.fancybox .image-caption:empty {
  display: none;
}
div.gallery >.fancybox:hover .image-caption,
div.gallery >p>.fancybox:hover .image-caption {
  opacity: 1;
  transform: translateY(0);
}
div.gallery,
div.gallery >p {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  padding: 0 !important;
  -ms-flex-align: stretch;
      align-items: stretch;
}
div.gallery[col]>p {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: start;
      justify-content: flex-start;
}
div.gallery[col='2']>p>.fancybox {
  width: calc(50% - 2 * 1px);
}
div.gallery[col='3']>p>.fancybox {
  width: calc(33.33% - 2 * 1px);
}
div.gallery[col='4']>p>.fancybox {
  width: calc(25% - 2 * 1px);
}
div.gallery[col='5']>p>.fancybox {
  width: calc(20% - 2 * 1px);
}
div.gallery[col='6']>p>.fancybox {
  width: calc(16.66% - 2 * 1px);
}
div.gallery[col='7']>p>.fancybox {
  width: calc(14.2857% - 2 * 1px);
}
div.gallery[col='8']>p>.fancybox {
  width: calc(12.5% - 2 * 1px);
}
div.gallery >p {
  margin: 0;
}
div.gallery.left,
div.gallery.left>p {
  -ms-flex-pack: start;
      justify-content: flex-start;
}
div.gallery.center,
div.gallery.center>p {
  -ms-flex-pack: center;
      justify-content: center;
}
div.gallery.right,
div.gallery.right>p {
  -ms-flex-pack: end;
      justify-content: flex-end;
}
div.gallery.stretch,
div.gallery.stretch>p {
  -ms-flex-align: stretch;
      align-items: stretch;
}
div.gallery.stretch img,
div.gallery.stretch>p img {
  transform: scale(1.5);
}
.fancybox-container .fancybox-stage {
  cursor: zoom-out;
}
.fancybox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 2px;
}
@media screen and (max-width: 500px) {
  .fancybox {
    border-radius: 1px;
  }
}
.fancybox a {
  line-height: 0;
  margin: 0;
  -ms-flex-align: stretch;
      align-items: stretch;
  cursor: zoom-in;
}
.fancybox .gallery {
  overflow: hidden;
}
.fancybox .image-caption {
  font-size: 0.8125rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgba(85,85,85,0.65);
}


/*播放器相关*/
audio,
video {
  border-radius: 4px;
  max-width: 100%;
}
video {
  z-index: 1;
  transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
}
video:hover {
  box-shadow: 0 4px 8px 0px rgba(0,0,0,0.24), 0 8px 16px 0px rgba(0,0,0,0.24);
}
div.video {
  line-height: 0;
  text-align: center;
}
div.videos {
  max-width: calc(100% + 2 * 4px);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: end;
      align-items: flex-end;
  margin: 0.5rem -4px;
}
div.videos .video,
div.videos iframe {
  width: 100%;
  margin: 4px;
}
div.videos iframe {
  border-radius: 4px;
  width: 100%;
  min-height: 300px;
}
div.videos.left {
  -ms-flex-pack: start;
      justify-content: flex-start;
}
div.videos.center {
  -ms-flex-pack: center;
      justify-content: center;
}
div.videos.right {
  -ms-flex-pack: end;
      justify-content: flex-end;
}
div.videos.stretch {
  -ms-flex-align: stretch;
      align-items: stretch;
}
div.videos[col='1'] .video,
div.videos[col='1'] iframe {
  width: 100%;
}
div.videos[col='2'] .video,
div.videos[col='2'] iframe {
  width: calc(50% - 2 * 4px);
}
div.videos[col='3'] .video,
div.videos[col='3'] iframe {
  width: calc(33.33% - 2 * 4px);
}
div.videos[col='4'] .video,
div.videos[col='4'] iframe {
  width: calc(25% - 2 * 4px);
}

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);

块状标签图标不能居中，这是唯一的bug

分类折叠到文章

此处改动较大，但是功能我很喜欢，慎重考虑。

修改源码

修改layout/includes/widget/card_categories.pug

查看代码

if site.categories.length
  if !theme.classify_fold.enable
    .card-widget.card-categories
        .card-content
          .item-headline
            i.fa.fa-folder-open
            span= _p('aside.card_categories')
          !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 })

  else
    .card-widget.card-categories
        .card-content
          .item-headline
            i.fa.fa-folder-open
            span= _p('aside.card_categories')
          ul.card-category-list
            mixin displayCategories(parent = undefined) 
              - site.categories.find({ parent }).sort("name").each(function(category) {
                  - var childCount = site.categories.find({ parent: category._id }).count();              
                  li.card-category-list-item
                    div.card-category-list-link
                      a.card-category-list-name(href=url_for(category.path))= category.name
                      span.card-category-list-count= category.length
                      if childCount > 0
                        i.fa.fa-chevron-left(onclick="classifyclick(this)")
                      else if theme.classify_fold.post
                        i.fa.fa-chevron-left(onclick="classifyclick(this)")
                    
                  if childCount > 0
                    ul.card-category-list.child
                      +displayCategories(category._id)
                  else if theme.classify_fold.post
                    ul.card-post-list.child.card-category-list.child
                      - site.categories.findOne({name: category.name}).posts.forEach(function(post){
                        li.card-post-list-item.card-category-list-item
                          div.card-post-list-link.card-category-list-link
                            a.card-post-name(title=post.title,href=url_for(post.path))= post.title
                      - })
              - })

            +displayCategories()

修改source/css/_layout/aside.styl，大约147行开始，这个是卡片相关

以上部分代码省略。。。
                color: $light-blue !important

            &.no-aside-cover
              .aside-post_title
                height: auto
大约147行，从这里开始：

  .card-archives ul.card-archive-list,
  .card-categories ul.card-category-list
    margin: 0
    padding: .2rem 0 0
    list-style: none

  .card-archives ul.card-archive-list > .card-archive-list-item,
  .card-categories ul.card-category-list > .card-category-list-item
    padding: .15rem 1rem
    transition: all .5s

    &:hover
      padding: .15rem .85rem
      background-color: $light-blue

    a
      color: $font-black

      span
        display: inline-block
        overflow: hidden
        vertical-align: bottom
        text-overflow: ellipsis
        white-space: nowrap

        &:first-child
          width: 80%

        &:last-child
          width: 20%
          text-align: right

    &.more
      span
        padding-right: .3rem
        width: auto !important
        transition: .5s

      &:hover
        span
          padding-right: .6rem

  if hexo-config('classify_fold.enable')
    .card-categories ul .card-category-list-name{
      display:inline-block;
      width: 70%
      cursor: pointer
    }
    .card-categories ul .card-category-list-count{
      display:inline-block;
      width: 20%
    }
    .card-categories ul .fa{
      display:inline-block;
      width: 10%
      cursor: pointer
    }
    .card-categories ul ul{
      display: none
    }

  .card-categories ul .card-post-name{
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    display: block
  }

  .card-categories
    .card-category-list
      &.child
        padding: 0 0 0 1.2rem

到这里结束

  .card-webinfo
    .webinfo
      padding: .2rem 1rem

      .webinfo-item
        display: block
以下部分省略。。。

最后适配是黑暗模式，source/css/_mode/darkmode.styl`，约187行处添加以下代码

if hexo-config('classify_fold.enable')
  .card-categories ul .card-post-name,
  .card-categories ul .card-category-list-name{
    color: alpha(#FFFFFF, .6) !important
  }

js外挂

还需要适配点击效果，需要增加js文件source/js/classify.js

classifyclick = function(classify){
    var expan = $(classify).parent().parent().next();
    var temp = expan
    if(expan.css("display") == "none"){
        $(classify).removeClass("fa-chevron-left")
        $(classify).addClass("fa-chevron-down")
        expan.css('height', '');
        expan.css("display", "block");
        height = expan.height();
        expan.css("height", "0px");
        expan.animate({height: height + 'px'});
        while(temp.parent().hasClass("child")){
            temp.parent().animate({height: temp.parent().height() + height + 'px'})
            temp = temp.parent()
        }
    }
    else{
        $(classify).removeClass("fa-chevron-down")
        $(classify).addClass("fa-chevron-left")
        temp_classify = classify;
        height = expan.height();
        expan.animate({height: '0px'}, {complete: function() {$(temp_classify).parent().parent().next().css("display", "none");}});
        while(temp.parent().hasClass("child")){
            temp.parent().animate({height: (temp.parent().height() - height) + 'px'})
            temp = temp.parent()
        }
    }
}

增加配置

最后再主题配置文件中，添加以下配置即可

classify_fold: # 分类是否折叠
  enable: true # 是否开启
  post: true # 最后一层目录是文章

动态说说

请查看，https://artitalk.js.org/

评论系统暴力修改

最新版本的主题支持了双评论，但是对我来说作用不大，而且配置麻烦(不会配置)，所以干脆全部改回老版Valine评论。

将2.3.5版本layout\includes\comments中的所有文件覆盖到新版本的layout\includes\comments文件夹中。

修改主题配置中最后的valine的CDN修改为本地路径，/js/Valine.min.js (魔改版本)，具体参考我的Valine评论详解

调整主题配置中，valine相关配置为

valine:
  enable: true # if you want use valine,please set this value is true
  appId: # 你的id
  appKey: # 你的key
  verify: true # valine verify code (true/false) Deprecated in v1.4.0+
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: 填写QQ号就能评论，快来一发吧~ # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick #valine comment header info
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  emojiCDN: # emoji CDN
  enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick # required fields nick/mail/link
  bg: /img/comment_bg.png
  count: false # dispaly comment count in top_img

随机背景图

此处也需要对源码进行修改，慎重考虑。

授人以渔

此处参考了云玩家的教程，不过他讲述的过于繁琐，这里进行梳理，不感兴趣的可直接跳过，直接看修改过程。

通过网页的search功能基本就能锁定到背景页面的css，显然页面是用的id选择器，且id为web_bg，元素为background

#web_bg {
  position: fixed;
  z-index: -999;
  width: 100%;
  height: 100%;
  background: url("/img/banner/6.jpg");
  background-attachment: local;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

通过用js的document.getElementById('web_bg')发现并不能取到想要的值，是因为此处不是采用的行内式，不过既然知道了web_bg参数，就可以进行全局搜索

最终在\Butterfly\layout\includes找到layout.pug文件，其中有一段源码是这样的

#body-wrap
	if theme.background
  		- var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'
        #web_bg(data-type = is_photo)
     include ./header/index.pug

另外一段相关源码

- var footer_bg = theme.footer_bg == false ? '' : bg_img
- var is_bg = theme.footer_bg == false ? 'color' : 'photo'
	footer#footer(style=footer_bg data-type=is_bg)
		!=partial('includes/footer', {}, {cache:theme.fragment_cache})

通过修改这两处实现随机背景图

修改过程

修改源码

在 butterfly/layout/includes/layout.pug 下找到如下代码

if theme.background
  - var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'

改为

- var is_photo = 'photo'

然后在还是这个文件往下，找到如下代码

footer#footer(style=footer_bg data-type=is_bg)
  !=partial('includes/footer', {}, {cache:theme.fragment_cache})

在其下追加变成，注意缩进，script()与上面的!=对齐

footer#footer(style=footer_bg data-type=is_bg)
  !=partial('includes/footer', {}, {cache:theme.fragment_cache})
if !is_post()
  script() var bg_index = Math.floor(Math.random() * #{theme.background_num});var res = 'background-image: url("/img/banner/' + bg_index + '.jpg"); background-attachment: fixed;';document.getElementById('web_bg').style = res

这里的if !is_post()表示文章页面不采用随机背景，如果需要随机则可以把这句话删去。文章背景色是采用主题设置中的background值

添加图片

在\source\img目录下新建banner文件夹，然后就可以把图片按照0.jpg、1.jpg、2.jpg这个顺序放入，同时在 butterfly/_config.yml 里添加以下内容

# 随机背景图banner的数量
background_num: 8

啰嗦一句：这里的banner的数量不是指最后一张图序号多少，是指所有图片总数，懂我意思的吧

后处理

主页顶端的banner显示剔除，这个在页面优化其实已经说了，外挂js

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

如果修改完发现，发现整个背景白色一片，多半是因为文章背景色没有设置，请设置主题设置中的background值

脚跳动的心

打开Butterfly\layout\includes\footer.pug，找到

.copyright!= `©${nowYear} by ${config.author}`

替换成如下内容，其实就是把by替换成一个爱心标签，给一个id为heartbeat

.copyright!= `&copy;${nowYear} <i id="heartbeat" style="color:#FF6A6A" class="fa fa-heartbeat"></i> ${config.author}`

外挂方式添加css

查看代码

/* 跳动的心 */
#heartbeat {
  color: red;
  animation: iconAnimate 1.33s ease-in-out infinite;
}
@-moz-keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}
@-webkit-keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}
@-o-keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}
@keyframes iconAnimate {
  0%,
  100% {
    transform: scale(1);
  }
  10%,
  30% {
    transform: scale(0.9);
  }
  20%,
  40%,
  60%,
  80% {
    transform: scale(1.1);
  }
  50%,
  70% {
    transform: scale(1.1);
  }
}

动态图标

起源于看到Sakura主题的Font Awesome动态图标很好看，例如主页图标，研究了一下，原来是一个开源的css代码，只要引入即可！

作品展示

普通Font Awesome图标

自动动画

hover动画

对于一些标签也可以

默认情况

success

error

warning

使用方法

顶栏的图标可以直接使用，格式为：fa 图标 动画配置类，例如

menu:
  主页: / || fa fa-home faa-bounce animated

对于上述的标签使用方法类似

<div class='tip faa-horizontal animated' ><p>默认情况<p></div>
<div class='tip success faa-flash animated'><p>success<p></div>
<div class='tip error faa-pulse animated'><p>error<p></div>
<div class='tip warning faa-shake animated'><p>warning<p></div>

参数说明

参数	说明
faa-wrench animated	faa-wrench表示抖动，animated表示自动
faa-wrench animated-hover	animated-hover表示hover点击动画
faa-fast	快速
faa-slow	慢速

更多效果参考会飞的小弋博客全样式预览

插件类

更新提醒插件

hexo-offline-popup