作ったものとか » Hugo テーマ

Hugo テーマ 0. 作成について

2021-10-24 15:59:05 hugo

Hugoのサイトにあるテーマ作成についての文書(Create a Theme ☐↗ , Templates ☐↗ の中)から、ポイントとなるであろう箇所を拾い出していきます。

Create a Theme

hugo new theme

すでにサイトが作ってある状態で次のコマンドを実行すると、themes ディレクトリ内に、空のテーマディレクトリが作成されます。 (サブディレクトリもファイルも作られてはいるが、中身は 0bytes)

hugo new theme [name]

Theme Components

Hugo チームからのお願い

hugo.Generator を作成したサイトやテーマの中に記述してくださいね、と言っています。 これは、Hugo のコアチームが Hugo がどのくらい使われているかといったことを知る手がかりになるようです。

Layouts

Hugo では、Web サイトの表示のされ方を次の2種類としています。

「通常のレイアウト」の範疇として収まる記述であれば上記の _default に記載し、中身の種類等で特別扱いをしたいものが増えた場合に、種類ごとのレイアウトファイルを足して行くというのが良いようです。

Partial Templates

partial templates ☐↗ にある機能を使うことが推奨されているようです。

Static

static ディレクトリにあるものは、成果物となるサイトの中にコピーされます。 このディレクトリ内の構造は規定されていないので、好きなようにディレクトリ構造を考えてね、とのこと。

Archetypes

テーマに必要なキーを front matter に追加したい場合は、テーマごとに archetype を定義することもできるようです。

Templates

特に list レイアウトが採用される基準が分かりづらかったこともあり、どのようなテンプレートがあるのか整理しました。

もととしたのは、Templates ☐↗ です。

Introduction to Hugo Templating

Introduction to Hugo Templating ☐↗

Goのテンプレートの仕組みに従うよ、ということのようですね。

よく使うであろう構文が Hugo での変数を使った例とともに説明されていますので、一読しておいて損はないかと思います。

Hugo’s Lookup Order

Hugo’s Lookup Order ☐↗

single レイアウトのテンプレートを決定するルールが、実例とともに説明されています。

Custom Output Formats

Custom Output Formats ☐↗

HTML とは異なる種類の出力をする場合の設定方法とか、かな？ とりあえず現時点では不要な情報なので、無視。

Base Templates and Blocks

Base Templates and Blocks ☐↗

Base テンプレートとして、ページの大枠の構造を定義しておき、その中で各部を block として定義しておく。 すると、Base テンプレートを使う他のテンプレートからは、Base テンプレートの大枠を使いつつも、block の中身を差し替える事ができます。

Base テンプレートは、baseof.html という名前。

Base テンプレートでは、共通で使う CSS, JavaScript の参照やら共通のタグの埋め込みをしつつ、single や list といったレイアウトごとに変えられる部分を定義していくことになるのでしょうね。

Lists of Content in Hugo

Lists of Content in Hugo ☐↗

ページの集合を扱う場合のレイアウトについて記載してあります。

個別にどういった集合があるかは、次のページに記載されています。

_index.md

_index.md は list タイプのテンプレートが適用されます。 _index.md は必須ではありません。

_index.md は single タイプのページ生成の対象外です。

.Data.Pages でリストの内容を取得

その list タイプのテンプレートが対象としている個々のページの情報は、テンプレートでは .Data.Pages で参照します。

Homepage Template

Homepage Template ☐↗

Web サイトのホームページは他のページとは異なる作りになることが多いため、Homepage Template として独立させたようです。

テンプレートとしては不要なのでは

個人的には、テンプレートとして個別のサイトの事情があるホームページについてのテンプレートを作る必要があるのかについては懐疑的です。

サイト個別にホームページのレイアウトを変えたい場合は list.html をコピーして改変してもらった方が良いように思います。

その方が、テンプレートを作る側としては、個別の事情を慮ってレイアウトを考えなくても良いので、作るのを躊躇することも減るでしょう。 利用する側としても、テンプレートが必要最低限の機能（テンプレート）を提供していれば、それを流用することが楽になります。

ルックアップ順序

テンプレートを作る上では、次の順序です。

  1. /themes/<THEME>/layouts/index.html
  2. /themes/<THEME>/layouts/_default/list.html

Homepage の内容について

list タイプのテンプレートのため、利用側のサイトの方で content/_index.md が作ってあれば、テンプレート中で .Page として参照することができます。

.Data.Pages は、サイト内の全てのページ

Section Page Templates

Section Page Templates ☐↗

要は、content ディレクトリ直下のディレクトリのこと。

ルックアップ順序

テンプレートを作る上では、次の順序です。

  1. /themes/<THEME>/layouts/section/<SECTION>.html
  2. /themes/<THEME>/layouts/<SECTION>/list.html
  3. /themes/<THEME>/layouts/_default/section.html
  4. /themes/<THEME>/layouts/_default/list.html

Taxonomy List Templates

Taxonomy Templates ☐↗

Taxonomy について

Taxonomy については、Taxonomies ☐↗ を見るのが良いです。

その中の Movie Taxonomy Organization の例を転記します。

Actor                    <- Taxonomy
Bruce Willis         <- Term
    The Sixth Sense    <- Content
    Unbreakable      <- Content
    Moonrise Kingdom <- Content
Samuel L. Jackson    <- Term
    Unbreakable      <- Content
    The Avengers     <- Content
    xXx              <- Content

Taxonomy List Templates は、taxonomy term に紐付いたページのリストを対象としています。

ですので、上例の Bruece Willis について、 The Sixth Sense や Unbreakable をリスト表示するものです。

ルックアップ順序

テンプレートを作る上では、次の順序です。

  1. /themes/<THEME>/layouts/taxonomy/<SINGULAR>.html
  2. /themes/<THEME>/layouts/_default/taxonomy.html
  3. /themes/<THEME>/layouts/_default/list.html

Taxonomy Terms Templates

Taxonomy Terms Template ☐↗

上例の Actor について、 Bruce Willis や Samuel L. Jackson をリスト表示するものです。

ルックアップ順序

テンプレートを作る上では、次の順序です。

  1. /themes/<THEME>/layouts/taxonomy/<SINGULAR>.terms.html
  2. /themes/<THEME>/layouts/_default/terms.html

Note: 最終的にサイトの layouts ディレクトリを含めて、上記のテンプレートが見つからない場合、taxonomy terms ページは生成されません。

Single Page Templates

Single Page Templates ☐↗

個別の md の内容を表示するためのテンプレートです。

ルックアップ順序

テンプレートを作る上では、次の順序です。

  1. /themes/<THEME>/layouts/<TYPE>/<LAYOUT>.html
  2. /themes/<THEME>/layouts/<SECTION>/<LAYOUT>.html
  3. /themes/<THEME>/layouts/<TYPE>/single.html
  4. /themes/<THEME>/layouts/<SECTION>/single.html
  5. /themes/<THEME>/layouts/_default/single.html
» Hugo テーマ 1. single テンプレート »

Top: 作ったものとか
(C) 2017 Shuhei Kubota
Powered by Hugo