前回、Hexo の インストールと ブログの作成をしたので、今回は、ブログのテーマを「material」に変更します。
material テーマは、Google が推奨する マテリアルデザイン に 準拠したテーマ となっており、とっても親和性が高く作られています。
Google が推奨しているだけあって、画面レイアウトが考え抜かれており、ユーザビリティ がよく出来ていると思います。
はじめに
material テーマ をダウンロードする
github から 安定版の 1.5.6 をダウンロードします。
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 テーマ は、とってもオシャレで実用的だと思います。
デモページを公開したので、実際に見てみるとよく分かるかもしれません。
