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

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

環境

  • Windows10 64bit
  • Netlify
  • Node.js 18.16.0
  • Hexo 6.3.0
  • Butterfly 4.8.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の拡張機能のSurfingkeysのhit-a-hintでリンクが開けない。

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

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

ちなみに、 画像ポップアップ表示のFancyboxで、画像の上に表示されるアイコンはfだと反応しないですが、qだと反応します。

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

テーマフォルダ内にもGitファイルがあるのが原因。
テーマフォルダ内のGitのフォルダを削除してから試す。
C:\tools\hexo\themes\butterfly\.git

他にも対処方法があった気がしますが、覚えていない。
Git submodulesという仕組みでいいのだろうか?

テーマ自体をカスタマイズしているので、手動で更新することにします。

テーマ設定

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

中国語のサイトですが、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: コピー
  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:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: '${hits} results found'

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...
load_more: Load More

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

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

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

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

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

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
#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
#sidebar
  #menu-mask
  #sidebar-menus

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

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

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

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

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

一部変更

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

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

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

一部環境では、最後へ移動はアニメーション移動ではなくアニメーションなしの移動になると思いますが、これでいいことにします。

最後へアイコン追加

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

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

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カスタマイズ

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

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

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行ぐらいでいいかなと。

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

検索結果数は78行目で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カラム 変更
    • 幅が狭いとき用のメニューのアバターやカテゴリなど削除 変更

2022-11-09

  • 環境
    • Node.js 18.12.1へ
    • Hexo 6.3.0へ
    • Butterfly 4.5.1へ
  • インストールしたテーマフォルダがGit管理対象にならない 変更
  • pugカスタマイズ
    • 投稿記事とページはtocありの2カラムで他は1カラム 変更

2023-01-27

  • 環境
    • Node.js 18.13.0へ
    • Butterfly 4.6.1へ
  • 日本語の言語ファイル > 言語ファイルへ
  • 言語ファイル作成 > 日本語の言語ファイル作成へ
  • jsカスタマイズ
    • cover設定していないのに画像が表示されるのを非表示へ 削除

2023-05-03

  • 環境
    • Node.js 18.16.0へ
    • Butterfly 4.8.1へ
  • 個人的に困るところ 変更
  • 言語ファイル
    • 日本語の言語ファイル作成 変更