Multiple Content Blocks on a Single Page?

support
1

I am very new to Hugo and am trying to evaluate if it would be a good fit. I am wondering if it is possible to use multiple content files on the same page.

Suppose I have a page that has topics A, B and C and I am concerned that at some point in the future we are going to want to change the order of those to be A, C and B. In addition I would like common headings for those in the theme so that all the pages have the same headings and icons regardless of content in those sections.

The concrete example I am working with is I have as headings for the three sections

Overview Heading
Overview content

Exploration Topics
Links and descriptions to those topics

Assignment Heading
Assignment content

Review Heading
Review content

We may, at some point want to swap the order of the assignment and exploration sections. To me it makes sense to have an md file for each of the overview, assignment and review and then let the template pull that content and put it under the respective heading. Then later, if we decide to muck with the order or change the icons associated with the headings or whatever that can be done in the template while leaving the md files alone.

I didn’t really see much info on doing something like this in the documentation and the posts dealing with it here seemed fairly dated. I was wondering if there were any newer solutions.

2

If I understand you right I have the same config in our sample site. The index.html basically has only partials like

{{ partial "site/topic-a" . }}

With this technique you can shuffle your topics around to your liking.

You also can use shortcodes in Markdownfiles where you can give parameters to the shortcode as well. Example:

{{< topic-a heading="Topic Heading" subheading="Topic A Subheading">}}

I think the docs for partials and shortcodes are very good. Also there are some videos from Mike which you should watch as a beginner.

Hope this helps, Leo

1 Like
3

This looks like it is very close to what I want. Do you have a link to the sample site you are referring to? There are several examples and I am not sure which one has the organization structure you are talking about.

Shortcodes look like a winner for the headers. I had forgotten about them.

The only piece I am still a little unclear on after reading about and watching the videos on partial templates is how I can split up/rearrange the markdown content. Would I have two separate .md files, one for section A and one for section B? If so how do I access a particular piece of markdown content with a partial? Seeing the sample would probably clarify that for me.

4

Here’s the link: https://legobitbucket@bitbucket.org/legobitbucket/hugo-template.git

Most of it is in German but I would say you get the hang of it. Take a close look at layouts/index.html which is the homepage consisting of Partials. Also take a look at the Markdown files in content because they have some shortcodes which you’ll find in layouts/shortcodes. Some shortcodes even call partials - that was just a test and it works.

What I don’t understand: Why would you access markdown content with a partial? It’s more the other way round: You access shortcodes from markdown files. You can have a ton of markdown files (even with HTML code in them) and arrange them in the templates as you like. But be aware that this really works only in templates.

Hope this helps, Leo