Computing Atman
Hexo | マテリアル（material）テーマの適用・設定方法
🌸

Hexo | マテリアル（material）テーマの適用・設定方法

Hexo に マテリアルテーマを適用する方法

2023/03/04
Hexo

ブログをWordpressからHexoに変更し、material テーマを適用しました。
material テーマは、Gogleが推奨しているマテリアルデザインをベースとした美しいデザインです。

HexoはテーマをGithubからダウンロードして実装しますが、material テーマにはバグが残っており、そのまま利用する事が出来ませんでした。

今回、material テーマ適用に必要な修正版のテーマファイル提供と設定手順を記載しておきます。

image

前提

  • OS:Windows

Hexo環境構築

Node.jsをインストール

Hexoをインストールするための npmコマンド を使えるようにする必要があります。
そのために、まずはNode.jsをインストールします。

下記リンク先から Node.jsをダウンロード して下さい。

https://nodejs.org/ja/

次に、ダウンロードしたWindows Installer(.msi)をダブルクリックしてインストールします。

Hexoをインストール

コマンドプロンプトで以下を実行します。

npm install hexo-cli -g

これで、Hexoのインストール完了です。

Hexoの環境構築

Hexo用のディレクトリ（フォルダ）を準備します。
例として「C:\hexo-blog」をHexo用ディレクトリとします。

コマンドプロンプトでinitを実行し、サイト用のフォルダを生成します。

npx hexo init Hexo用ディレクトリ
 
例）
npx hexo init C:\hexo-blog

cd Hexo用ディレクトリで移動し、

npm install

Hexoブログ用の各種ディレクトリが生成されていれば完了です。

material テーマ環境構築

material テーマをダウンロード

オリジナルはバグが残っていますので、修正版をダウンロードして下さい。

↓修正版
https://github.com/atman-33/hexo-theme-material

Code > Download ZIP でzipファイルをダウンロードします。
image

ダウンロードが完了すれば、zipを解凍し、中身をHexo用ディレクトリ直下のthemes/materialフォルダに格納します。

Hexo用ディレクトリ\
|-themes\
   |-material\
      ↑この中にzipファイルの中身が保存されていればOK

image

material テーマを設定

次に、material テーマ を読み込むように修正します。
Hexo用ディレクトリ内の「_config.yml」を テキストエディタ で開き、theme を material に変更します。

▼Hexo用ディレクトリ/_config.yml
image

この時点でHexoブログをローカルサーバーで確認可能です。
確認するには、コマンドプロンプトで以下を実行します。

cd Hexo用ディレクトリ
hexo server -g

ブラウザでURLに「http://localhost:4000」を入力すれば、Hexoブログを確認できます。

Hexo/material の config 設定

Hexo 及び material テーマは初期設定のままでは扱い辛いため、設定を変更します。

Hexo用ディレクトリ内には、2つの_config.ymlファイルが存在します。
説明時にどちらの_config.ymlを示しているのか明確にするため、ここからは以下の名称で記載する事とします。

  • ①ルート_config.yml
  • ②テーマ_config.yml
Hexo用ディレクトリ\
|-_config.ml・・・①ルート_config.yml
|-themes\
   |-material
      |-_config.yml・・・②テーマ_config.yml

言語設定

Hexo用ディレクトリから、テキストエディタで ルート_config.yml ファイルの language プロパティを設定します。

▼ルート_config.yml
image

language を ja にして、日本語にします。

記事に対応した画像保存用フォルダ

ルート_config.yml の post_asset_folder の値を変更しておきます。

post_asset_folder: true

post_asset_folder の値を true にすると、_postフォルダ直下に新規記事作成時に記事に対応したフォルダが自動的に生成されます。
記事で使用する画像を、そのフォルダに保存しておけば、記事中に参照する事が可能です。

▼記事内でassetフォルダの画像を読み込む場合の記述

{% asset_img 画像ファイル名.jpg %}

ブログのアイコン・画像

ここからは、テーマ_configy.ymlを設定していきます。
ブログのアイコンや画像は以下の部分で設定しています。

▼テーマ_config.yml
image

▼テーマ_config.yml
image

参照元の画像ファイル置場は下記にありますので、必要に応じて修正します。
Hexo用\themes\material\source\img

SEOを最適化

この設定を有効にすると、構造化データがページのヘッダーに生成され、Google などの検索エンジンの SEO を改善するのに役立ちます。
ただし、hexo g に 問題がある場合は false に設定してみてください。

▼テーマ_config.yml
image

スローガンと背景色

スローガン（トップページの概要文）と背景色は下記から設定します。

