前回までのまとめ
前回、ビジネス書の記事は別のドメイン（サブドメイン）にした方がよいだろうということで、新しいhexoアプリケーションのベースを作成するところまで行いました。
前回のまとめで、次回はnginxの設定を行いたいと書きましたが、今回はhexoのテーマを何にするか決めたいと思います。
hexoのテーマ
デフォルトのテーマ
hexoのテーマはデフォルトでlandscapeというテーマになっています。
https://hexojs.github.io/hexo-theme-landscape/
このサイトもlandscapeを使っています。せっかくなのでなにか新しいテーマにチャレンジしたいと思います。
テーマを探す
hexoのテーマはどういうものがあるのでしょうか。こちらにテーマの一覧がありました。たくさんあって目移りしてしまいます…
TOPの一覧がカードタイプになっているテーマがよかったので、Gradientというテーマにしました。
テーマを設定する
テーマを設定するには
- テーマをインストールする
- _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にアクセスします。
ポインタが変わったりするんですね…ちょっと他のも検討してみようと思います…
他のテーマを試す
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.ymlにaomori_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に設定してエラーはなくなりました。
しかし、テーマの設定でアプリケーション下の_config.ymlに設定するのは、よくない設計だと思います。
まとめと次回予告
いろいろテーマを探してみて、いろんなものがあるのだなぁと思いました。また、テーマの変更方法を理解することができました。
次回は今回疑問に思った各ディレクトリの_config.ymlの設定の違いについて調べたいと思います。