AJAX navigation

Is there a theme that includes AJAX’y navigation? I haven’t been able to find one… I need a way to inject sections into the baseof template without reloading the whole page.

Your help is much appreciated! Thank you!

What’s an AJAX’y navigation? Sounds like what you want is to look into Vue and VueRouter. Which has not much to do with Hugo, but with the functions around it.

By AJAX’y navigation, I meant a theme that uses jQuery’s AJAX .load() method.

It looks like that in order for .load() to work, I need to use plain html without any Go markup. But then, I can’t use any HUGO’s functionality…

Here’s a very simple example:

The top two links (Home and Books) .load() just fine, but they don’t work as HUGO pages
The third link (Essays) works as a HUGO page, but it doesn’t .load() with AJAX

I think you need to create a custom output format, then create templates for it that omit header/footer parts of your site and only output title and content into an html file.

What is returned in your sample looks like a whole page with navigation that is echoed below the first navigation.

Just by curiosity, why do you focus on using a special function you want to use, and not on your goal (that i don’t know) ?
If you define what you want to achieve, may be we can point you on the right tool in the hugo way of doing things.

Good point. I’d be happy to clarify it.

I need to build a Hugo site that doesn’t reload the whole site when you navigate to different sections or posts. Specifically, in the repo linked above, I don’t want the nav to reload.

Ah, ok !

If i’m not mistaken, i think I remember Bep experimenting the AlpineJS framework and i think i saw a feature like this either on his test or on Alpine website. HTH

1 Like

Does https://github.com/turbolinks/turbolinks do what you need? It does reload the nav, but it preloads the link in the viewport.

1 Like

Yes !! That was this I was thinking about … turbolinks. Thanks

Thank you! This is exactly what I needed!

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