hexoのテーマを変更する

前回までのまとめ

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

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

hexoのテーマ

デフォルトのテーマ

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

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

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

テーマを探す

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

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

テーマを設定する

テーマを設定するには

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

でできそうです。

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

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

$ 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でテーマを指定する

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

$ pwd
/business_blog/themes
$ cd ..
$ ls
_config.yml             node_modules            package.json            source                  yarn.lock
db.json                 package-lock.json       scaffolds               themes

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

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

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

以上で設定は完了です。

動作確認

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

$ 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というテーマが見た目シンプルでよいなと思って試してみました。

動作確認でエラー

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

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を設定してみました。

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の設定の違いについて調べたいと思います。