Can I loop through {{ .Content }} in order to divide it into page sections?

support
1

This is content/_index.md:

---
title: Home
---
## Section 1

This is the content of section 1.

## Section 2

This is the content of section 2.

I would like to split the content into two separate HTML section tags, like this:

  <main>
    <section>
      <h2>Section 1</h2>
      <p>This is the content of section 1.</p>
    </section>

    <section>
      <h2>Section 2</h2>
      <p>This is the content of section 2.</p>
    </section>
  </main>

(I’m not talking about “Hugo sections”, you get it.)

Is there a convenient way to do it?

2 Likes
2

Tried that already. Answer is no, there is no convenient way. With a lot of coding, using the attribute .Level, it might be possible, but it’s over my head and no one seems to want that headache.

1 Like
3

You can create a shortcode for this.

layouts/shortcodes/section.html

<section>
  {{ .Inner }}
</section>

And then wrap your content via the section shortcode.

{{% section %}}
## Section 1

This is the content of section 1.
{{% /section %}}
1 Like
4

Thank you. I just had to take care of this issue: twitter bootstrap - Hugo shortcode ignored saying "raw HTML omitted" - Stack Overflow

Adding

[markup.goldmark.renderer]
   unsafe = true

in config.toml is sufficient.