Hugo

Hugo shortcodes with markdown, gotchas

July 2020  1050  5 mins Hugo
Generally Hugo works intuitively, unfortunately not for shortcodes with markdown text inside. While the documentation is often rather minimal, in this case it is incomplete. Having spend a lot of time wondering what i was doing wrong eventually a forum post a on the Hugo forums made everything fall in place. So to save you the effort i have summarized my findings here. This post only applies to Hugo 0.55 and beyond, at the time of writing i’m using 0.72. ...

Hugo + js = enhanced figures

May 2020  8026  38 mins Hugo
Multiple shortcodes to enhance Hugo’s default figure capabilities. Hugo supports figures out of the box by using the figure shortcode or the markdown syntax. They both work well if you quickly want to add an image. The Hugo shortcode supports some customization e.g. adjust dimension and what not but we want to go further. First of all images should auto scale to the available page width, use lazyload1 and have the ability to be shown modally. Images can come from the Page resources or external links. In addition some shortcodes are added to show images in different ways (gallery, grid, …). ...

Hugo + js = highlighted table of contents

May 2020  2256  11 mins Hugo
Example on how to highlight Hugo’s default generated table of contents. While Hugo provides a default TOC (table of contents) which you can include on your page it does not have many features, like highlighting. Fortunately it can easily be added. From a UX point of view highlighting is useful to orientate the user on a page, especially if you have long form content. It can indicate where the user currently is, what has been read already and what is currently visible. ...

© Nelis Oostens