Load next post under currect one without refreshing the page

support
1

Does anyone know the solution to load next post without refreshing the page?
Each post could have a link “Next post” under content, by cliking a user can read title and all post content below current post.

1 Like
3

I am not talking about infinite scrolling of posts on a list page.
I want load next post on the post page without page refresh.

4

There are several ways to approach this, and they all involve an alternate output format and a bit of JS.

The example below creates an alternate output format, named “inner”, for each single page. The template for this output format does not include any of the page chrome. Although you can modify it however you would like, it currently contains just .Title and .Content. But is wrapped in a div with a data attribute that contains the relative URL for the next page.

git clone --single-branch -b hugo-forum-topic-42288 https://github.com/jmooring/hugo-testing hugo-forum-topic-42288
cd hugo-forum-topic-42288
hugo server

Files of interest:

  • config.toml
  • assets/js/*
  • layouts/posts/*
  • layouts/partials/inner.html

I deployed this example to GitHub Pages. Response time seems pretty good.
https://jmooring.github.io/load-next/

I will delete the GitHub Pages site at the end of January.

5 Likes
5

Excellent. This could work for me too, thank you very much.

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.