next-prev.html

The next-prev.html partial layout defines the article progression experience and is located at the end of an article.

How it works

  • Single pages:

    • The next article in the section is displayed on the left (next points up).
    • The previous article in the section is displayed on the right (prev points down).

  • Section pages:

    • The first child is displayed on the right (points down)
This experience can be disabled from the themes/milo/hugo.yaml config by setting Params.articles.nextPrev.display to false.

Source code 

{{- if .Site.Params.article.nextPrev.display -}}
{{$trunc := .Site.Params.article.nextPrev.trunc}}
<div class="mt-8 flex justify-between items-center">
    {{with .NextInSection }}
        <a href="{{.RelPermalink}}" class="tile text-black py-2 px-4 rounded-r-md transition duration-300"> {{.Title | truncate $trunc}} </a>
    {{else}}
    <span class="py-2 px-4"> <!-- Placeholder for alignment -->
    </span>
    {{ end }}

    {{with .PrevInSection }}
        <a href="{{.RelPermalink}}" class="tile text-black py-2 px-4 rounded-l-md transition duration-300"> {{.Title | truncate $trunc}} </a>
    {{else}}
        {{- range first 1 .Pages}}
        <a href="{{.RelPermalink}}" class="tile text-black py-2 px-4 rounded-l-md transition duration-300"> {{.Title | truncate $trunc}} </a>
        {{- end}}
    {{ end }}
</div>
{{- end -}}
chat.html tiles.html