Hexo博客之butterfly主題優雅魔改系列（持續更新）

本文轉載自查看原文 2020-05-07 22:58 3261

為了便於各位博主了解到是否新增了魔改方案，請查看更新記錄頁

直接體驗魔改效果可以訪問我的個人博客小康博客

此文更新可能不及時，如果更新記錄有新的方案后，本文沒有那么請移至我的個人博客進行查找。

前置說明

魔改亮點

🆙主題可升級：幾乎不改動主題源碼。即便魔改，也不需要為升級主題而煩惱。

🍳簡單快速：簡單上手，快速修改。

🍭看我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;
});