iPhoneで Grafanaの グラフを 参照できる アプリ Grafanizerを 作ってます。 詳しくは こちらへ。

Layout of Hugo

Jun 2, 2016  
#hugo #customize

Hugoのテンプレート

テンプレートの仕組み

Hugoのテンプレートは内部的(タイプがNodeもしくはPageなのかの違い)に呼ばれるものが2つある。

  • single.html
  • list.html

保存場所についてはカスタマイズ用の layouts/_defaults/ が優先され、ない場合にはテーマが用意した theme/hogehoge/layouts/_defaults/ が利用される。
また、例えば layouts/post/simple.html を作成すると post セクションの個別表示のみレイアウトを変えるということも可能になる。

single.html

ポスト単位で表示されるコンテンツ表示用のテンプレート。
一番表示される機会が多いのはこのレイアウトになると思われる。

list.html

タグやセクション単位でのファイル一覧表示に利用されるテンプレート。
いわゆるホームページとなる /index.html もこのレイアウトを利用する。

ファイルの分割

適用されるテンプレートの選択になかなか自由度があるHugoだが、調子に乗ってテンプレートを作っていくと後から同じ修正を入れたくなった時等ちょっと面倒なことになる。
特に、統一感を出しながらページによっては微妙にレイアウトを変えたいと言う時に何も考えずに作ると痛い目にあうことは用意に想像できる。

ということで、このサイトでは以下のような作りにしてみた。

  • partial 機能を使って分割する(エディタ1画面文くらいに分割出来ると見通しが良い)
    • このサイトでは head.html, hdader.html, body.html, footer.html, google_analytics.html の感じで分割
  • body.htmlはHugoの変数を参照して3つの分割
    • とりあえず index.html, single.html, list.html に分けた
  • _defaults/single.html, _defaults/list.html の内容は同じにする
  • どのページも基本的な表示内容は同じにしておきレイアウトを変えたい時はjQueryなどのJSで対応する

body.html でsingle.htmlもしくはlist.htmlかを判断して読み込むテンプレートを制御することで、上位のテンプレートをsingle.htmlとlist.htmlで同じにしている。

個別のレイアウトを作りたい時は _defaults/ にある single.html, list.html をコピーし、修正についてはjQueryなどで調整する。

こうすることで間違ってコンテンツを調整することも無いし(急いでる時はアドホックに対応しちゃって後でなくパターンが多い)、全体の統一感を出しながら微調整することも出来る(逆に言うとjQueryで調整できないような変更は統一感を失うような内容と思われる)。

そうすることで、基本的な内容は layouts/partials/ にまとまるし、個別に修正をかけるsingle.html, list.htmlはシンプルなままでJSファイルへのリンク先を修正するだけで済ますことができる。

single.html, list.html

基本的にはHTMLの構造似あわせてheader部分とbody部分を呼んでるだけだが、必要に応じて調整用のJSも読み込む。

<!DOCTYPE html>
<html lang="{{.Site.LanguageCode}}">
<head>
{{ partial "head.html" . }}
</head>
<body>

{{ partial "body.html" . }}

<script src="{{ .Site.BaseURL }}js/hogehoge.js"></script>

</body>
</html>

body.html

実際に表示を切り替えるのはこのテンプレートで、以下の3つを切換えている。

  • トップページ(いわゆるホームページ用)のてプレート
  • 個別表示用のテンプレート
  • リスト表示用のテンプレート
<div class="container">

{{ partial "header.html" . }}

{{ if .IsHome}}                {{/* いわゆるホームページ用のテンプレート */}}
{{ partial "index.html" . }}
{{ else if .IsPage }}          {{/* 個別表示用のテンプレート */}}
{{ partial "single.html" . }}
{{ else if not .IsPage }}      {{/* リスト表示用のテンプレート */}}
{{ partial "list.html" . }}
{{ end }}

{{ partial "footer.html" . }}

</div>

{{ partial "google_analytics.html" . }}

ようやく仕組みが理解できたので当分はHugoで遊べそう。処理は速いしなかなかいい感じ。