Hugoに前後記事のリンクを追加する
目次
ブログにありがちな前後記事のリンクを追加する。
方針
方法自体はググったら出るのでClarityに合わせたい。なるべく影響少なくしたい。
追加方法
追加先は本来はsingle.htmlをオーバーライドして専用のpartialを用意するべきではあるが、もしテーマ側でsingle.htmlが更新された場合を考えるとあんまり影響範囲を広げたくないのでi18nlist.htmlを上書きする。位置もぴったりだし、特に多言語対応の予定はないので最も影響範囲が少ないと思われる。なので前半は本来のi18nlist.htmlの内容をコピペしている。
セクション内の前後記事は.PrevInSectionと.NextInSectionで得られる。with文を使うとifの機能に加えて.がwithの引数で置き換えられる。ここで言うとwith .PrevInSection内の.RelPermalinkは.PrevInSection.RelPermalinkを参照することになる。
1{{ $translationsSize := len .Translations }}
2{{ with .Translations }}
3<div class="post_i18n">
4 <h3 class="mb-0">{{ T "translations" }}:</h3>
5 <nav class="tags_nav">
6 {{ range $index, $_ := . }}
7 <a href="{{ .Permalink }}" class="post_tag button button_translucent">{{ replace (printf "%#v" .Language.LanguageName) "\"" "" }}</a>
8 <!-- {{ if lt $index (sub $translationsSize 1)}} |{{ end }} -->
9 {{ end }}
10 </nav>
11</div>
12{{ end }}
13{{ if .Section }}
14<div class="post_nav_link">
15 {{ with .PrevInSection }}
16 <a class="post_nav_link_prev" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
17 {{ end }}
18 {{ with .NextInSection }}
19 <a class="post_nav_link_next" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
20 {{ end }}
21</div>
22{{ end }}
続いて、CSS (SASS)を定義する。Flexboxを使ってウィンドウ幅が広いときは前後リンクを1行の左右端で、狭いときは前の記事が左寄せ1行目、次の記事は右寄せ2行目のように表示させる。
1// Prev and Next Links
2.post_nav_link
3 display: flex
4 flex-wrap: wrap
5 justify-content: space-between
6 .post_nav_link_prev
7 &::before
8 content: "«"
9 .post_nav_link_next
10 margin-left: auto
11 &::after
12 content: "»"
余談
とはいえ、広告つけようとか思ったら結局single.htmlをオーバーライドすることになりそう。