Split a long post into different parts/sites/sections

Dear all,

maybe I didn’t research long enough but I didn’t exactly find what I want to achieve. Some of my posts are pretty long and contain a lot of images. Hence loading a single post can take some time…

What I want to achieve is splitting a single post into $n parts. So ONE markdown source file will be rendered to $n websites that are somehow interlinked. The reader can click on next or previous to navigate through the parts…

I have the feeling this is somehow related to pagination but pagination seems to support homepage, section pages, and taxonomies only. I hope someone with more Hugo Mojo than me can point me into the right direction.

Thanks!

I don’t know of any solution for what you’re looking for, but when I have long pages, I lazyload the images/media and it’s not a problem at all, and in fact, one of the reasons I use static sites is so that I don’t have to paginate so much. For instance, this page (created by a guru of web performance) is one very long page: https://images.guide/

1 Like

Thanks. This is a good alternative idea. Will have a look into that. I take you are using https://github.com/aFarkas/lazysizes (which was referenced by the guide you linked above)?

Yep. It’s a great library.

Note that it is on my mental road map to provide a “section map”, which should be possible to do with Black Friday v2, but there are some work that needs to be done first.

So you could get some proper data structures from .Content, i.e.:

.Content.ToC
range .Content.H1

The above is just something I came up with now, but they should give you an idea.

2 Likes

One further question: do you know a painless way how you can influence Hugo to add the class="lazyload" to <img> tags automatically, when it renders HTML?

So far I only found a way using shortcodes (which would require to change the way how pictures are referenced in my markdown files). Alternatively I stumbled upon a discussion (Add a class to images) where people described how to add a class to <img> in Markdown. But this didn’t work for me for some reason.

I think the best way is to use the Lazysizes Progressive Enhancement plugin, which will lazyload all media inside a tag. https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/noscript

1 Like