Here’s a quick tip to show you how I’ve managed to create 2 different pages like home page on my website Game Design Quest.
Hugo doesn’t provide a function to manually import markdown files one by one in a kind of static template. Because of that, you have to use go templates and the range function as a replacement.
You will need to create a new section for your page that contains all of the content files you need. Here’s an example I put up for you :
The first file gets added to the main menu, so it is accessible from the navigation bar on the website. It has a type called test and it uses the layout called list. This means that it will be rendered using the list.HTML template file in the layouts/test folder of my theme.
The other 2 files have a type called test2, which will use to include them along with the first file on a single page. And they have a layout type of empty. This “empty” template is just an empty file called empty.HTML that is stored in the default theme folder. All of the files processed with this template will still be built by Hugo, but they will be completely empty in the final website.
Once your content to set up, you can work on the list.HTML template. You just have to use the following loop to load every file assigned to a specific type:
{{range where .Site.Pages "Type" "=" "your content’s type"}}
{{ .Content }}
{{ end }}
Here is the content of mine:
And the resulting page:
This is a bit cluncky, but as far as I know, there is no way to tell Hugo not to render the extra content files to their own pages. So I’m using the empty template to produce empty files, and then they can always be removed with a tool like Remove Empty Dirs. Or left as they are, they’re empty files anyway.
To me, having a way to:
Create static/landing pages using multiple, manually selected markdown files (maybe by having them in the template’s folder? If the template is static, this could make sense)
Prevent Hugo to render certain files to their own pages (bis)
Would be quite useful. Hugo offers a really flexible system, but it lacks a way to answer a common need for a webdesigner/content creator: taking bits of content and putting them into multiple blocks on a given page (but I’m not blaming anyone here! Even in raw html, the import function still isn’t supported everywhere). Although I believe this can all be done with JavaScript, I’d rather see something like that built-in.
I hope this can help some of you!