【Hugo】Robustテーマで記事を更新順に並べる

HugoのRobustテーマで記事を更新順に並べ、記事一覧に更新日を表示させる方法を紹介します。

はじめに

Qiitaから引っ越した記事などにdateとlastmodを設定したのですが、記事一覧が作成日順になっているのが気になりました。

もし、昔書いた記事を大幅に書き換えて最新の内容にしたのに、作成日が古いせいで後ろの方に表示される、なんてことがあったら困ります。

そこで今回は、記事を更新順に並べてみます。

記事を更新順に並べる

themes/hugo_theme_robust/layouts/_default/list.htmlを、layouts/_default/list.htmlにコピー。

{{ range $paginator.Pages }}

この部分（⌘Fで探してください）に書き足すだけです。

{{ range $paginator.Pages.ByLastmod.Reverse }}

.ByLastmodで更新日の古い順にし、.Reverseで新しい順に並び替えます。

追記

結局、記事一覧の方は作成日順に戻しました。 更新順にするのはLATESTSだけで良いかな…。

記事一覧に更新日を表示させる

themes/hugo_theme_robust/layouts/_default/li_sm.htmlもlayouts/_default/li_sm.htmlにコピーします。

li_sm.htmlとlist.htmlから以下の一行を探し、

<li><i class="fas fa-calendar" aria-hidden="true"></i><time datetime="{{ .Date.Format "2007-01-02T15:04:05JST" }}">{{ .Date.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>

削除してから、このif文を丸ごとペーストしてください。

{{ if ne .Date .Lastmod }}
<li><i class="fas fa-sync" aria-hidden="true"></i><time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05JST" }}">{{ .Lastmod.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
{{ else }}
<li><i class="fas fa-calendar" aria-hidden="true"></i><time datetime="{{ .Date.Format "2006-01-02T15:04:05JST" }}">{{ .Date.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</time></li>
{{ end }}

これで、更新日がある場合はそちらが表示され、ない場合（または作成日と同じ場合）は作成日が表示されます。

ちなみに、li_sm.htmlがサイドバーの「LATESTS」や記事ページ下部の「次の記事」欄のHTMLファイルで、list.htmlはトップページやカテゴリページのためのHTMLファイルのようです。

参考