如何在不滥用布局的情况下正确组织 Hugo 中的内容？

Question

我想弄清楚在 Hugo 中组织内容的正确方法是什么。我已经阅读了文档，但我仍然不明白什么是正确的处理方法。

我理解拥有内容和布局目录以及使用 .md 文件为页面提供类似文章的内容的概念。

但是，如果我想构建一个包含多个部分的典型网页，我该怎么做而不滥用布局目录？

举个例子：

<section class="bg-red">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>This is a title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta quam at auctor tincidunt. Proin tempus nec arcu at scelerisque. Aliquam aliquam bibendum enim, eu hendrerit ex iaculis ac. Morbi lectus neque, dictum a magna nec, commodo feugiat erat. Donec sit amet urna arcu. Vivamus ullamcorper, metus at imperdiet blandit, urna eros hendrerit turpis, quis mollis neque purus a nulla. In ut neque ante. Donec nec libero pulvinar, accumsan neque et, blandit ligula.</p>
      </div>
      <div class="col-md-6">
        <h1>This is a title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta quam at auctor tincidunt. Proin tempus nec arcu at scelerisque. Aliquam aliquam bibendum enim, eu hendrerit ex iaculis ac. Morbi lectus neque, dictum a magna nec, commodo feugiat erat. Donec sit amet urna arcu. Vivamus ullamcorper, metus at imperdiet blandit, urna eros hendrerit turpis, quis mollis neque purus a nulla. In ut neque ante. Donec nec libero pulvinar, accumsan neque et, blandit ligula.</p>
      </div>
    </div>
  </div>
</section>

<section class="bg-blue">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>Second section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta quam at auctor tincidunt. Proin tempus nec arcu at scelerisque. Aliquam aliquam bibendum enim, eu hendrerit ex iaculis ac. Morbi lectus neque, dictum a magna nec, commodo feugiat erat. Donec sit amet urna arcu. Vivamus ullamcorper, metus at imperdiet blandit, urna eros hendrerit turpis, quis mollis neque purus a nulla. In ut neque ante. Donec nec libero pulvinar, accumsan neque et, blandit ligula.</p>
      </div>
      <div class="col-md-6">
        <img src="./random_image.jpg"/>
      </div>
    </div>
  </div>
</section>

...

这是一个典型的网站页面，由不同的部分组成。只要你有一个连续的类似文章的文本在布局页面中呈现，Markdown 文件就可以了。

我如何使用 Hugo 正确地组织它而不在布局文件中包含所有内容？