Expand Content List (like Instagrams "Show More"-button)

Hello,
I would like to create an expand list function like the one Instagram uses instead of using pagination (If one for example visits https://www.instagram.com/cocacola/ (on desktop) and scrolls down a button labeled “Show more” is used instead of pagination). Is this possible?

Hello @samrich,

this reminds me of the dozens of Javascript plugins for infinity scolling. You’ve to use at some point Javascript since Hugo only generetes static sites.

If your user clicks at the show more button you could trigger an AJAX call that loads a JSON file with all necessary information about your posts (title, summary, publishing date etc).

Now we need to create a JSON file with the content and metadata of your posts. We had a similar discussion about the generation of a search index. There are mainly two ways to generate such an index. Either use task-runners like Grunt/Gulp or, if you don’t want to add dependencies, create the index with Hugo itself.

Thanks for your quick reply! I’ll have myself a look at java then!

This might not even work, but what if a button/javascript edits for example {{ range first 10 .Data.Pages.ByDate }} into {{ range .Data.Pages.ByDate }}

/Do not know if this is possible at all

Javascript will never see or be able to maipulate Go’s template syntax simply because no JS code will be executed during the generation of the site. Only the final result, the HTML can be manipulated.

If I understood you wrong, please correct me.

No, you understood me correctly, and your explanation was what I was fearing!

Well, I started working on an implementation of a search index.

https://github.com/spf13/hugo/pull/1853


If you’re trying to create an Instragram-like photo blog I maybe know a workaround. But if you want to add this behavior for posts you have to generate an index.