💾 Archived View for gmi.bacardi55.io › blog › 2024 › 02 › 18 › add-prev-next-articles-with-hugo captured on 2024-05-10 at 10:53:16. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Add previous / next articles with hugo

Posted on 2024-02-18

Another short post about my [hugo] [configuration] update, as I have added navigation for previous / next posts.

To do so, I added a configuration in `config.toml':

[params]
  […]
  enableNextPrevPages = true

Then, in the `single.html' template file, I added:

{{ if .Site.Params.enableNextPrevPages }}
    {{ partial "article-prevnext.html" . }}
{{ end }}

And then created the =article-prevnext.html" partial:

<div class="article-nextprev">
  <div class="next-post">
      {{ if .NextInSection }}
          <a class="link-reverse" href="{{ .NextInSection.Permalink }}?ref=footer">« {{ .NextInSecti#
      {{ end }}
  </div>

  <div class="previous-post">
      {{ if .PrevInSection }}
          <a class="link-reverse" href="{{ .PrevInSection.Permalink }}?ref=footer">{{ .PrevInSection#
      {{ end }}
  </div>
</div>

The `.NextInSection' and `.PrevInSection' allow to link to only other [blog posts] and not [bookmarks] or [gemlog entries].

And added to the CSS file this simple line:

.article-nextprev{
    display:flex;
    flex-flow: row wrap-reverse;
    justify-content: space-between;
}

Send me a gemini mention

send me an email!