Hugoで新しい自分のテーマを作る - new theme

自分のテーマを新しく作る

Hugoには既に公開されているテンプレートが多くあるが、自分で思いどおりにデザインしてテーマを作成することもできる。テーマを作成するには、まず次のコマンドで基本形式を作る。

$ hugo new theme {テーマ名}

たとえば、次のように実行するとthemes/my-themeディレクトリが作成される。

$ hugo new theme my-theme

生成されるファイルは次のようになっており、ディレクトリ構成は作られるが、ファイルの内容はほとんど空である。これらのファイルを基にテンプレートを作成する。

新しく作成されたテーマの形式

themes/my-theme
├── LICENSE   (MITライセンス)
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   └── partials
│       ├── footer.html
│       ├── head.html
│       └── header.html
├── static
│   ├── css
│   └── js
└── theme.toml (基本設定ファイル)

最初のページレイアウト(layouts/index.html)を作る

テーマディレクトリ内のlayouts/index.htmlファイルは、サイトの最初のページに対するテンプレートファイルである。1つのHTMLファイルだけで構成されたサイト(SPA: Single Page Application)を作成する場合、このファイルだけを作成すればよい。初期状態では何も記述されていないため、まずは起動時にサイト名だけを表示するよう修正してみる。

themes/my-theme/layouts/index.html

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

上記のように、サイト情報を保持する.Site変数のTitleフィールド値を出力できる。ここにはサイトの設定ファイル(config.toml)のtitleに設定した文字列が表示される。

ここまで作成したら、このテーマを使用してサイトを確認する。hugoコマンドと一緒に使用するテーマを指定するには、-t {テーマ名}オプションを使う。

$ hugo server -t my-theme

上記のようにHugoサーバーを起動した後、http://localhost:1313/ にアクセスして表示を確認できる。

図: 自分のテーマを使用した最初のページ

最初のページにすべてのページ一覧を表示する

最初のページのテンプレート(layouts/index.html)内で.Data.Pages変数を参照すると、すべてのページ情報(Page変数)を取得できる。この情報をrangeでループ処理すると、すべてのページへのリンクを出力できる。

themes/my-theme/layouts/index.html

<h1>{{ .Site.Title }}</h1>
<ul>
  {{ range .Data.Pages }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a> ({{ .Date.Format "2006-01-02" }})</li>
  {{ end }}
</ul>

各ページ用のレイアウトを作る(layouts/_default/single.html)

リンクされた各ページはlayouts/_default/single.htmlテンプレートファイルを基に生成されるため、このファイルをあらかじめ作成しておく必要がある。このテンプレート内ではPage変数のフィールドを参照できる。たとえば、.Titleでページタイトル、.Contentでページ本文を参照できる。

themes/my-theme/layouts/_default/single.html

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

{{ .Content }}

各ページの内容は、content/ディレクトリ内に次のような形で作成しておく。

content/page1.md

---
title: "Page1 Title"
date: "2017-09-10"
---

Page1 Content

上記のようにレイアウトファイルとコンテンツを作成しておくと、各ページの内容が次のように表示される。

図: 単一ページテンプレートで出力

以後は、同じようにlayoutsディレクトリ内のテンプレートコードを作成していけば、自分のテーマが完成する。Markdownファイルで使用できるショートコード(short codes)も、独自のテーマ部品(layouts/shortcodes)として提供できる。