Hugo テーマ 5. layouts/section.html をいじる

2026-06-15 00:11:30 Hugo

最終更新日から %s 以上が経過しています。
内容が古くなっている可能性があるのでご注意ください。

content 内のディレクトリーに対応するレイアウト定義を編集します。

このレイアウトの方針

layouts/section.html は、セクション内のコンテンツページを列挙するページのレイアウトを定義します。

このサイトでは以下の要素を組み込みます。

セクション自身のコンテンツがある場合はそのタイトルと記載内容
個々のコンテンツについて出力する情報
- タイトル
- 最終更新日時 (別途、js で何か月前、という表記に変える)
- コンテンツのタイトル
- コンテンツの冒頭に記載した概要
- 利用者が読みたい場合に押すことでコンテンツにジャンプするためのリンク
ページネーション

section.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{{ define "main" }}
  {{/* セクション自身の内容 */}}
  <h1>{{ .Title }}</h1>
  {{ .Content }}

  {{/*
    シリーズものを扱うセクションの場合、
    通常とは異なり、最初のコンテンツを一覧の最初に持ってくる。(通常であれば、例えば最新のコンテンツが来るところ)

    セクションの _index.md のフロントマターに params: series: true を指定すると有効化される。
  */}}
  {{ $pages := .Pages }}
  {{ if .Param "series" }}
    {{ $pages = .Pages.ByTitle }}
  {{ end }}

  {{/* ページネーション */}}
  <div class="list_container">
    <ul>
      {{ range (.Paginate $pages).Pages }}
        {{ partial "page_as_listitem.html" . }}
      {{ end }}
    </ul>
    {{ partial "pagination.html" . }}
  </div>
{{ end }}
{{/* vim: set et ft=html sts=2 sw=2 ts=2 : */}}

ページネーション

各セクション内のコンテンツページ数が多い場合、すべてのコンテンツページを1ページ内に列挙するのではなく、適度な件数で区切るようにします。

Hugo に組み込まれているページネーションの仕組みを使います。

Paginator ☐↗ と Paginate ☐↗ があります。
並び替えやフィルタリングをしたい場合は Pagenate を使います。
どちらの場合もコード例が記載されています。

プロジェクトの設定でコンテンツ数を指定する

Configure pagination ☐↗ にある通り、プロジェクトの設定でページネーションの設定ができます。

[pagination]
  pagerSize = 10

Pagination では上記の設定で制御するしかないため、ほかの場所・ほかの用途で Pagination を使った場合も同じ設定が使われます。

場所によって数を変更したい場合は Pagenate の方を使います。
Hugo のドキュメントでも Pagenate の方が推奨されています。

シリーズものを扱うセクションの並び順指定

シリーズもののコンテンツの並びをタイトル昇順にするような仕組みを実装しました。

コンテンツごとにフロントマターで weight を指定するというやり方もあります。ですがその場合、セクション以外にもタグによる一覧でも、その weight が影響して並び順が変わってしまいます。
このテーマでは、セクションによる一覧限定で並び替えの機能を付けました。

セクションの _index.md

content/
  section1/
    _index.md       ←これ
    content1-1.md

記述例

---
title: "..."
params:
    series: true
---

_partials/page_as_listitem.html

列挙されたコンテンツページ (タイトル等) を表示する際のレイアウトを定義します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<li>
  {{/* コンテンツの最終更新日時とタグ */}}
  <a href="{{ .Permalink }}">{{ .Title }}</a> | <span class="lastmod">{{ .Lastmod.Format "2006-01-02 15:04:05" }}</span>
  {{ with .GetTerms "tags" }}
    {{ range . }}
      <span class="tag"><a href="{{ .RelPermalink  }}">{{ .LinkTitle }}</a></span>
    {{ end }}
  {{ end }}

  {{/* コンテンツのサマリー (<!--more--> までの文章) */}}
  {{ .Summary }}

  <p class="readmore"><a href="{{ .Permalink }}">&laquo; more &raquo;</a></p>
  <hr class="listsep" />
</li>
{{/* vim: set et ft=html sts=2 sw=2 ts=2 : */}}

_partials/pagination.html

ページネーションがされた際の前へ次へのリンクを表示します。

実はこれ、テーマ作成者が用意しなくても動作します。
事実、derty でもこのファイルは作っていません。
(section.html の記述は、そのままで良いです)

Pagination #Navigation ☐↗ にありますが、Hugo 組み込みの partial テンプレートが使われます。

興味のある方は Hugo のソースコードにある _partials ☐↗ を見てみることをお勧めします。
pagination.html の中身が掲載されていますので、独自の pagination.html を作る際の参考になるでしょう。 pagination.html だけではなく、ほかにも同様に組み込みのものが掲載されています。