Butterfly主題美化筆記

cover

前言#

記錄一下我的主題魔改歷程，便於以後修改。
美化不涉及主題源碼，只涉及插件和 css 掛載。

_config.yml路徑為 [博客根目錄]/
_config.butterfly.yml路徑為 [博客根目錄]/

Ⅰ. 自定義 CSS#

在 [博客根目錄]/themes/butterfly/source/css/處新建 custom.css文件

背景圖漸變效果#

在 custom.css中添加

/*！背景圖漸變效果*/
#body-wrap {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

透明度調整#

在 custom.css中添加

/*頁腳透明度調整*/
#footer {
  opacity: 0.9;
}
/* 頁腳透明 */
#footer {
  background: transparent !important;
}
/* 頁腳黑色透明玻璃效果移除 */
#footer::before {
  background: transparent !important;
}
/* 頭圖透明 */
#page-header {
  background: transparent !important;
}
/* 頭圖遮罩層透明 */
#page-header::before {
  background: transparent !important;
}
/*top-img黑色透明玻璃效果 */
#page-header.post-bg:before {
  background-color: transparent !important;
}

自定義字體#

在 [博客根目錄]/themes/butterfly/source/新建文件夾 fonts
將.tff 字體文件放進去

在 custom.css中添加

@font-face {
  font-family: "字體名"; /* 字體名自定義即可 */
  src: url("/fonts/你的字體文件名.ttf"); /* 字體文件路徑 */
  font-display: swap;
}

在 _config.butterfly.yml中修改字體配置項

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: "字體名"
  code-font-family:

Ⅱ. 插件安裝#

Aplayer 全局播放器#

安裝 hexo-tag-aplayer插件
```
npm install hexo-tag-aplayer --save
```

在 _config.yml中新增配置項

# APlayer
# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
aplayer:
  meting: true
  asset_inject: false

在 _config.butterfly.yml中修改關於 Aplayer 配置項

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

在 custom.css添加 CSS 樣式使其自動縮進隱藏

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important;
  /* 默認情況下縮進左側66px，只留一點箭頭部分 */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0 !important;
  /* 鼠標懸停是左側縮進歸零，完全顯示按鈕 */
}

在 _config.butterfly.yml的 inject配置項中添加 Aplayer 的容器

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="5183531430" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>

data-id：可填入歌單或歌曲 id
data-server：服務商，可選 netease, tencent, kugou, xiami, baidu
data-type：類型，可選 song, playlist, album, search, artist

頁腳添加時鐘和 github 徽標#

安裝 butterfly-footer-beautify插件

npm install hexo-butterfly-footer-beautify --save

在 _config.yml中新增配置項

# footer_beautify
# 頁腳計時器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 頁腳徽標：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # 計時器開關
    bdage: true # 徽標開關
  priority: 5 #過濾器優先權
  enable_page: all # 應用頁面
  exclude: #屏蔽頁面
    # - /posts/
    # - /about/
  layout: # 挂載容器類型
    type: id
    name: footer-wrap
    index: 0
  # 計時器部分配置項
  runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  # 徽標部分配置項
  swiperpara: 3 #若非0，則開啟輪播功能，每行徽標個數
  bdageitem:
    - link: https://hexo.io/ #徽標指向網站鏈接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽標API
      message: 博客框架為Hexo_v5.4.0 #徽標提示語
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主題版本Butterfly_v3.8.2
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 本站使用JsDelivr為靜態資源提供CDN加速
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站採用雙線部署，默認線路托管於Vercel
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
      message: 本站採用雙線部署，聯通線路托管於Coding
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站項目由Github托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      message: 本站採用知識共享署名-非商業性使用-相同方式共享4.0國際許可協議進行許可
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

可將 runtime_js下載下來自行修改

側欄添加時鐘模塊#

安裝 butterfly-clock插件

npm install hexo-butterfly-clock --save

在 _config.yml中新增配置項

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
electric_clock:
  enable: true # 開關
  priority: 5 #過濾器優先權
  enable_page: all # 應用頁面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂載容器類型
    type: class
    name: sticky_layout
    index: 0
  loading: https://npm.elemecdn.com/hexo-butterfly-clock/lib/loading.gif #加載動畫自定義
  clock_css: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.css
  clock_js: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.js
  ip_api: https://pv.sohu.com/cityjson?ie=utf-8

添加 gitcalendar 模塊#

安裝 gitcalendar插件

npm install hexo-filter-gitcalendar --save

在 _config.yml中新增配置項

# hexo-filter-gitcalendar
# see https://akilar.top/posts/1f9c68c9/
gitcalendar:
  enable: true # 開關
  priority: 6 #過濾器優先權
  enable_page: / # 應用頁面
  # butterfly掛載容器
  layout: # 挂載容器類型
    type: id
    name: recent-posts
    index: 0
  # volantis掛載容器
  # layout:
  #   type: class
  #   name: l_main
  #   index: 0
  # matery掛載容器
  # layout:
  #   type: id
  #   name: indexCard
  #   index: 0
  # mengd掛載容器
  # layout:
  #   type: class
  #   name: content
  #   index: 0
  user: xxxx #git用戶名
  apiurl: 'https://python-github-calendar-api.vercel.app'
  minheight:
    pc: 280px #桌面端最小高度
    mibile: 0px #移動端最小高度
  #color: "['#ebedf0', '#cdefec', '#a9e4de', '#1fc7b6', '#65cfc5', '#4dc8bb', '#39bbae', '#319d93', '#278178', '#216962', '#1b5852']"
  #color: "['rgb(145, 145, 145, 0.2)', '#c6ecc1', '#a0e2bb', '#1fc7b6', '#70c5d3', '#60a2ce', '#507ac9', '#4356c5', '#423cc4', '#5b3abc', '#7138b6']"
  #color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黃色調
  # color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #淺紫色調
  # color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
  color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色調
  container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器，需要使用pug語法
  gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
  gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js

首頁文章輪播#

安裝 butterfly-swiper插件

npm install hexo-butterfly-swiper --save

在 _config.yml中新增配置項

# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 開關
  priority: 5 #過濾器優先權
  enable_page: all # 應用頁面
  timemode: date #date/updated
  layout: # 挂載容器類型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎麼看我也不知道怎麼描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依賴
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依賴
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

使用方法

在文章的 front_matter中添加 swiper_index配置項即可

---
title: 文章標題
date: 創建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置頂輪播圖順序，非負整數，數字越大越靠前
---

後言#

魔改一時爽，一直魔改一直爽。

主題美化日記 | 糖果屋

Hexo 博客之 butterfly 主題優雅更換背景 | 小康博客