Butterfly Theme Beautification Notes

cover

Preface#

Documenting my theme modification journey for easier future adjustments.
Beautification does not involve theme source code, only plugins and CSS mounting.

_config.yml path is [blog root directory]/
_config.butterfly.yml path is [blog root directory]/

I. Custom CSS#

Create a new custom.css file in [blog root directory]/themes/butterfly/source/css/

Background Gradient Effect#

Add the following to custom.css

/*！Background gradient effect*/
#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%
  );
}

Opacity Adjustment#

Add the following to custom.css

/*Footer opacity adjustment*/
#footer {
  opacity: 0.9;
}
/* Footer transparent */
#footer {
  background: transparent !important;
}
/* Remove footer black transparent glass effect */
#footer::before {
  background: transparent !important;
}
/* Header image transparent */
#page-header {
  background: transparent !important;
}
/* Header image mask layer transparent */
#page-header::before {
  background: transparent !important;
}
/*top-img black transparent glass effect */
#page-header.post-bg:before {
  background-color: transparent !important;
}

Custom Fonts#

Create a folder named fonts in [blog root directory]/themes/butterfly/source/
Place the .tff font files inside.

Add the following to custom.css

@font-face {
  font-family: "Font Name"; /* Customize the font name */
  src: url("/fonts/your-font-file-name.ttf"); /* Font file path */
  font-display: swap;
}

Modify the font configuration in _config.butterfly.yml

# Global font settings
# Don't modify the following settings unless you know how they work (Do not modify unless necessary)
font:
  global-font-size:
  code-font-size:
  font-family: "Font Name"
  code-font-family:

II. Plugin Installation#

Aplayer Global Player#

Install the hexo-tag-aplayer plugin
```
npm install hexo-tag-aplayer --save
```

Add the following configuration to _config.yml

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

Modify the Aplayer configuration in _config.butterfly.yml

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

Add CSS styles to custom.css to automatically indent and hide

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important;
  /* By default, indent 66px to the left, leaving only a bit of the arrow part */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0 !important;
  /* When hovering, the left indentation returns to zero, fully displaying the buttons */
}

Add the Aplayer container to the inject configuration in _config.butterfly.yml

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: Can fill in the playlist or song id
data-server: Service provider, optional netease, tencent, kugou, xiami, baidu
data-type: Type, optional song, playlist, album, search, artist

Add Clock and GitHub Badge to Footer#

Install the butterfly-footer-beautify plugin

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

Add the following configuration to _config.yml

# footer_beautify
# Footer timer: [Native JS Timer](https://akilar.top/posts/b941af/)
# Footer badge: [Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # Timer switch
    bdage: true # Badge switch
  priority: 5 # Filter priority
  enable_page: all # Applied pages
  exclude: # Excluded pages
    # - /posts/
    # - /about/
  layout: # Mounting container type
    type: id
    name: footer-wrap
    index: 0
  # Timer configuration items
  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
  # Badge configuration items
  swiperpara: 3 # If not 0, enable carousel function, number of badges per row
  bdageitem:
    - link: https://hexo.io/ # Badge link
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo # Badge API
      message: The blog framework is Hexo_v5.4.0 # Badge tooltip
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: Theme version Butterfly_v3.8.2
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: This site uses JsDelivr for CDN acceleration of static resources
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: This site adopts dual-line deployment, with the default line hosted on Vercel
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
      message: This site adopts dual-line deployment, with the Unicom line hosted on Coding
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: This site project is hosted by 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: This site is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
  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

You can download runtime_js to modify it yourself.

Add Clock Module to Sidebar#

Install the butterfly-clock plugin

npm install hexo-butterfly-clock --save

Add the following configuration to _config.yml

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
electric_clock:
  enable: true # Switch
  priority: 5 # Filter priority
  enable_page: all # Applied pages
  exclude:
    # - /posts/
    # - /about/
  layout: # Mounting container type
    type: class
    name: sticky_layout
    index: 0
  loading: https://npm.elemecdn.com/hexo-butterfly-clock/lib/loading.gif # Custom loading animation
  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

Add Gitcalendar Module#

Install the gitcalendar plugin

npm install hexo-filter-gitcalendar --save

Add the following configuration to _config.yml

# hexo-filter-gitcalendar
# see https://akilar.top/posts/1f9c68c9/
gitcalendar:
  enable: true # Switch
  priority: 6 # Filter priority
  enable_page: / # Applied pages
  # butterfly mounting container
  layout: # Mounting container type
    type: id
    name: recent-posts
    index: 0
  # volantis mounting container
  # layout:
  #   type: class
  #   name: l_main
  #   index: 0
  # matery mounting container
  # layout:
  #   type: id
  #   name: indexCard
  #   index: 0
  # mengd mounting container
  # layout:
  #   type: class
  #   name: content
  #   index: 0
  user: xxxx # Git username
  apiurl: 'https://python-github-calendar-api.vercel.app'
  minheight:
    pc: 280px # Minimum height for desktop
    mobile: 0px # Minimum height for mobile
  #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']" # Orange tone
  # color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" # Light purple tone
  # color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" # Emerald green tone
  color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" # Sky blue tone
  container: .recent-post-item(style='width:100%;height:auto;padding:10px;') # Parent container, needs to use pug syntax
  gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
  gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js

Homepage Article Carousel#

Install the butterfly-swiper plugin

npm install hexo-butterfly-swiper --save

Add the following configuration to _config.yml

# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # Switch
  priority: 5 # Filter priority
  enable_page: all # Applied pages
  timemode: date #date/updated
  layout: # Mounting container type
    type: id
    name: recent-posts
    index: 0
  default_descr: No matter how I look at it, I don't know how to describe it!
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css # swiper css dependency
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js # swiper js dependency
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # Theme style patch
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper initialization method

Usage

Add the swiper_index configuration item in the article's front_matter

---
title: Article Title
date: Creation Date
updated: Update Date
cover: Article Cover
description: Article Description
swiper_index: 1 # Top carousel image order, non-negative integer, the larger the number, the more forward
---

Conclusion#

Modifying is fun for a moment, but modifying continuously is always fun.

Theme Beautification Diary | Candy House

Elegant Background Change for Hexo Blog with Butterfly Theme | Xiaokang Blog