前回、Hexo の インストールと ブログの作成をしたので、今回は、ブログのテーマを「material」に変更します。
material テーマは、Google が推奨する マテリアルデザイン に 準拠したテーマ となっており、とっても親和性が高く作られています。
Google が推奨しているだけあって、画面レイアウトが考え抜かれており、ユーザビリティ がよく出来ていると思います。
はじめに
material テーマ をダウンロードする
github から 安定版の 1.5.6 をダウンロードします。
https://github.com/viosey/hexo-theme-material/releases/tag/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 に 下記コマンドを打つと、ローカルサーバが立ち上がります。
1 | hexo server |
ブラウザで「http://localhost:4000」にアクセスしたら、hexo で作っているブログが確認出来ます。
material テーマ のエラー修正
普通のテーマだと、ここまででやれば確認が出来るのですが、material テーマ はエラーが出て確認出来ません。
1 | ERROR Render HTML failed: index.html |
material テーマ の github に修正箇所が書いてあるので修正します。
「\material\layout\_widget\dnsprefetch.ejs」を開いて、下記を検索します。
1 | <% } else if(theme.comment.use.startsWith("disqus")) { %> |
見つかった箇所を、下記に修正します。
1 | <% } else if(theme.comment.use && theme.comment.use.startsWith("disqus")) { %> |
保存して、再度ローカルサーバを立ち上げれば問題なく動くようになります。
おわりに
material テーマ は、とってもオシャレで実用的だと思います。
デモページを公開したので、実際に見てみるとよく分かるかもしれません。