How do I add next/previous links to my posts?

Support
1

Very simple stuff conceptually.
I want to add a next / previous button to the bottom of each of my posts, ideally with the title of said next post.
I use no theme.
I have one flat content folder with everything in it, so no “sections”.

Somewhat related: what’s the recommended way to introduce mutually exclusive categories? sections or taxonomies?
EDIT: I should probably use taxonomies since I’d otherwise loose the ability to have a “recent posts” section on my landing page #1170

Also, why are the taxonomy docs so …inaccessible?
People basically just want tags, yet it looks like it requires rocket science to implement without breaking the rest of a minimal site

2

Example of the desired behavior from another blog using a different ssg

3

You will have at least one section, the default one. If you set a sort_by in it (see Section | Zola for the details), you get page.lower and page.higher that corresponds to previous/next. See GitHub - getzola/even: A clean blog theme for Zola for example for a theme that has what you want.

Also, why are the taxonomy docs so …inaccessible?
People basically just want tags, yet it looks like it requires rocket science to implement without breaking the rest of a minimal site

What do you mean breaking the site? What’s inaccessible in Taxonomies | Zola ?
Many people want way more than tags.

4

page.higher / page.lower resolve to “[object]” for me.
I have “sort_by” set to “date”.

I tried integrating links with the following

<a href="{{ page.higher }}">previous</a>
<a href="{{ page.lower }}">next</a>

Tho I should probably have a conditional to check for first/last

{% if page.higher %}
{% endif %}

As for taxonomies,
I’d say a code snippet demonstrating how you could use a taxonomy in templating would be very useful.

I currently use a unicode naming convention isntead.

    {% for post in section.pages %}
    {% if "💻" in post.title %}
    <li>
      <time>{{ post.date | date(format="%d.%m.%Y") }}</time>  &ndash; 
      <a href="{{ post.permalink | safe }}">{{ post.title }}</a></li>
    {% endif %}
    {% endfor %}

I’d prefer to stay themeless. If I wanted themes I’d be on hugo

5

The following code snippet from one of the templates in your recommended theme worked for me:

{% if page.lower or page.higher %}
  <div class="post-nav">
    {% if page.lower %}
      <a class="previous" href="{{ page.lower.permalink }}">‹ {{ page.lower.title }}</a>
    {% endif %}
    {% if page.higher %}
      <a class="next" href="{{ page.higher.permalink }}">{{ page.higher.title }} ›</a>
    {% endif %}
  </div>
{% endif %}

Edit: styled and adapted to my site + layout

{% if page.lower or page.higher %}
  <div class="post-nav" style="width:100%">
    {% if page.lower %}
      <a class="previous" style="float:right" href="{{ page.lower.permalink }}">{{ page.lower.title }} ›</a>
    {% endif %}
    {% if page.higher %}
      <a class="next" style="float:left" href="{{ page.higher.permalink }}">‹ {{ page.higher.title }}</a>
    {% endif %}
  </div>
  <br>
{% endif %}
2 Likes
6

It’s fine, I don’t use themes either. It was just to show you how it’s implemented.

1 Like