Two div sections one markdown file

Hey guys, I have a very weird layout where we have a side bar that follows you. Because of the structure, our content section is currently broken up in two parts. Is there a way to use a single markdown file to fill both sections?

Example structure:

<section id="main" class="content-container article-pad-v">
  <div class="d-flex container justify-content-between section_1">
    <div class="content-left-side">
      <h1>
        {{ index .Params "headline" | markdownify }}
      </h1>
      <div class="information">
        // section 1
      </div>
    </div>


    <div class="pl-3 content-right-side d-flex">
        <div class="bio">
        ...
        </div>
    </div>

    <div class="container section_2">
        <div
        class="content position-relative mt-4 d-flex justify-content-between position-relative"
        >
            <div class="content-left-side">
            {{ .Content }}
            </div>
        </div>
    </div>
</section>

Here’s one approach…

markdown:

+++
title = "Test"
date = 2020-08-22T07:02:03-04:00
draft = false
+++
This is the content for the **first** section.
<!-- section break -->
This is the content for the **second** section.

layouts/_default/single.html:

{{ define "main" }}
  <h1>{{ .Title }}</h1>

  {{- $sectionDelimiter := "<!-- section break -->" -}}
  {{- $rawContentSections := split .RawContent $sectionDelimiter -}}
  {{- if gt (len $rawContentSections) 1 -}}
    <div id="section-1">
      {{ index $rawContentSections 0 | .RenderString }}
    </div>
    <div id="section-2">
      {{ index $rawContentSections 1 | .RenderString }}
    </div>
  {{- else -}}
    <div id="content-not-split-into-sections">
      {{ .Content }}
    </div>
  {{- end -}}

{{ end }}
5 Likes

This will work, thank you for your help!

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