Hexo のテーマを自作する

generator-hexo-theme ブログ制作

Hexo のテーマを自作していきたいと思います。

といっても、新規テーマを作ってスタイルを整えるだけのやっつけお仕事です。

私には大層なスキルがないのでこれぐらいしか出来ないですが、よろしくお願い致します。

はじめに

今回は、Hexo の新規テーマをジェネレートしてくれる パッケージ を使います。

generator-hexo-theme

tcrowe/generator-hexo-theme
Generate a hexo theme: ejs, pug, swig, nunjucks | Moved to - tcrowe/generator-hexo-theme

色々なオプションが用意されており、自分にあった新規テーマを作ってくれます。

Hexo は事前に用意しておいて下さい。

私は、何も手を加えていない出来たての Hexo を用意しました。

Hexo

パッケージを入れる

新規テーマをジェネレートしてくれる パッケージ を入れます。

npm install --global yo
npm install --global generator-hexo-theme

新規テーマをジェネレートする

テーマフォルダ に 新規テーマフォルダ を作って 下記コマンドを実行します。

yo hexo-theme

オプションを聞かれますので、自分が使いやすい設定にしましょう。

  • What is the theme name?:テーマの名前を入力します。
  • Which template language to use?:テンプレート言語を選択します。私は Javascript で書きたいため ejs を選択しました。
  • Which stylesheet language to use?:スタイルシート言語を選択します。私は複雑なスタイルが作れないので css を選択しました。
  • Other technical features:その他の設定。特にチェック無いです。

これだけで、新規テーマフォルダ に 必要最低限のテーマファイルが追加されます。

yo hexo-theme 実行

動作確認

新規テーマ を適応して動作確認をします。

_config.yml の theme を 今作った新規テーマ に書き換えて実行します。

_config.yml の theme を修正

この通り、何もスタイルが設定されていない新規テーマが表示されます。

generator-hexo-theme

おわりに

次回は、この何もない新規テーマにスタイルを適応して見栄えを良くして行こうと思います。

タイトルとURLをコピーしました