GitHub - jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly

やっと、テーマのカスタマイズが終わったので置いておきます。
色々試してうまくいった結果であり、もっといい方法がある気がするので参考程度にどうぞ。

環境

  • Windows10 64bit
  • Node.js 14.18.1
  • Hexo 5.4.0
  • Butterfly 3.8.4

特徴

投稿ページ 投稿ページでダークモード

  • Hexo 5系に対応
  • テーマの_config.ymlで色々と設定できるのは嬉しいが、設定に時間がかかりやすい面も
  • スマホでもサイドバーからtocが確認できる
  • ダークモードは、画像やGistのコード表示の明るさも下がる
  • テーマで使用しているCDNのほとんどがjsDelivr
  • .pug.stylが使われている

Gistのコードもダークモードにしたいときは、CSS Dark Mode Gist Embed Code · GitHubのCSSを参考にするとよさそう。
ただ、テーマのコード表示と見分けづらくなったので微妙かな。

中華圏の一部のテーマは中国のみ?のCDNを使用していることがあり、急にアクセスできなくなることがあったので、前のテーマのときは他のCDNに変えていました。
このテーマはほとんどがjsDelivrなので、気にしなくてよさそうです。

このテーマを使用するときの注意点としては、hexo-renderer-pugを入れないとテーマが表示できないです。

少し残念なところ

  • テーマの白系のコード表示が少し見づらいような気がする
  • テーマのコード表示は.pug対応していないみたい

コード表示は、いっそのこと白系をやめて黒系にすればいいのかも。

pug対応していないのはちょっと残念です。テーマで使っているのに。

個人的に困るところ

折りたたみメニューの2階層ある部分は、Chromeの拡張機能のSurfingkeyscVimのhit-a-hintでリンクが開けない

このテーマに限らず、高性能なテーマで使いたいと思っても、hit-a-hintで開けないというケースに遭うことがあります。
他のテーマでも、記事のリンクすらhit-a-hintで開けないものもあったりします。

メニューは、使用頻度の低いものをまとめて折りたたむことへ。

テーマ設定

公式のブログに詳しく載っているので、そちらを参考でいいと思います。

中国語のサイトですが、Chromeのブラウザの翻訳機能が向上した?ので、読めると思います。
前は、中国語のサイトの一部分が何故か翻訳されなくて中途半端の症状に合うことが多く、翻訳サイトに移動して翻訳していました。

このテーマのコード表示が、翻訳すると変な表示になることがあるのは変わりませんが。

テーマの_config.ymlをコピーして名前変更

C:\tools\hexo\themes\butterfly\_config.ymlをコピー > _config.butterfly.ymlへ名前変更 > C:\tools\hexoに貼り付けしてから弄る。

日本語の言語ファイル

言語ファイル作成

C:\tools\hexo\themes\butterfly\languages\en.ymlをコピーして、ファイル名をja.yml

翻訳サイトなどを参考に変更するのがいいかなと。
あえて翻訳していないものもありますし、使用していない部分は翻訳していませんし、翻訳しても使っていないものもあります。

ja.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
footer:
framework: Framework
theme: Theme

copy:
success: コピーOK
error: コピーエラー
noSupport: サポートしていないブラウザです

page:
articles: articles
tag: tags
category: categories
archives: archives

card_post_count: comments

sticky: Sticky
no_title: No title

post:
created: 投稿
updated: 更新
wordcount: Word count
min2read: Reading time
min2read_unit: min
page_pv: Post View
comments: Comments
copyright:
author: Author
link: Link
copyright_notice: Copyright Notice
copyright_content: 'All articles in this blog are licensed under <a href="%s">%s</a> unless stating additionally.'
recommend: 関連記事
edit: Edited on

search: search
algolia_search:
input_placeholder: 投稿を検索
hits_empty: "検索結果が見つかりません: ${query}."
hits_stats: '${hits}件の結果が見つかりました'

local_search:
label: 検索
input_placeholder: 初回は少し待ってから文字入力して下さい
hits_empty: "検索結果が見つかりません"

pagination:
prev: Previous Post
next: Next Post

comment: コメント

aside:
articles: 記事
tags: Tags
categories: Categories
card_announcement: お知らせ
card_categories: Categories
card_tags: Tags
card_archives: Archives
card_recent_post: Recent Post
card_webinfo:
headline: 通知
article_name: 記事
runtime:
name: Run time
unit: days
last_push_date:
name: 最終更新
site_wordcount: Total Count
site_uv_name: UV
site_pv_name: PV
more_button: More
card_newest_comments:
headline: Newest Comments
loading_text: loading...
error: Unable to get the data, please make sure the settings are correct.
zero: No Comment
image: image
link: link
code: code
card_toc: 目次

date_suffix:
just: just
min: 分前
hour: 時間前
day: 日前
month: ヶ月前

donate: Donate
share: Share

rightside:
readmode_title: Read Mode
font_plus_title: Increase font size
font_minus_title: Decrease font size
translate_title: Switch Between Traditional Chinese And Simplified Chinese
night_mode_title: ライトモード/ダークモード
back_to_top: 最初へ
go_to_buttom: 最後へ
toc: 目次
scroll_to_comment: コメントへ
setting: 設定
aside: Toggle between single-column and double-column