▼テーマ_config.yml
image

ページのJavaScriptエフェクト

▼テーマ_config.yml
image

投稿ページ要旨の単語数

▼テーマ_config.yml
image

投稿ページのサムネイル

material テーマは 19 枚のシンプルな画像が準備されています。投稿ページにサムネイルが定義されていない場合、テーマはランダムフォルダ（ディレクトリ\themes\material\source\img\random）からランダムに写真を選択します。

ランダムに表示する画像数は下記から設定します。

▼テーマ_config.yml
image

投稿ページにサムネイルを設定する場合は、投稿ページのmdファイルの上部にthumbnailを設定すればOKです。
サンプルは下記となります。

▼投稿ページのファイル.md
image

上記の例では、「Hexo用ディレクトリ\themes\material\source\img\thumbnails」フォルダを作成し、そこに保存したファイルをサムネイルとして利用しています。

フォント

フォントは、初期設定だと日本語の見栄えが良くなかったため、下記のように変更しました。

▼テーマ_config.yml
image

コードブロックの強調表示

material テーマは、2 種類のコードの強調表示を提供しています。

  • prettify
  • hanabi

上記を有効にするには、ルート_config.yml 内のコードの強調表示をオフにする必要があります。
（そうしなければ競合してしまいます。）

以下は、habani の設定例です。

▼ルート_config.yml
image

▼テーマ_config.yml
image

hanabi 表示効果のサンプルを載せてきます。
image

SNS設定

必要無いリンクは空白でOKです。

▼テーマ_config.yml
image

サイドバー設定

サイドバーをカスタマイズします。

▼テーマ_config.yml
image

この設定の場合、下記のように表示されます。

image

アイコンは、Google の Material Icon を利用しています。
↓
https://fonts.google.com/icons?icon.set=Material+Icons

利用したいアイコンを見つけて、サイドバーの「icon: ココ」に設定して下さい。

※Google の material icon が全て利用できるわけではなく、表示が反映されないアイコンもありますのでご注意下さい。理由は不明です。

サイドバーの「タグ」・「リンク」・「問い合わせ」は専用のページを作成する必要があります。方法は後述します。

タグページ作成

▼テーマ_config.yml
image

コマンドプロンプトを開き、Hexo用ディレクトリに移動して、以下のように入力します。

▼コマンドプロンプト

cd Hexo用ディレクトリ
hexo new page "tags"

Hexo用ディレクトリ\source\tags フォルダ内の index.md ファイルを、以下のように編集します。

▼Hexo用ディレクトリ\source\tags\index.md

---
title: tags
date: 2023-02-26 15:50:54
layout: tags
---

layout: tags が必須です。

リンクページ作成

▼テーマ_config.yml
image

コマンドプロンプトを開き、Hexo用ディレクトリに移動して、以下のように入力します。

▼コマンドプロンプト

cd Hexo用ディレクトリ
hexo new page "links"

Hexo用ディレクトリ\source\links フォルダ内の index.md ファイルを、以下のように編集します。

▼Hexo用ディレクトリ\source\links\index.md

---
title: links
date: 2023-02-27 18:03:34
layout: links
---

layout: links が必須です。

また、Hexo用ディレクトリ\source フォルダ内に「_data」フォルダ を作成し、その直下に「links.yml」ファイルを作成して編集します。

編集内容のサンプルは下記となります。リンクを複数に増やす場合は、続けて記載していけばOKです。

▼Hexo用ディレクトリ\source\_data\links.yml

Github atman-33: 
    link: https://github.com/atman-33
    avatar: https://avatars.githubusercontent.com/u/41929192?v=4
    descr: "Github トップページ"
 
Google Material Icons: 
    link: https://fonts.google.com/icons?icon.set=Material+Icons
    avatar: https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg
    descr: "Google マテリアルアイコン"

問い合わせページ作成

▼テーマ_config.yml
image

コマンドプロンプトを開き、Hexo用ディレクトリに移動して、以下のように入力します。

▼コマンドプロンプト

cd Hexo用ディレクトリ
hexo new page "about"

Hexo用ディレクトリ\source\about フォルダ内の index.md ファイルを編集します。

▼Hexo用ディレクトリ\source\about\index.md

---
title: 問い合わせ
date: 2023-02-27 18:14:12
---
 
ご閲覧頂きありがとうございます。
 
質問・要望などありましたら、Twitterで連絡ください。
 
※ここにTwitterのURLなど

このページは、通常の固定ページです。
そこにTwitterなどのURLを掲載すれば、問合せ先として利用可能です。

以上です。