New feature: A next/previous button for the docs section

[frodriguezsmartclip]

Hi there,

I came from this would be nice a new feature for docsy theme: A next/previous button for the docs section. 🙏

The idea came from this customized docsy theme example website, specifically I saw the apache's airflow webpage documentation section, and I liked it the idea:

The code could be similar to their theme like this? (link)

I made this on my custom theme code for "pager.html" (inside layouts/partials/pager.html): 😃

<ul class="list-unstyled d-flex justify-content-between align-items-center mb-0 pt-5">
  <li>
    <a {{if .Next}}href="{{.Next.Permalink}}"{{end}} class="btn {{if .Next}} btn-outline-primary{{end}} {{if not .Next}} btn-dark disabled{{end}}"><span class="mr-1">←</span> {{ T "ui_pager_prev" }}</a>        
  </li>
    <a {{if .Prev}}href="{{.Prev.Permalink}}"{{end}} class="btn {{if .Prev}} btn-outline-primary{{end}} {{if not .Prev}} btn-dark disabled{{end}}">{{ T "ui_pager_next" }} <span class="ml-1">→</span></a>
  </li>
</ul>

EDIT:

Added other code that I tried to work, but again, ordered by date:

{{ $pages := where site.RegularPages "Section" .Section }}

<ul class="list-unstyled d-flex justify-content-between align-items-center mb-0 pt-5">
{{ with $pages.ByLength.Prev . }}
  <li>
    <a class="btn btn-outline-primary" title="Previous page in {{ .Section }}" href="{{ .Permalink }}"><span class="mr-1">←</span> Previous {{ .Section }}</a>
  </li>
{{ end }}

{{ with $pages.ByLength.Next . }}
  <li>
    <a class="btn btn-outline-primary" title="Next page in {{ .Section }}" href="{{ .Permalink }}">Next {{ .Section }} <span class="ml-1">→</span></a>
  </li>
{{ end }}
</ul>

BUT, It's ordered by date, not by weight inside each section order left side...

Could this be implemented for the docsy theme in the future? It would be amazing! ☺️

Thanks a lot!! Regards

PS: I can not add a LABEL for this issue "enhancement"... maybe is restricted only for admins

@LisaFC @RichieEscarez

[trauts2]

I saw this on AirFlow and agree, this would be valuable.

[frodriguezsmartclip]

Hello again! I know that right now for COVID-19 are difficult times ... but is there any progress on this?

Thank you. regards

[LisaFC]

Thanks for the reminder! I'll have a look at the AirFlow site today and see if it's an easy update.

[frodriguezsmartclip]

@LisaFC Thanks a lot 🙏

[nryberg]

Just curious if there was any progress on the idea around "Next" and "Previous"

[TianCal]

Just wonder if this feature is already included, since I can see the code inside the theme repo.

[LisaFC]

It is indeed included, #937 shows a fix to include it in your site.

@chalin, you added the pager, is there a parameter to enable it rather than having to manually add it to your theme files?

[LisaFC]

Should also look at #878

[Signum]

I have included the partial "pager.html" in my right sidebar in the docs section. However the previous/next logic seems to be reversed. "Previous" takes me to the next page. And "Next" takes me to the previous page.

While browsing the Hugo issues I found this: https://github.com/gohugoio/hugoDocs/issues/1391

Apparently the "default sort order" is applied: Weight > Date.Reverse > LinkTitle > FilePath

I tried hard to wrap my mind around that logic. Newest blog entries are shown first. Okay. And "Previous" links to an older blog entry that is further down. Well, okay, I guess. For blogs at least.

But in the world of documentation that does not make sense to me. I read documentation from top to bottom. And I expected "Next" to point to the next page in the documentation.

Is this a quirk when using Hugo for structured documentation? Am I the only one seeing this?

[BrentHuang]

Please give me a demo that how to add page prev and next to the bottom of my own document.

[fekete-robert]

@BrentHuang : It seems that currently there is no easy way to do it, and the current implementation might be buggy, and also has limitations.

[BrentHuang]

@fekete-robert thank you!

This is a useful feature. I hope to get official support and demos soon.