copy_copyright:
author: Author
link: Link
source: Source
info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

Snackbar:
chs_to_cht: Traditional Chinese Activated Manually
cht_to_chs: Simplified Chinese Activated Manually
day_to_night: Dark Mode Activated Manually
night_to_day: Light Mode Activated Manually

loading: Loading...

error404:
error_title: ページが見つかりません
back_button: トップへ

言語ファイル設定

C:\tools\hexo\_config.yml 11行目

1
language: en

下記へ

1
language: ja

pugカスタマイズ

投稿記事のみtocありの2カラムで他は1カラム

右サイド非表示にしたトップ 変更後のトップ

C:\tools\hexo\_config.butterfly.ymlの設定だけだと、トップとarchivesの右サイドで表示するものがないときでも右サイドの見えないスペースがあり、メインコンテンツが見えないスペースがあるために中央寄せにならない。

右サイドに表示するものを投稿記事のtocのみに

C:\tools\hexo\_config.butterfly.yml 181行目

1
style_simple: false

下記へ

1
style_simple: true

style_simple: trueで、投稿記事の右レイアウトがtocのみになる

634行目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
card_author:
enable: true
description:
button:
enable: true
icon: fab fa-github
text: Follow Me
link: https://github.com/xxxxxx
card_announcement:
enable: true
content: This is my Blog
card_recent_post:
enable: true
limit: 5 # if set 0 will show all
sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: false
sort_order: # Don't modify the setting unless you know how it works
card_archives:
enable: true
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
sort_order: # Don't modify the setting unless you know how it works
card_webinfo:
enable: true
post_count: true
last_push_date: true
sort_order: # Don't modify the setting unless you know how it works

下記へ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
aside:
enable: true
hide: false
button: false
mobile: true # display on mobile
position: right # left or right
card_author:
enable: false
description:
button:
enable: false
icon: fab fa-github
text: Follow Me
link: https://github.com/xxxxxx
card_announcement:
enable: false
content: This is my Blog
card_recent_post:
enable: false
limit: 5 # if set 0 will show all
sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: false
limit: 8 # if set 0 will show all
expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags:
enable: false
limit: 40 # if set 0 will show all
color: false
sort_order: # Don't modify the setting unless you know how it works
card_archives:
enable: false
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
sort_order: # Don't modify the setting unless you know how it works
card_webinfo:
enable: false
post_count: true
last_push_date: true
sort_order: # Don't modify the setting unless you know how it works

右サイドに表示するものをmobile以外false

1カラムにするページのフロントマター設定

1
aside: false

C:\tools\hexo\source内のカテゴリやタグ、ページなどで設定。

レイアウト変更

C:\tools\hexo\themes\butterfly\layout\includes\layout.pug 1行目

1
2
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''

下記へ

1
2
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide || page.aside === false || page.posts ? 'hide-aside' : ''
- var hideAside = !theme.aside.enable ? 'hide-aside' : ''
  • htmlClassHideAside: 右サイドで表示するものがないときは、右サイドの見えないスペースは消えて、中央寄せのレイアウトに
  • hideAside: 右サイドで表示するものがないときでも、右サイドの見えないスペースがあり、左寄せのレイアウトに
  • page.posts: サイトのHome(index)ページ。archiveも対象

更新日が投稿日よりも新しいなら更新日を表示

投稿日や更新日のどちらかを表示したり、両方を表示する事はできますが、この設定ができない。
わかりやすいと思うんですが。

Home表示

C:\tools\hexo\themes\butterfly\layout\includes\mixins\post-ui.pug 23行目

1
if (theme.post_meta.page.date_type === 'both')

下記へ

1
if (article.date < article.updated)

投稿表示

C:\tools\hexo\themes\butterfly\layout\includes\header\post-info.pug 12行目

1
if (theme.post_meta.post.date_type === 'both')

下記へ

1
if (page.date < page.updated)

ページにも日付表示して、更新日が投稿日よりも新しいなら更新日を表示

ページにも日付表示欲しい派。

ページ表示

C:\tools\hexo\themes\butterfly\layout\includes\page\default-page.pug 4行目追加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#post-meta
.meta-page-firstline
if (theme.post_meta.post.date_type)
span.post-meta-date
if (page.date < page.updated)
i.far.fa-calendar-alt.fa-fw.post-meta-icon
span.post-meta-label= _p('')
time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))=date(page.date, config.date_format)
span.page-meta-separator |
i.fas.fa-history.fa-fw.post-meta-icon
span.post-meta-label= _p('')
time.post-meta-date-updated(datetime=date_xml(page.updated) title=_p('post.updated') + ' ' + full_date(page.updated))=date(page.updated, config.date_format)
else
- let data_type_update = theme.post_meta.post.date_type === 'updated'
- let date_type = data_type_update ? 'updated' : 'date'
- let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt'
- let data_info = data_type_update ? _p('post.updated') : _p('post.created')
i.fa-fw.post-meta-icon(class=date_icon)
span.post-meta-label= _p('')
time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)

