https://github.com/jerryc127/hexo-theme-butterfly

モダンで多機能なHexo のテーマButterflyを使ってみました。
あまりにも多機能なのでシンプルになるように設定しました。
パッケージ版を導入して、オリジナルのスクリプトは修正しないようにしました。

環境

  • WSL(Ubuntu 22.04) on Windows 11
  • nodejs v20.10.0
  • npm 10.2.3
  • hexo 7.0.0
  • hexo-theme-butterfly 4.11.0

ソフトウェアのインストール

Hexoのインストール

https://hexo.io/

npm install hexo-cli -g
hexo init blog
cd blog
npm install

Butterflyテーマのインストール

https://github.com/jerryc127/hexo-theme-butterfly

npm install hexo-theme-butterfly
npm install hexo-renderer-pug hexo-renderer-stylus
cp ./node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml

今回はgit cloneではなくテーマのパッケージを使います。

プラグインのインストール

npm install hexo-generator-feed
npm install hexo-generator-searchdb

各種ページの準備

Tagsページ

hexo n page "tags"
./source/tags/index.md
---
title: Tags
type: tags
layout: tags
---

Categoriesページ

hexo n page "categories"
./source/categories/index.md
---
title: Categories
type: categories
layout: categories
---

カスタマイズ - プロフィール

サイト情報の設定

./_config.yml
title: Memorandum!
author: ktkr3d
timezone: 'Japan'
url: https://ktkr3d.github.io

アバター画像の差し替え

./_config.butterfly.yml
avatar:
  # img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
  img: /images/avatar.png

アバターの下のGithubリンクの設定

./_config.butterfly.yml
aside:
  card_author:
    button:
      # link: https://github.com/xxxxxx
      link: https://github.com/ktkr3d

フッタのブログ開始年の設定

./_config.butterfly.yml
footer:
  owner:
    # since: 2020
    since: 2010

記事のコピーライト表記を無効化

./_config.butterfly.yml
post_copyright:
  enable: true

記事テンプレートのカスタマイズ

./scaffolds/post.md
---
title: {{ title }}
date: {{ date }}
tags:
  - 
toc: true
published: true
cover:
---

![](/images/.png)

<!-- more -->

### 環境

### 構築

### 実行

### 利用

カスタマイズ - 外観

Butterfly テーマの指定

./_config.yml
theme: butterfly

上部ナビゲーションバーの表示を固定

./_config.butterfly.yml
nav:
  # fixed: false # fixed navigation bar
  fixed: true # fixed navigation bar

インデックスページのバナー画像を無効化

./_config.butterfly.yml
#disable_top_img: false
disable_top_img: true

サイドバーを左側に移動

./_config.butterfly.yml
aside:
  # position: right # left or right
  position: left # left or right

インデックスページの各記事のカバー画像を右側に統一

./_config.butterfly.yml
cover:
  # position: both
  position: right

サイドバーでは記事カバー画像を非表示

./_config.butterfly.yml
cover:
  # aside_enable: true
  aside_enable: false

ページ背景色の設定

./_config.butterfly.yml
# background:
background: rgb(227, 233, 199) #e3e9c7

フッタに背景画像の設定

./_config.butterfly.yml
# footer_bg: false
footer_bg: url(/images/travel.png)

フォントの設定

./_config.butterfly.yml
font:
  font-family: Dummy, "Noto Sans CJK JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif

一つ目はダブルクォートなしを指定しないといけないのはバグ？

favicon の設定

./_config.butterfly.yml
# favicon: /img/favicon.png
favicon: /images/favicon.png

コードブロックの行番号を非表示

./_config.yml
syntax_highlighter: highlight.js
highlight:
  # line_number: true
  line_number: false

コードブロックテーマの変更

./_config.butterfly.yml
# highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_theme: darker #  darker / pale night / light / ocean / mac / mac light / false

コードブロックのヘッダを無効化

./_config.butterfly.yml
# highlight_copy: true # copy button
highlight_copy: false # copy button
# highlight_lang: true # show the code language
highlight_lang: false # show the code language
# highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_shrink: none # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button

カスタマイズ - カスタムCSS

カスタムCSSの作成

./source/css/custom.css
/* custom css */

カスタムCSSの有効化

./_config.butterfly.yml
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/custom.css">

コンテンツ幅を最大に拡張

./source/css/custom.css
.layout{
  max-width: 100%;
}

見出しの装飾

./source/css/custom.css
h2 {
  margin: 40px 0 20px;
  padding: 5px 0 8px 20px;
  border-left: 6px solid #5ca3c5;
  border-bottom: 1px solid #5ca3c5;
}

h3 {
  border-bottom: 1px solid #ddd;
}

コードブロック

./source/css/custom.css
figcaption {
  background-color: #456789;
  padding: 10px !important;
  color: white;
  border-radius: 5px 5px 0 0 !important;
}

.highlight {
  border-radius: 5px !important;
}

カスタマイズ - 機能

ローカル検索を有効化

./_config.butterfly.yml
local_search:
  # enable: false
  enable: true

ナビゲーションバーにPagesメニューを追加

./_config.butterfly.yml
menu:
  Pages || fas fa-list:
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Categories: /categories/ || fas fa-folder-open

Google Analytics の導入

./_config.butterfly.yml
google_analytics: G-XXXXXXXXXX

RSS2 の生成

./_config.yml
feed:
  enable: true
  type: rss2
  path: rss.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:
./_config.butterfly.yml
menu:
  Subscrive: /rss.xml || fas fa-rss

Busuanzi カウンタの無効化

./_config.butterfly.yml
busuanzi:
  # site_uv: true
  site_uv: false
  # site_pv: true
  site_pv: false
  # page_pv: true
  page_pv: false

Announcement カードの無効化

./_config.butterfly.yml
aside:
  card_announcement:
    # enable: true
    enable: false

Info カードの無効化

./_config.butterfly.yml
aside:
  card_webinfo:
    # enable: true
    enable: false

目次スクロール率(%)の非表示

./_config.butterfly.yml
toc:
  # scroll_percent: true
  scroll_percent: false

Share.js の設定

./_config.butterfly.yml
sharejs:
  enable: true
  # sites: facebook,twitter,wechat,weibo,qq
  sites: facebook,twitter,google

記事投稿時の個別設定

カバー画像を指定する

---
cover: /images/hogehoge.png
---

目次を生成する

---
toc: true
---

注意書き

https://github.com/jerryc127/hexo-theme-butterfly/tree/dev/scripts/tag

{% note warning %}
注意書きメッセージ (default | primary | success | info | warning | danger)
{% endnote %}

注意書きメッセージ (default | primary | success | info | warning | danger)