Questions about using JSON, search, pagination, and post filters

Uncategorized
1

Hi again, so I’m working through this blog project, it’s my first Hugo project, and everything has been going pretty well, except now I’m at the point where I have to implement search, pagination and post filtering with about 400+ posts. The Hugo-based pagination works, but it refreshes the page (unless I make a specific template for this? Not sure). So what I’m thinking about is using the JSON features and making reload-free pagination as well as post filtering. I think I could also use the same JSON for searching.

So it seems like this is not necessarily idiomatic for Hugo. Any help reasoning about this would be amazing. Code-wise, I have my posts showing up in JSON at /posts/index.json and all the posts show up nicely. But what I am really wondering is if this is a good path to follow. I’m sure it will probably work, but I’d like to hear some ideas.

Here’s what I would like to have happen ideally:

  • Search bar in the nav goes to a page template at /search/ with the search results on pressing Enter. Do I use URL query string to pass the search term to the new page and then the new page actually performs the search with something like Lunr.js?
  • Main post feed, should this populate with the JSON data as well, and then I can use JS to paginate and filter the posts? Can I do these things in a more “Hugo” sort of way instead? I would like no-refresh on filtering or navigating through post pages.

I realize I’m stepping outside of pure Hugo here, and I’m just kind of riffing about how to get this done. I can’t show full code because of NDA stuff, so I apologize for that, but Thank You for any and all help.

2

Hugo pagination outputs static paginated pages.

Yes. Also Fuse.js etc. There are tutorials around both in the forum and in external blogs. Also have a look at the Hugo themes showcase and check out the various approaches that theme authors have followed to implement search functionality.

Not really. This kind of UX typically relies on JS. Hugo functions work before a site is generated and not on the front-end.

1 Like
3

Thank you very much for the insight, it’s helpful. I’m probably going to end up taking a JS oriented approach but I thought I would ask the community for ideas. I’ll also take a deeper look into the theme showcase