!= page.content

幅が狭いとき用のメニューのアバターやカテゴリなど削除

変更前のメニュー 変更後のメニュー

主にスマホ用メニューで、下記も表示されるがメニューだけにしたい。

  • アバター画像
  • 記事 数
  • tag 数
  • categories 数

C:\tools\hexo\themes\butterfly\layout\includes\sidebar.pug 1行目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#sidebar
#menu-mask
#sidebar-menus
.avatar-img.is-center
img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
.site-data
if site.posts.length
.data-item.is-center
.data-item-link
a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles')
.length-num= site.posts.length

if site.tags.length
.data-item.is-center
.data-item-link
a(href=url_for(config.tag_dir) + '/' )
.headline= _p('aside.tags')
.length-num= site.tags.length

if site.categories.length
.data-item.is-center
.data-item-link
a(href=url_for(config.category_dir) + '/')
.headline= _p('aside.categories')
.length-num= site.categories.length
hr
!=partial('includes/header/menu_item', {}, {cache: true})

下記へ

1
2
3
4
5
#sidebar
#menu-mask
#sidebar-menus
hr
!=partial('includes/header/menu_item', {}, {cache: true})

サイドバーを最初から表示

スクロールアイコンなどが56未満?だと表示されない。

C:\tools\hexo\themes\butterfly\source\js\main.js 331行目

1
if (document.body.scrollHeight <= innerHeight) {

下記へ

1
if (document.body.scrollHeight >= innerHeight) {

サイドバーの設定アニメーションアイコンを普通のアイコンへ

アニメーションする必要性がない気がする。

C:\tools\hexo\themes\butterfly\layout\includes\rightside.pug 23行目、29行目

1
i.fas.fa-cog.fa-spin

下記へ

1
i.fas.fa-cog

サイドバーに一番下へ移動アイコン追加

最後へアイコン追加

C:\tools\hexo\themes\butterfly\layout\includes\rightside.pug 最後に追加

1
2
button#go-bottom(type="button" title=_p("rightside.go_to_buttom"))
i.fas.fa-arrow-down

C:\tools\hexo\themes\butterfly\source\js\main.js 559行目追加

1
2
3
scrollToButtom: () => { // Go to buttom
btf.scrollToDest(99999, 0)
},

596行目追加

1
2
3
case 'go-bottom':
rightSideFn.scrollToButtom()
break

C:\tools\hexo\themes\butterfly\languages\ja.yml 102行目 追加

1
go_to_buttom: 最後へ

計算して一番下に移動するタイプだと、ページ開いてすぐに一番下に移動するアイコン押しても反応しないことがあるので、これでいいかなと。
スマホブラウザで、最初と最後へ移動のアニメーション速度が違い、最後への移動速度の方が速いですが、最後へはすぐに移動したいと思うのでこれでいいことにする。

jsカスタマイズ

cover設定していないのに画像が表示されるのを非表示へ

_config.butterfly.ymlでarchiveやtag、category用にも画像を設定できるようになっています。
ですが、画像がないなら、無理に表示しなくていいと思うのです。

C:\tools\hexo\themes\butterfly\scripts\filters\random_cover.js 42行目

1
cover = theme.default_top_img || 'https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg'

下記へ

1
cover = theme.default_top_img || ''

hexo cleanして確認

hexo cleanしないと駄目だったので、C:\tools\hexohexo cleanして表示確認

stylカスタマイズ

自分用のstyl作成

C:\tools\hexo\themes\butterfly\source\css\index.styl 最後に追加

1
@import '_my/*'

C:\tools\hexo\themes\butterfly\source\css\_my\my-style.stylを作成して、ここに自分用設定を追加していく

css2stylus - tool - html5beta.com
CSSをStylusに変換できるツール

my-style.styl

使用していない部分を除外して置いておきます。

よくわかっていないので、CSSみたいに記載しています。
Stylusは、CSSみたいな書き方でもSassのような省略形でもかけるのがありがたい。

my-style.styl

まとめ

Hexoの5系にしっかり対応しているテーマは少ないですし、個人的には、Surfingkeysのhit-a-hintでリンクがうまく開けないテーマに遭うことも多く、選択肢は少ないです。
fの単体リンクは機能してもcfの複数リンクを開くが機能しないパターンもよくあります。
このテーマは折りたたみメニューの2階層目がある部分が開けないだけなので、影響は少ないですが面倒です。
幅が狭いとき用のメニューは開けるという。マウスをフォーカスして自動で開かれるのが駄目みたい。

高性能なテーマで、テーマの_config.ymlだけで色々と設定できるのはありがたいのですが、使用頻度が低そうな機能も多い印象です。
それでも、他のテーマよりはやれることが多くて優秀だと思います。
テーマの更新は続きそうなので、今後さらに便利になるのを期待します。

追記

2021-11-07

  • 特徴 変更

2021-11-08

  • テーマ設定
    • テーマの_config.ymlをコピーして名前変更 追加

2021-11-11

  • stylカスタマイズ
    • my-style.styl Gist表示へ 変更