How can I inject container divs into {{ .Content }}?

support
1

Hi folks. I’m learning hugo so any help with this would be hugely appreciated!

I have .md articles in my content folder which are all rendered in a standard way via {{ .Content }}

I’d like to have each header (h1,h2…etc) and coresponding paragraphs wrapped in a div so that I can control layout and styles. The last thing I want to do is add html into the markdown!

I’ve read a bit about shortcodes and split functions but a good way forwards isn’t very clear.

Many thanks,
Dom

2

Could you give an example of the type of output that you want? (and the range of outputs?)

some first thoughts:

  • Look at Render Hooks which might help a little.

  • yes, shortcodes could help – but if you need to do that for every para then that’s no better (maybe worse) than html in markdown…

  • you can do a lot with CSS… or even JS fairly easily.

  • worst-comes-to-worst, you can pat around with RegEx – but that is quite an endeavour.

1 Like
3

Thanks Henry!

I’ll look at render hooks but I’ve also attached a jpg to show a rough idea of the layout aim. The red box would be a div of some type or section, whatever, with the aim of having the header line up with corresponding paragraphs.

O

hugo-layout
hugo-layout1388×1321 256 KB
bviously I want to keep using clean simple markdown and the .Content call.

What do you think?

Thanks,
Dom

4

You should be able to accomplish this with CSS alone:

1 Like
5

In my case, replaceRE is useful to inject a section tag to {{ .Content }}.

1 Like
6

Thanks peaceiris…this could be the slickest way of doing what I need.
I’ve just used replaceRE to achieve figure tags around img which seems to work although there is a lof of code in the html.

Anyway, I’ll dig into this and mark as solution if I can get it working.

As a side note for anybody reading this…My quick solution for layout image above was to simply add an hr into my markdown where needed – which is just (-----), so seems pretty workable. CSS set to display block and width 100%.

Thanks!

1 Like