【Hugoカスタマイズ】「前の記事」「次の記事」へのリンクを自動表示する方法

    <!-- 記事の本文 -->
    <div class="content">
        {{ .Content }}
    </div>

    <!-- ここから追加！ -->
    <nav class="post-nav">
        {{ if .Prev }}
            <div class="nav-prev">
                <span>&lt; 前の記事</span>
                <a href="{{ .Prev.Permalink }}">{{ .Prev.Title }}</a>
            </div>
        {{ end }}
        {{ if .Next }}
            <div class="nav-next">
                <span>次の記事 &gt;</span>
                <a href="{{ .Next.Permalink }}">{{ .Next.Title }}</a>
            </div>
        {{ end }}
    </nav>
    <!-- ここまで -->

/* ナビゲーション */
.post-nav {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.nav-next {
    text-align: right;
    margin-left: auto; /* 右寄せ */
}

.nav-prev {
    text-align: left;
}

.post-nav span {
    display: block;
    font-size: 0.8rem;
    color: #999;
}

{{ if .PrevInSection }}
    <a href="{{ .PrevInSection.Permalink }}">&lt; 前の記事 (同じコーナー)</a>
{{ end }}