hexoのテーマを変更する

前回までのまとめ

前回、ビジネス書の記事は別のドメイン(サブドメイン)にした方がよいだろうということで、新しいhexoアプリケーションのベースを作成するところまで行いました。

前回のまとめで、次回はnginxの設定を行いたいと書きましたが、今回はhexoのテーマを何にするか決めたいと思います。

hexoのテーマ

デフォルトのテーマ

hexoのテーマはデフォルトでlandscapeというテーマになっています。

https://hexojs.github.io/hexo-theme-landscape/

このサイトもlandscapeを使っています。せっかくなのでなにか新しいテーマにチャレンジしたいと思います。

テーマを探す

hexoのテーマはどういうものがあるのでしょうか。こちらにテーマの一覧がありました。たくさんあって目移りしてしまいます…

TOPの一覧がカードタイプになっているテーマがよかったので、Gradientというテーマにしました。

テーマを設定する

テーマを設定するには

  1. テーマをインストールする
  2. _config.ymlでテーマを指定する

でできそうです。

テーマをインストールする

先ほどのリンクのREADME.mdにインストールの方法が書かれています。

1
2
3
4
5
6
7
8
9
10
11
$ cd themes
$ git clone https://github.com/DeepSpaceHarbor/Gradient
Cloning into 'Gradient'...
remote: Enumerating objects: 127, done.
remote: Counting objects: 100% (127/127), done.
remote: Compressing objects: 100% (70/70), done.
remote: Total 653 (delta 64), reused 69 (delta 28), pack-reused 526
Receiving objects: 100% (653/653), 5.46 MiB | 1.62 MiB/s, done.
Resolving deltas: 100% (329/329), done.
$ ls
Gradient landscape

こちらで完了です。

_config.ymlでテーマを指定する

インストールしたテーマを利用するように設定します。

1
2
3
4
5
6
$ pwd
/business_blog/themes
$ cd ..
$ ls
_config.yml node_modules package.json source yarn.lock
db.json package-lock.json scaffolds themes

アプリケーショントップにある_config.ymlを修正します。

1
2
3
4
5
$ vi _config.yml
98 # Extensions
99 ## Plugins: https://hexo.io/plugins/
100 ## Themes: https://hexo.io/themes/
101 theme: landscape

こちらのthemeをGradientに変更して保存します。

以上で設定は完了です。

動作確認

テーマが正しく反映されたかどうか動作確認をします。

1
2
3
4
$ npx hexo server
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

ブラウザでhttp://localhost:4000にアクセスします。

hexoのテーマ Gradient

ポインタが変わったりするんですね…ちょっと他のも検討してみようと思います…

他のテーマを試す

Aomoriというテーマが見た目シンプルでよいなと思って試してみました。

動作確認でエラー

インストールと設定はいつも通り行なって動作確認をしてみると

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
ERROR {
err: TypeError: /Users/user/github/business-book-reviews/business_blog/themes/aomori/layout/layout.ejs:20
18| <aside class="sidebar">
19| <% } %>
>> 20| <%- partial('_partial/sidebar') %>
21| </aside>
22| </div>
23| </div>

/Users/user/github/business-book-reviews/business_blog/themes/aomori/layout/_partial/sidebar.ejs:7
5|
6| <div class="widget" id="widget">
>> 7| <% config.aomori_widgets.forEach(function(widget){ %>
8| <%- partial('_widget/' + widget) %>
9| <% }) %>
10| </div>

Cannot read property 'forEach' of undefined
at eval (/Users/user/github/business-book-reviews/business_blog/themes/aomori/layout/_partial/sidebar.ejs:21:30)
at sidebar (/Users/user/github/business-book-reviews/business_blog/node_modules/ejs/lib/ejs.js:682:17)
at _View._compiledSync (/Users/user/github/business-book-reviews/business_blog/node_modules/hexo/lib/theme/view.js:132:24)
at _View.renderSync (/Users/user/github/business-book-reviews/business_blog/node_modules/hexo/lib/theme/view.js:59:25)
at Object.partial (/Users/user/github/business-book-reviews/business_blog/node_modules/hexo/lib/plugins/helper/partial.js:34:15)
at eval (/Users/user/github/business-book-reviews/business_blog/themes/aomori/layout/layout.ejs:28:17)
at layout (/Users/user/github/business-book-reviews/business_blog/node_modules/ejs/lib/ejs.js:682:17)
at _View._compiled (/Users/user/github/business-book-reviews/business_blog/node_modules/hexo/lib/theme/view.js:136:50)
at _View.render (/Users/user/github/business-book-reviews/business_blog/node_modules/hexo/lib/theme/view.js:39:17)
at /Users/user/github/business-book-reviews/business_blog/node_modules/hexo/lib/theme/view.js:51:25
at tryCatcher (/Users/user/github/business-book-reviews/business_blog/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/Users/user/github/business-book-reviews/business_blog/node_modules/bluebird/js/release/promise.js:547:31)
at Promise._settlePromise (/Users/user/github/business-book-reviews/business_blog/node_modules/bluebird/js/release/promise.js:604:18)
at Promise._settlePromise0 (/Users/user/github/business-book-reviews/business_blog/node_modules/bluebird/js/release/promise.js:649:10)
at Promise._settlePromises (/Users/user/github/business-book-reviews/business_blog/node_modules/bluebird/js/release/promise.js:729:18)
at _drainQueueStep (/Users/user/github/business-book-reviews/business_blog/node_modules/bluebird/js/release/async.js:93:12) {
path: '/Users/user/github/business-book-reviews/business_blog/themes/aomori/layout/layout.ejs'
}
} Render HTML failed: index.html

となって表示できません。エラーの内容を確認すると、Cannot read property 'forEach' of undefinedとなっていて、config.aomori_widgetsがundefinedになっているのが原因のようです。

エラーの修正

README.mdにあるようにthemes/_config.ymlaomori_widgetsを設定してみました。

1
2
3
4
5
6
aomori_widgets:
- toc # Article navigation
- category # Article classification
- tag # Article tags
- recent_posts # latest articles
- archive # Article Archive

しかし、エラーは消えません。READMEをよくみると、Configuration in the Global _config.ymlとなっていて、アプリケーション下の_config.ymlに設定しないといけないようです。

アプリケーション下の_config.ymlに設定してエラーはなくなりました。

hexoのテーマ aomori

しかし、テーマの設定でアプリケーション下の_config.ymlに設定するのは、よくない設計だと思います。

まとめと次回予告

いろいろテーマを探してみて、いろんなものがあるのだなぁと思いました。また、テーマの変更方法を理解することができました。

次回は今回疑問に思った各ディレクトリの_config.ymlの設定の違いについて調べたいと思います。