How to implement dynamic page loading

Support
1

I need advice and a couple of pointers.

I want to write a plugin implementing dynamic page loading, more or less following this pattern: Rethinking Dynamic Page Replacing Content

I want to do it in a way that I can just enable that feature for navigation links and otherwise forget about it. So, if I have the main part of my pages wrapped in a <div class="page">, I want the navigation links to dynamically replace the content of that element, with a spinner while loading and a nice fade-in effect. That alone would be easy, but of course, I don’t just want page.content, I want each page’s HTML rendered via a template for maximum flexibility.

svg
seite02.svg.png800×760 34.3 KB

The way I see it, I need to create partial templates for each page (just the .page element, without navigation, header and body). And then hook into onPageContentProcessed in order to render that again with a super template. Does that about sound correct? Is there anything to watch out for? I’m not afraid to read source code, but it’s easier to study an unfamiliar architecture when you got a couple of pointers on where to look. Is there any particular plugin that I might want to read for pointers? Maybe the Page Inject plugin?

2

I think the easiest implementation with Grav would be to use a library such as barbajs: http://barbajs.org/

Basically, you just add an id to the part of the html that will change between each page, and then you just call barbajs on the id, and that’s it.

Tested with Grav and works perfectly.

Hope it helps

1 Like
3

Hm. That does seem like the easiest solution …

Thank you for bringing this to my attention! However, my gut feeling is that maybe I want to do as much as possible in the backend and keep the JS even more lightweight. Admittedly, ~4.5k compressed and gzipped is reasonable enough; but still …

I suppose, I want to at least explore backend-centric options before I decide whether it’s too much work.

4

I changed the title back and accepted Paul’s answer. It is the easiest way. In principle, I would like to write that plugin, but it’s not going to happen any time soon.