# Multiple Content parts within the same page

**URL:** <https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337>\
**Category:** feature\
**Created:** [September 12, 2017, 8:01am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337 "2017-09-12T08:01:18Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![benrom](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benrom/32/4269_2.png) [@benrom](https://discourse.gohugo.io/u/benrom)\
**Post date:** [September 12, 2017, 8:01am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/1 "2017-09-12T08:01:18Z")

</div>

I would like to be able to write several parts of my content in markdown, all in the same page content file. I want this content to be in markdown because it has to be amendable by anybody without any html/hugo knowledge (for the marketing people writing the content).

Having only one content part to use per page might be ok for a blog where a post is usually a long block of text, but for a website where you have several different parts, there seems to be something missing here.

What would be great would be something like:

```auto
+++
title = "my page"
+++

~~~intro~~~
blabla
# this is pure markdown
- yes
- no
~~~

~~~aside~~~
*blablabla*
## still pure markdown
~~~

~~~testimonials[]~~~
my first customer
~~~

~~~testimonials[]~~~
my second customer
~~~

~~~content~~~
blabla
~~~

```

and then be able in my layout to use: `{{.Content.intro}}`, `{{.Content.aside}}`, loop over all `{{.Content.testimonials}}` …

I see several other ways to achieve something similar at the moment (shortcodes, variables in front matter, split content into several md files, extra content stored in data or layout, texts hardcoded in the template), but no solution seems to be as easy to use and write as this one: having all content of a page in the same file, that can be written in pure markdown (by anybody).

I’m new to Hugo so perhaps something similar can already be achieved with the same goal, I’ll be glad to be enlightened on this matter!

---

<div class="post-metadata">

**Author:** ![benmarte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benmarte/32/5948_2.png) [@benmarte](https://discourse.gohugo.io/u/benmarte)\
**Post date:** [September 12, 2017, 1:47pm UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/2 "2017-09-12T13:47:21Z")

</div>

I would make an excel file and use something like [excel-as-json](https://www.npmjs.com/package/excel-as-json) to export it to json and use that as a data template which you can then loop through to display it on your template.

That seems like the easiest route for those who have no html/markdown knowledge.

Good luck.

---

<div class="post-metadata">

**Author:** ![benrom](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benrom/32/4269_2.png) [@benrom](https://discourse.gohugo.io/u/benrom)\
**Post date:** [September 12, 2017, 1:57pm UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/3 "2017-09-12T13:57:33Z")

</div>

Thanks for the info, I didn’t think of that possibility.

What is edited is real page content though, not data, so it ought to live inside the content/ folder. Any other way, or anybody happy with my feature suggestion?

---

<div class="post-metadata">

**Author:** ![benmarte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benmarte/32/5948_2.png) [@benmarte](https://discourse.gohugo.io/u/benmarte)\
**Post date:** [September 12, 2017, 1:59pm UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/4 "2017-09-12T13:59:23Z")

</div>

Another option is making a section for testimonials for example and inserting a new .md file for each testimonial and looping through those in your template in order to display them.

Users can then add/edit them in the testimonial section using markdown.

---

<div class="post-metadata">

**Author:** ![benrom](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benrom/32/4269_2.png) [@benrom](https://discourse.gohugo.io/u/benrom)\
**Post date:** [September 12, 2017, 2:10pm UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/5 "2017-09-12T14:10:09Z")

</div>

That is a solution I pondered as discussed here: [Load multiple content files in a single template](https://discourse.gohugo.io/t/load-multiple-content-files-in-a-single-template/2566)  
where you need to set the layout to “empty”.

This feels like a hack and moreover it splits the content of the page into multiple files. If I reuse my testimonials for no page other than the homepage, why would it be separated?  
What about the “intro” and “aside” content that appear in my example. They would need to be stored in separate files even though they relate only to my home page for instance?

---

<div class="post-metadata">

**Author:** ![benrom](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benrom/32/4269_2.png) [@benrom](https://discourse.gohugo.io/u/benrom)\
**Post date:** [September 12, 2017, 2:17pm UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/6 "2017-09-12T14:17:28Z")

</div>

If I wanted to recreate [such a page](https://www.apple.com/imac-pro/) for instance with Hugo, how would I store the content?

I browsed through the Hugo templates gallery and found that very few can show content other than a single block of text per page. I believe it’s because Hugo doesn’t make it easy.

Being able to store multiple parts of content within the same document would make it easy to achieve such a thing. The layout for the page would just fetch the content parts by their name.

Related content within the same document + no hard coded texts in the layout = easy to edit.

---

<div class="post-metadata">

**Author:** ![benmarte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benmarte/32/5948_2.png) [@benmarte](https://discourse.gohugo.io/u/benmarte)\
**Post date:** [September 12, 2017, 2:28pm UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/7 "2017-09-12T14:28:05Z")

</div>

Another option is using [page params](https://gohugo.io/variables/page/#page-level-params) but that can get messy at least I wouldn’t opt for it. This way all your content would be in the same markdown file.

You can make an array of testimonials something like this:

`testimonials = ["testimonial 1", "testimonial 2", "etc"]`

Then loop through that in your template using the `Params.testimonials`

---

<div class="post-metadata">

**Author:** ![benrom](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benrom/32/4269_2.png) [@benrom](https://discourse.gohugo.io/u/benrom)\
**Post date:** [September 12, 2017, 2:33pm UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/8 "2017-09-12T14:33:46Z")

</div>

That’s another option I investigated, but as you said it’s messy to mix markdown content that can get quite long within the front matters.  
The content left in the “markdown” part of the file would be no different/more important from/than the other parts, but in usage it would be different.  
That feels like a hack again.

There’s currently one main content per page. We need to have several ones. That’s what most website pages apart from blogs require.

---

<div class="post-metadata">

**Author:** ![tanc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tanc/32/4268_2.png) [@tanc](https://discourse.gohugo.io/u/tanc)\
**Post date:** [September 28, 2017, 7:28am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/9 "2017-09-28T07:28:12Z")

</div>

I’m also interested to know whether there is a decent solution for this problem in Hugo yet?

---

<div class="post-metadata">

**Author:** ![tanc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tanc/32/4268_2.png) [@tanc](https://discourse.gohugo.io/u/tanc)\
**Post date:** [September 28, 2017, 7:32am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/10 "2017-09-28T07:32:44Z")

</div>

On the thread [Single page with nested content - #16 by rdwatters](https://discourse.gohugo.io/t/single-page-with-nested-content/2645/16) in April @rdwatters said:

> Hugo has developed a number of really powerful features in the last 13 months. It’s very easy to add markdown content to a single page in a variety of ways.
> 
> Perhaps start a new thread?

Would you care to elaborate in this thread? My particular need is for multiple chunks of Markdown content on a single page (in different regions of the page).

---

<div class="post-metadata">

**Author:** ![benrom](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benrom/32/4269_2.png) [@benrom](https://discourse.gohugo.io/u/benrom)\
**Post date:** [September 28, 2017, 7:35am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/11 "2017-09-28T07:35:52Z")

</div>

Here’s a description of what’s needed: “blocks” and how other CMSes handle it:

> **[How Different CMS's Handle Content Blocks | CSS-Tricks](https://css-tricks.com/different-cmss-handle-content-blocks/)**
>
> Imagine a very simple blog. Blog posts are just a title and a paragraph or three. In that case, having a CMS where you enter the title and those paragraphs

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [September 28, 2017, 7:54am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/12 "2017-09-28T07:54:36Z")

</div>

There are many, many ways to get single page layouts in Hugo. One can combine multiple pieces of content, or generate it from one single piece. There are examples of these methods in the theme showcase.

Create a single, long HTML document from markdown is possible, but not what it is made for. HTML is made for that, of which markdown provides a subset of functionality.

> [@benrom](#):
>
> If I reuse my testimonials for no page other than the homepage, why would it be separated?
> 
> What about the “intro” and “aside” content that appear in my example. They would need to be stored in separate files even though they relate only to my home page for instance?

It sounds like you have an aversion to a modular structure for your site’s content. That is completely valid, but it also means that complexity has to be consolidated into that one file. A lovely, convincing landing page is going to be complex if it has anything aside from block level elements, primarily paragraphs. Anything else, and you have to put the complexity somewhere.

Hugo makes it easy to put that complexity into layout templates, and that informs the design of systems (each theme or site built with Hugo). So while it is possible to build Hugo templates in a way that keeps all the content in one markdown file, there isn’t much benefit of Hugo if all you want is one well crafted page. There are better tools for that, and considering that files in `static` are copied over directly, you can even use those tools to generate the pages for your Hugo site. 🙂

---

<div class="post-metadata">

**Author:** ![Larry](https://avatars.discourse-cdn.com/v4/letter/l/47e85d/32.png) [@Larry](https://discourse.gohugo.io/u/Larry)\
**Post date:** [November 6, 2017, 11:27am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/13 "2017-11-06T11:27:38Z")

</div>

I have this similar need. I have different blocks within the same realm that should live together – and the template should decide how to use the data in the design. I can, of course use the same markdown and format them, but I might want to reorder different blocks in the future.

I tried putting everything in Params and using markdownify, and this works well enough that I’m okay with it, with one exception – I don’t need many shortcodes, but ref/relref would be great in maintaining the same consistency.

---

<div class="post-metadata">

**Author:** ![ChrisTucker](https://avatars.discourse-cdn.com/v4/letter/c/6f9a4e/32.png) [@ChrisTucker](https://discourse.gohugo.io/u/ChrisTucker)\
**Post date:** [February 19, 2018, 3:52am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/14 "2018-02-19T03:52:14Z")

</div>

Larry, if you’re still around, would you mind explaining a bit more how you did that? I’m new to Hugo and found this thread. I think I’d be okay with that Params solution, but I’m not sure how it works exactly. Could you give me a code sample? Thanks a lot.

---

<div class="post-metadata">

**Author:** ![regis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/regis/32/4958_2.png) [@regis](https://discourse.gohugo.io/u/regis)\
**Post date:** [February 19, 2018, 4:32am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/15 "2018-02-19T04:32:11Z")

</div>

You guys should check out [page bundles](https://gohugo.io/content-management/organization/#page-bundles)/[page resources](https://gohugo.io/content-management/page-resources/).

Any files can go in there, including .md which you can use in your template as any other page.

That’s how I would do it now. You can add as many .md to a page bundle as needed and use their own front matter to define what their are (section, blocks etc…)

---

<div class="post-metadata">

**Author:** ![benrom](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/benrom/32/4269_2.png) [@benrom](https://discourse.gohugo.io/u/benrom)\
**Post date:** [February 19, 2018, 8:59am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/16 "2018-02-19T08:59:47Z")

</div>

Page bundles look interesting, thanks @regis.

A problem though (excerpt from the documentation):

> Note that the home page bundle cannot contain other content pages, but other files (images etc.) are fine.

Too bad, the home page is typically the kind of page where this feature would be the most needed… Will this improve in future versions ? (it’s the only thing that prevents me from using Hugo).

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 19, 2018, 10:15am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/17 "2018-02-19T10:15:42Z")

</div>

> [@benrom](#):
>
> Too bad, the home page is typically the kind of page where this feature would be the most needed…

You can mark bundles as headless and use them in the home page:

```auto
/content/home_pages

index.md => headless: true
page1.md
page2.md

etc.

```

And in your home page template:

```auto
{{ $bundle := .Site.GetPage "page" "home_pages" }}
{{ range $bundle.Resources.ByType "page" }}
{{ .Title }}: {{ .Content }}
{{ end }}

```

The above is totally untested, but should work.

---

<div class="post-metadata">

**Author:** ![regis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/regis/32/4958_2.png) [@regis](https://discourse.gohugo.io/u/regis)\
**Post date:** [February 19, 2018, 12:09pm UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/18 "2018-02-19T12:09:53Z")

</div>

> [@bep](#):
>
> The above is totally untested, but should work.

It works. Been doing it myself.

---

<div class="post-metadata">

**Author:** ![Sebastian](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sebastian/32/6875_2.png) [@Sebastian](https://discourse.gohugo.io/u/Sebastian)\
**Post date:** [September 9, 2018, 8:04am UTC](https://discourse.gohugo.io/t/multiple-content-parts-within-the-same-page/8337/19 "2018-09-09T08:04:50Z")

</div>

This is great, thanks very much!

I am trying to solve a similar but slightly more complex issue and can’t find a solution. Instead of a home page with several differently styled content parts I am trying to create an “industry” template and use it for different industries. Each industry page then contains different content parts which should be styled differently.

Using your suggestion above, I would create e.g. a “health” html template and regarding content I would have the following files:

- content/health/index.md
- content/health/content1.md
- content/health/content2.md

In the “health” html template I would use

```
{{ $headlessBundle := .Site.GetPage "health" }}
{{ $contentSnippet := $headlessBundle.Resources.Match "content1.md" }}
{{ range $contentSnippet }}
{{ .Content }}
{{ end }}

```

This works.

However, I do not want to have a html template for each industry (e.g. “health”) but instead a generic html template called “industry.html” as all industry pages should look similar (same structure). Having such an “industry” html template I can’t use the above code anymore as the first code line should get an industry page like `{{ $headlessBundle := .Site.GetPage "health" }}`. Here I would need something like a dynamic industry variable that I could use to get the desired page, e.g. “health”, dependent on what url got initially requested. Something like `{{ $headlessBundle := .Site.GetPage "{{ VARIABLE_GOES_HERE }}" }}`

I hope you can understand what I am trying to say and to accomplish and would like to kindly ask, if you or anyone in this thread might have a solution proposal.

Thanks very much to everyone in advance,  
Sebastian