calendar

Hugoで記事のタイトル一覧を表示する方法

category Hugo
tag Hugo tag 設定
toc目次

はじめに

Hugoの小ネタです。

Hugoで記事タイトル一覧を表示

Hugoで通常のベージ情報はRegularPagesにあるため、rangeを使用することで記事のタイトル一覧を取得できます。

<ul>
  {{ range .Site.RegularPages }}
  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
  {{ end }}
</ul>

表示順を変更する

ページのメソッドを使用して表示順（ソート順）を変更することも可能です。

タイトルの昇順でソート

ByTitleでページコレクションをタイトルの昇順で取得できます。

<ul>
  <!-- タイトルの昇順でソート -->
  {{ range .Site.RegularPages.ByTitle }}
  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
  {{ end }}
</ul>

日付の降順でソート

ページのメソッドは昇順で取得されるため、降順で取得するにはReverseを使用します。

日付を降順で取得するには、ByDateでページコレクションを日付の昇順で取得し、Reverseで逆順（降順）にします。

<ul>
  <!-- 日付の降順でソート -->
  {{ range .Site.RegularPages.ByDate.Reverse }}
  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
  {{ end }}
</ul>

参考