Hexo のテーマを「material」にする

前回、Hexo のインストールとブログの作成をしたので、今回は、ブログのテーマを「material」に変更します。

material テーマは、Google が推奨するマテリアルデザインに準拠したテーマとなっており、とっても親和性が高く作られています。

Google が推奨しているだけあって、画面レイアウトが考え抜かれており、ユーザビリティがよく出来ていると思います。

はじめに
1. material テーマをダウンロードする
material テーマを適応する
1. material テーマを読み込む
2. material テーマの config 作成
確認
1. ローカルサーバで確認
material テーマのエラー修正
おわりに

はじめに

material テーマをダウンロードする

github から安定版の 1.5.6 をダウンロードします。

bolnh/hexo-theme-material

Material Design theme for hexo. Contribute to bolnh/hexo-theme-material development by creating an account on GitHub.

material テーマを適応する

ダウンロードが終わったら解凍をして、hexo で作った blog の themes フォルダに入れます。

material テーマを読み込む

次に、material テーマを読み込むように修正します。

blog フォルダ内の「_config.yml」をテキストエディタで開き、theme を material に変更します。

ちなみに theme 名は、フォルダ名と同じにして下さい。

material フォルダが「hexo-theme-material」の場合は「theme: hexo-theme-material」となります。

material テーマの config 作成

次に、material テーマフォルダ内の「_config.template.yml」を「_config.yml」にリネームします。

確認

ここまで出来たら、実際にローカルサーバを立ち上げて、ブラウザで確認します。

ローカルサーバで確認

色々、やり方がありますが、一番簡単な方法を説明します。

まず、hexo の blog フォルダ内で「Shift」キーを押したままマウスの右クリックをして「PowerShell ウィンドウをここで開く」を選択します。

次に、開いた PowerShell に下記コマンドを打つと、ローカルサーバが立ち上がります。

hexo server

ブラウザで「http://localhost:4000」にアクセスしたら、hexo で作っているブログが確認出来ます。

material テーマのエラー修正

普通のテーマだと、ここまででやれば確認が出来るのですが、material テーマはエラーが出て確認出来ません。

ERROR Render HTML failed: index.html
TypeError: D:\Hexo\blog\themes\material\layout\layout.ejs:3
    1| <!DOCTYPE html>
    2| <html style="display: none;" <% if(config.language !== null) { %>lang="<%- config.language.substring(0,2) %>"<% } %>>
 >> 3|     <%- partial('_partial/head') %>
    4|
    5|     <% if(page.layout === 'gallery') { %>
    6|         <!-- Single Gallery Page -->

D:\Hexo\blog\themes\material\layout\_partial\head.ejs:22
    20|
    21|     <!-- dns prefetch -->
 >> 22|     <%- partial('_widget/dnsprefetch') %>
    23|
    24|     <!-- Meta & Info -->
    25|     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

D:\Hexo\blog\themes\material\layout\_widget\dnsprefetch.ejs:2
    1| <meta http-equiv="x-dns-prefetch-control" content="on">
 >> 2| <% if(theme.vendors.materialcdn) { %>
    3|     <link rel="dns-prefetch" href="<%= theme.vendors.materialcdn %>"/>
    4| <% } %>
    5| <% if( (theme.leancloud.enable === true) || (theme.comment.use == "valine") ) { %>

material テーマの github に修正箇所が書いてあるので修正します。

「\material\layout\_widget\dnsprefetch.ejs」を開いて、下記を検索します。

<% } else if(theme.comment.use.startsWith("disqus")) { %>

見つかった箇所を、下記に修正します。

<% } else if(theme.comment.use && theme.comment.use.startsWith("disqus")) { %>

保存して、再度ローカルサーバを立ち上げれば問題なく動くようになります。

おわりに

material テーマは、とってもオシャレで実用的だと思います。

デモページを公開したので、実際に見てみるとよく分かるかもしれません。

はじめに

material テーマ をダウンロードする

material テーマ を適応する

material テーマ を読み込む

material テーマ の config 作成

確認