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でフォント設定項目を変更します。

# グローバルフォント設定
# 以下の設定は動作を理解していない限り変更しないこと (非必要な場合は変更しない)
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 設定項目を変更します。

# CSSとスクリプトを注入 (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以外の場合、スライド機能を有効にし、1行あたりのバッジ数
  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 テーマで優雅に背景を変更 | 小康ブログ