Load next post under currect one without refreshing the page

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.

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