独自のテーマを作成する

Hugo では、ネット上に公開されているテンプレートが多くありますが、自分で独自のテーマを作成することもできます。ここでは、テーマの作成方法について少しずつ確認していきたいと思います。

テーマの雛形を作成する

テーマを作成するには、次のコマンドを実行して雛形を作成します。

c:\hugo> hugo new theme [テーマ名]

例えば、 blue2018 というテーマを作成する場合、次のようにコマンドを実行します。

c:\hugo\Sites\hoge_site> hugo new theme blue2018

themes ディレクトリの配下に blue2018 ディレクトリが作成され次のような雛形が作成されます。これらのディレクトリやファイルを使用してテーマを作成していきます。

themes\blue2018\
   ├── archetypes\
   │   └── default.md
   ├── layouts\
   │   ├── _default\
   │   │   ├── baseof.html
   │   │   ├── list.html
   │   │   └── single.html
   │   └── partials\
   │   │   ├── footer.html
   │   │   ├── head.html
   │   │   └── header.html
   │   ├── 404.html
   │   ├── index.html
   ├── static\
   │   ├── css\
   │   └── js\
   ├── LICENSE.md
   └── theme.toml

トップページのレイアウトを作成

テーマディレクトリの layouts\index.html は、サイトのトップページ用のテンプレートファイルになります。index.html ファイルに次のように追加してサイト名だけを表示するように修正してみます。

<h1>{{ .Site.Title }}</h1>

上記記述で、 .Site 変数の Title フィールドの値を出力することができます。 具体的には、サイト設定ファイル (config.toml) の title に設定した値に置き換わって出力されます。

思った通りの結果となるか、確認のためこの状態でサイトを表示してみます。

$ hugo server -t my-theme

コマンドを実行したらブラウザーから http://localhost:1313/ へアクセスしサイト設定ファイル (config.toml) の title に設定した値が表示されることを確認します。

ここから、自分に必要なレイアウトを作成していくことになりますが、今回はここまでとします。