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

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

環境

  • Windows10 64bit
  • Netlify
  • Node.js 16.14.2
  • Hexo 6.2.0
  • Butterfly 4.3.1

特徴

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

  • Hexo5.0.0以降をサポート
  • テーマの_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で開けないものもあったりします。

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

インストールしたテーマフォルダがGit管理対象にならない

テーマフォルダ内にもGitファイルがあるのが原因。
テーマフォルダ内のGitファイル関連を削除してから試す。

他にも対処方法があった気がしますが、覚えていない。

テーマ設定

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

中国語のサイトですが、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
footer:
framework: Framework
theme: Theme

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

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

card_post_count: comments

sticky: Sticky
no_title: No title

post:
created: Created
updated: 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:
title: search
load_data: データベースからロードしています
algolia_search:
input_placeholder: 記事を検索
hits_empty: "記事が見つかりません: ${query}."
hits_stats: '${hits}件の記事を表示しています'

local_search:
label: Local search
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"

pagination:
prev: Previous Post
next: Next Post

comment: コメント

aside:
articles: Articles
tags: Tags
categories: Categories
card_announcement: Announcement
card_categories: Categories
card_tags: Tags
card_archives: Archives
card_recent_post: Recent Post
card_webinfo:
headline: Info
article_name: Article
runtime:
name: Run time
unit: days
last_push_date:
name: Last Push
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: minutes ago
hour: hours ago
day: days ago
month: months ago

donate: Donate
share: Share

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

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: ページが見つかりません

言語ファイル設定

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

1
language: en

下記へ

1
language: ja

pugカスタマイズ

投稿記事とページはtocありの2カラムで他は1カラム

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

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

テーマ設定ファイル確認

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

1
2
3
4
5
6
toc:
post: true
page: true
number: true
expand: false
style_simple: true # for post

postpagestyle_simpletrueか確認
style_simple: trueで、投稿記事とページの右レイアウトがtocのみになる

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

1
2
3
aside:
enable: true
hide: false

上記になっているか確認。

categoriesとtagsのフロントマターに追加

1
aside: false

1カラムにしたいものに設定。

layout.pug変更

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

1
2
3
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''

下記へ

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

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

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

Home表示

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

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\header\post-info.pug 8~27行目を参考にします。

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

1
2
#article-container
!= page.content

下記へ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#article-container

#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

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

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

主にスマホ用メニュー用で、メニューだけにしたい。

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
#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")
.sidebar-site-data.site-data.is-center
a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles')
.length-num= site.posts.length
a(href=url_for(config.tag_dir) + '/' )
.headline= _p('aside.tags')
.length-num= site.tags.length
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
6
7
#sidebar
#menu-mask
#sidebar-menus

hr
!=partial('includes/header/menu_item', {}, {cache: true})

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

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

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

1
2
// 當滾動條小于 56 的時候
if (document.body.scrollHeight <= innerHeight) {

一部変更

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

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

スクロールを制御しよう | JavaScriptレシピ集 | CookBook - 画面最下部に移動するには

iOSのSafariなどは、最後へ移動はアニメーション移動ではなくアニメーションなしの移動になりますが、これでいいことにします。
個人的にはそれなりに使用しています。

最後へアイコン追加

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 495行目

1
2
3
scrollToTop: () => { // Back to top
btf.scrollToDest(0, 500)
},

下記へ

1
2
3
4
5
6
7
8
9
10
11
scrollToTop: () => { // Back to top
btf.scrollToDest(0, 500)
},
scrollToButtom: () => { // Go to buttom
const scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight
);
scrollTo({top: scrollHeight, left: 0, behavior: 'smooth'});
},

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

1
2
3
case 'go-up':
rightSideFn.scrollToTop()
break

下記へ

1
2
3
4
5
6
case 'go-up':
rightSideFn.scrollToTop()
break
case 'go-bottom':
rightSideFn.scrollToButtom()
break

C:\tools\hexo\themes\butterfly\languages\ja.yml102行目 追加
ja.ymlには、日本語の言語ファイル作成で追加してあるので確認。

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 || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

下記へ

