Hugo テーマ 1. はじめに

連載「Hugo テーマ」を行う背景とその方針を説明します。

背景

Hugo ではコンテンツとテーマが明確に分かれており、テーマはサイトの見た目を定義するうえで重要な仕組みです。

できることが多い反面、ディレクトリーの構造や役割、記述の仕方を理解していないと、どこから手を付けてよいか迷うことがあります。

Hugo Themes ☐↗ にはたくさんのテーマが公開されています。
いちからテーマを作成する以外にも、ここから自身のサイトに合うものを選んで使用できます。
さらには、気に入ったテーマをカスタマイズすることで、より洗練されたテーマにできます。(ライセンスには気を付けないといけません)

ただし公開されているテーマをカスタマイズするにしても、正しくテーマの構造を知ることが重要です。

方針

この連載では、このサイト向けに作っている (現在進行形) テーマを作る過程で学んだ内容を中心に、Hugo のテーマ作成に関する知識を説明していきます。

いちからテーマを作成する流れを解説しつつ、場合によっては詳細なカスタマイズ例を紹介します。 テーマ作成の助けになることを目的としています。

Warning

テーマ作成のすべての要素に触れるわけではありません。
また、実装した機能のうち、その一部を題材として説明をしていきます。

(かつてこのサイトで公開していた記事を、最近の Hugo の仕様に合わせて編集しなおしたものです)

内容

2. まずはテーマを作ってみる
3. 作成されたファイルの説明
4. page.html を編集する
5. section.html を編集する
6. home.html を編集する
7. baseof.html 編集する

サイトの見た目に関する部分よりも、ディレクトリー構造やテンプレートの内容を重視しています。 これらはHugo のテーマを作るうえで重要な構成要素です。

その他、知っているとよりよく理解できそうな事柄

テーマとは

Hugo のドキュメントには以下のように定義されています。

theme

A theme is a module that delivers a complete set of components defining a site’s layout, presentation, and behavior. While every theme is a module, not every module is a theme.

引用元: Glossary ☐↗ (太字は引用者によるものです)

コンポーネントとは何かということが分かれば「どういったものを作ればテーマが出来上がるのか」が分かりそうです。

コンポーネントとは

これも Hugo のドキュメントには以下のように定義されています。 最初の英文はさておき、表を見てください。

component

A component is a collection of related files, housed within the unified file system, that fulfills a specific function in building a Hugo project. These components are categorized into seven types: archetypes, assets, content, data, templates, translation tables, and static files, and can be defined within the project or provided by modules. Each component has a dedicated directory within the unified file system:

Component	用途	Directory within the unified file system
archetypes	コンテンツのひな形	archetypes
assets	js, css 等。asset pipeline ☐↗ での処理向け	assets
content	コンテンツ	content
data	CSV等、レイアウトを駆使して表示するデータ	data
templates	レイアウトの定義	layouts
translation tables	語句の翻訳(対応表)	i18n
static files	変換後の public にコピーされるファイル	static

引用元: Glossary ☐↗ (太字は引用者によるものです。用途列も引用者により追加されています)

テーマ作成において手を入れるのは主に layouts の部分になります。 この連載でも、大部分をこの layouts の部分に費やします。

unified file system とは

上の引用で出てきた “unified file system” についてです。 (とはいっても、私はざっくりとしか理解していませんが…)

hugo コマンドでサイトを生成する際、テーマが提供する上記のファイルとプロジェクトで作成したファイルが ディレクトリーごとに混ぜられ最終的な成果物のもととして使われる、ということを言っています。

なのでたとえばテーマが content を定義していた場合、プロジェクトの content に混ざって公開されることになります。

また、複数のテーマを使った場合 (そういうことが可能なんです) は、互いの内容が優先順位に基づいて適用されることになります。