Hugo を使った個人サイトの作り方 6 固定ページの作成(1) List Template

tech 1726字：読了まで約3分11秒

Hugo アイキャッチ画像

前回まででトップページが完成しました。（このシリーズではHTMLとCSSについては除外しているので早く進みますね！）今回は「about」などの固定ページを作成していくつもりです。ブログなどでも「about」ページを作りたい場合はあると思います。

固定ページについては、HUGOで固定ページを作成する - GammaLab にて詳しい説明がされていますが、自分でやり方を忘れてしまうので、ここで確認していきます。

固定ページフラグの追加

参考サイトの解説を繰り返すと、

  1. Branch bandles ./content/[section]/_index.mdを作成する。
  2. _index.mdのFront Matterに固定ページフラグを追加する。
  3. List Templateの出力を、固定ページの場合とそれ以外とで分岐させる。
  4. 固定ページの内容は_index.mdに書く。

という手順になります。ほか、Leaf bandlesを用いる方法やテンプレート呼び出し順序に従って個々のテンプレートを作る方法（数が多そう）などもあると思いますが、今回はこのフローに従って作業をしていきます。例については、二次創作小説の目録ページを使おうと思います。 オタな単語とか出てきちゃってNSFWなんですけど、使っている機能の関係でaboutとかを例に取れないのでごめんなさい。

まず、二次創作小説の目録ページを./content/niji/_index.mdに作成します。（※間違えてアンダーバーなしのindex.mdにしないように。子階層を持てません） そしてFront Matterを記入していきます。

二次創作小説目録ページのソースコード[hugo-nijisource.jpg(158434byte)]

青枠内部がFront Matterです。ここに、

fixed : "true"
_build:
  list:never

を追記していきます。fixedは他の名前をつけても平気です。_buildオプションのlist:neverについては、固定ページがページネーションに含まれないための設定です。

List Templateの編集

次にList Templateの編集を行います。Hugoのテンプレート呼び出し順序では、./content/[section]/_index.mdの出力はHugo’s Lookup Order | Hugoに示されています。この順序に従って沢山の専用テンプレートを作ることも可能ですが、ここはList Templateに一括してしまいましょう。List templateは/themes/[yourtheme]/layouts/_default/list.htmlにあります。

条件分岐にはif文を使います。ざっくり大枠を説明すると以下のようになります。

 1{{/* fixedパラメータでの条件分岐 */}}
 2{{if .Params.fixed }}
 3  <main>
 4  {{/* fixed=trueならmarkdownで書かれたコンテンツを表示 */}}
 5  {{ .Content }}
 6  </main>}
 7{{- else }}
 8{{/* それ以外はリスト表示 */}}
 9  <main>
10{{/* リスト処理 */}}
11  </main>
12{{ end }}

二重ブラケットの内側についている-はスペース・改行のトリムです。

実際の例

ここで実際の例を見ます。手前味噌ですが私のlist Templateは以下のようになっています。共通部分やページングでごちゃついていますが先の例の大枠が組み込まれています。

/themes/Museum/layouts/_default/list.html

 1{{/* 共通部分 */}}
 2<!DOCTYPE html>
 3<html lang="{{.Site.LanguageCode}}">
 4{{ partial "headrobo.html" . }}
 5<body>
 6{{ partial "mobilenavi.html" .}}
 7{{ partial "header.html" .}}
 8{{/* fixedパラメータでの条件分岐 */}}
 9{{ if .Params.fixed }}
10{{/* fixed=trueならmarkdownで書かれたコンテンツを表示 */}}
11<main>
12{{ .Content }}
13</main>
14{{ else }}
15{{/* それ以外はリスト表示 */}}
16<main>
17<h1>{{ .Title }}</h1>
18{{ range .Paginator.Pages }}
19 <article class="listingarticles">
20  <h2><a href="{{- .Permalink }}">{{.Title}}</a></h2>
21  <div class="post-meta">
22   <p>
23   <time pubdate="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time>
24    {{- partial "coloredcategories.html" . }}
25   {{- if .Params.tags }}
26    {{ with .Params.tags }}<i class="fa-solid fa-tag"></i>{{ range . }} <a href="/tags/{{ lower . }}/" class="tags tag-{{ . }}">#{{ . }}</a>{{ end }}{{ end }}
27   {{- end }}
28   </p>
29{{- $readTime := mul (div (countwords .Content) 540.0) 60 -}}
30{{- $minutes := math.Floor (div $readTime 60) -}}
31{{- $seconds := mod $readTime 60 -}}
32   <p>
33{{ countwords .Content -}}字：読了まで約
34{{- if gt $minutes 0 -}}{{ $minutes }}分{{- end -}}
35{{- if gt $seconds 0 -}}{{ $seconds }}秒{{- end -}}
36   </p>
37  </div><!-- post-meta -->
38  <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p
39</article>
40{{ end }}
41 <nav id="Paging">
42{{ template "_internal/pagination.html" . }}
43 </nav>
44 </main>
45{{ end }}
46{{/* ↓ここからまた共通部分 */}}
47<div class="local_navi">
48<ol class="breadcrumb">
49{{ template "breadcrumb" (dict "node" . "start" .) }}
50</ol>
51</div><!-- div.local_navi end -->
52{{ partial "footer.html" . }}
53</body>
54</html>

さて、これでセクションの_index.mdが固定ページとして出力される条件分岐ができました。次回は{{.Content}}の中身である固定ページの実際の内容を作っていきます。

関連記事