1
cover = theme.default_top_img || ''

hexo cleanして確認

hexo cleanしないと駄目だったので、C:\tools\hexoでコマンドプロンプトなどでhexo cleanして表示確認

Algoliaの検索結果の本文文字数を変更

C:\tools\hexo\themes\butterfly\source\js\search\algolia.js 36行目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const cutContent = content => {
if (content === '') return ''

const firstOccur = content.indexOf('<mark>')

let start = firstOccur - 30
let end = firstOccur + 120
let pre = ''
let post = ''

if (start <= 0) {
start = 0
end = 140
} else {
pre = '...'
}

下記へ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const cutContent = content => {
if (content === '') return ''

const firstOccur = content.indexOf('<mark>')

let start = firstOccur - 10
let end = firstOccur + 60
let pre = ''
let post = ''

if (start <= 0) {
start = 0
end = 60
} else {
pre = '...'
}

PCで本文が3行表示されていましたが、1~2行ぐらいでいいかなと。

検索結果をスクロールした後にページ移動するとスクロールしたままのページ移動になるので、次に表示される検索結果がスクロール後の途中からの表示になってしまいます。

検索結果数は77行目で5件に設定されていますが、上記のスクロール問題があるので下手に増減すると使いづらいです。

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-generator-feed

GitHub - hexojs/hexo-generator-feed: Feed generator for Hexo.

ローカルのfeed表示は文字化けするが、Netlifyでデブロイ後のサイトのfeed表示は文字化けしない。

まとめ

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

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

追記

2021-11-07

  • 特徴 変更

2021-11-08

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

2021-11-11

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

2021-12-15

  • 環境
    • Node.js 16.13.1へ
  • インストールしたテーマフォルダがGit対象にならない 追加

2022-02-02

4.0系で変わったので変更

  • 環境
    • Node.js 16.13.2へ
    • Hexo 5.4.1へ
    • Butterfly 4.0.1へ
  • 特徴 変更
  • 日本語の言語ファイル
    • 言語ファイル作成 変更
  • インストールしたテーマフォルダがGit対象にならない > インストールしたテーマフォルダがGit管理対象にならない 変更
  • pugカスタマイズ
    • 投稿記事のみtocありの2カラムで他は1カラム > 投稿記事とページはtocありの2カラムで他は1カラム 変更
    • 更新日が投稿日よりも新しいなら更新日を表示 変更
    • ページにも日付表示して、更新日が投稿日よりも新しいなら更新日を表示 変更
    • 幅が狭いとき用のメニューのアバターやカテゴリなど削除 変更
    • サイドバーを最初から表示 変更
    • サイドバーの設定アニメーションアイコンを普通のアイコンへ 削除
    • サイドバーに一番下へ移動アイコン追加 変更
  • jsカスタマイズ
    • cover設定していないのに画像が表示されるのを非表示へ 変更
  • 現時点のプラグインの問題 追加

2022-02-14

  • pugカスタマイズ
    • サイドバーに一番下へ移動アイコン追加 変更

2022-02-16

  • 環境
    • Node.js 16.14.0へ
    • Butterfly 4.1.0へ
  • 日本語の言語ファイル
    • 言語ファイル作成 変更
  • pugカスタマイズ
    • サイドバーに一番下へ移動アイコン追加 変更

2022-04-03

  • 環境
    • Node.js 16.14.2へ
    • Hexo 6.1.0へ
  • 現時点のプラグインの問題 変更

2022-05-28

  • 環境
    • Node.js 16.15.0へ
    • Hexo 6.2.0へ
  • 現時点のプラグインの問題
    • hexo-algoliasearch 変更

2022-07-02

  • 環境
    • Node.js 16.15.1へ
    • Butterfly 4.3.1へ
  • jsカスタマイズ
    • Algoliaの検索結果の本文文字数を変更 追加
  • 現時点のプラグインの問題
    • hexo-algoliasearch 削除

2022-07-07

  • pugカスタマイズ
    • 投稿記事とページはtocありの2カラムで他は1カラム 変更
    • 幅が狭いとき用のメニューのアバターやカテゴリなど削除 変更