Split markdown content in two .content <sections> (and: don't put them inside p tags)

Hi!

I successfully used @jmooring 's answer (from 2021: Split markdown content in two files, but don’t render shortcodes as raw text ) to split the content of a single .md file into separate section-divs.
//originally I used the older solution (2018, also by jmooring): Two div sections one markdown file - #2 by jmooring

As these topics are now closed I wanted to ask the community (or maybe @jmooring, if he is available) for some issues I noticed:

On a first glance the generated pages do look correct, but not quite…

My Problem:

In my setup, the generated .html seems to encapsulate the content sections with “opening” </p> and “closing” <p> tags, which is A) reversed and B) totally unnecessary and of course gets marked as invalid in some browsers behind the scenes.

Considerations:
→ Maybe this has something to do with my goldmark settings in hugo.toml:

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      [markup.goldmark.extensions.typographer] #german quotes
        leftDoubleQuote = '&bdquo;'
        rightDoubleQuote = '&ldquo;'
        leftSingleQuote = '&sbquo;'
        rightSingleQuote = '&lsquo;'
    [markup.goldmark.parser]
      # wrapStandAloneImageWithinParagraph = false
      [markup.goldmark.parser.attribute]
        block = true
        title = true

The unnecessarily complicated solution I arrived at (after a fun learning experience :wink: ) :
I trimmed the p tags surrounding the section.

layouts/_default/ list.html

  {{- $sectionDelimiter := "[SECTION-BREAK]" -}}
  {{- $ContentSections := split .Content $sectionDelimiter -}}
  {{- /* I added the following: */ -}}
  {{- $sect0left := strings.TrimLeft "</p>" (index $ContentSections 0 | safeHTML) }}
  {{- $sect0trim := strings.TrimRight "<p>" $sect0left | safeHTML }}
  {{- $sect1left := strings.TrimLeft ...
  {{- $sect1trim ...
  {{- $sect2left ...
  {{- $sect2trim ... and so on...
...
  {{- /* ---the first section start without the "wrong" p-tag but ends this way--- */ -}}
  {{- with .Page.Params.sectionheroclass }}
    <section class="prose {{ . }}" id="section-hero">{{ strings.TrimRight "<p>" (index $ContentSections 0 | safeHTML) | safeHTML }}</section>
  {{- end }}

  {{- /* ---the following sections are handled this way:--- */ -}}
  {{- with .Page.Params.section1class }}
    <section class="prose {{ . }}" id="section-1">{{ $sect1trim }}</section>
  {{- end }}
...

Maybe it’s this goldmark-setup or something else, I don’t know. I believe the solution from 2018 I tried earlier was better, but I think I never bothered to look at the generated html at this stage of my journey…

So could someone please help me understand what is going on behind the scenes (while rendering the markdown, I believe) so that I could clean my hacked code that I am a little bit embarrassed…

In my response to 32080 (which I edited just now) I inadvertently omitted the p tags wrapping the section break, so you should do something like this instead:

layouts/_default/single.html
{{ $sectionBreak := "<p>[SECTION-BREAK]</p>" }}
{{ $sections := split .Content $sectionBreak }}

{{ if eq (len $sections) 1 }}
  {{ .Content }}
{{ else }}
  {{ range $k, $v := $sections }}
    {{ $id := printf "section-%d" (add 1 $k) }}
    <div id="{{ $id }}">
      {{ $v | strings.TrimSpace | safeHTML }}
    </div>
  {{ end }}
{{ end }}

Try it:

git clone --single-branch -b hugo-forum-topic-54148 https://github.com/jmooring/hugo-testing hugo-forum-topic-54148
cd hugo-forum-topic-54148
hugo server

If this doesn’t resolve your issue, please provide a Mardkown example.

1 Like

Thank You!
Even from a distance, this looks way more sophisticated than my humble hack. I will try to adapt this into my project in the coming days, but I’m sure, simply including the p tags in the break-keyword will solve 99.9% of my problem.

(anyway, I’m learning A LOT in the process…)

1 Like

It worked. Thanks for your help!

For now, I implemented it without the range loop because I need to be able place these (conditional) sections between the usual partials (title, gallery, …), but I’m always grateful to have an example ready.
:folded_hands:

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.