HUGO

How to split the content into parts for one page?

support
#1

Hello. I have html code that I want to transfer to hugo.

  <body>
    <main>
      <ol>
        <li>
          <section>
<!-- Some content -->
          </section>
        </li>
        <li>
          <section>
<!-- Some content -->
          </section>
        </li>
        <li>
          <section>
<!-- Some content -->
          </section>
        </li>
     <ol>
  </main>
<body>

I need to fill these sections with content using markdown. I am still new to using hugo, and I do not know which option would be optimal. While I see an option to create a individual md file for each section, and write content in the md file, and then call it in the section. Something, like:

index.html:

<main>
<ol>
    <li>
        {{ partial "section__first.html" . }}
    </li>
    <li>
        {{ partial "section__second.html" . }}
    </li>
    <li>
        {{ partial "section__third.html" . }}
    </li>
</ol>

section__first.html:

<section>
  {{ with .Site.GetPage "/sections/first-section.md" }}
    {{ .Content }}
  {{ end }}
</section>

Сan it be done differently and more conveniently?

#2

I’m probably missing something, but this seems like a normal list template where you would range through regular pages in a section, displaying .Content instead of .Summary.

1 Like
#3

That is, the solution assumes multiple md pages anyway?

#4

I think it would be easier to have multiple markdown pages, but have a look at this as well:
https://discourse.gohugo.io/t/two-div-sections-one-markdown-file/27738

1 Like
#5

Hi, I think you have to have multiple .md-files. You can later glue them together in different ways, this is how I do it in my single.html partial:

{{ define "main" }}
<div role="main" class="main">
    {{ $beforePath := printf "%sbefore_%s" .Dir .File.LogicalName }}
    {{ if (fileExists $beforePath) }}
        {{ with .Site.GetPage $beforePath }}{{ .Content }}{{ end }}
    {{ end }}

    <div class="container">
         {{ .Content }}
    </div>

    {{ $afterPath := printf "%safter_%s" .Dir .File.LogicalName }}
    {{ if (fileExists $afterPath) -}}
        {{ with .Site.GetPage $afterPath }}{{ .Content }}{{ end }}
    {{- end }}
</div>
{{ end }}

I also added the following to my baseof.html:

{{ if .Params.render }}
  (rest of baseof.html goes here)
{{ end }}

So that you can have the following structure:

a file called page.md
other files called before_page.md and after_page.md, in the same folder

You only need to make sure you add render: false to the front matter of before_page.md and after_page.md, as well as render: true to page.md

1 Like