Control Content on Homepage
In Hugo, you can control which content from specific sections is rendered on the homepage by using Hugo's configuration file (config.toml
or config.yaml
) and by specifying a custom content order in your section front matter. Here are the steps to achieve this:
Edit your Hugo Configuration:
Open your Hugo site's configuration file (
config.toml
orconfig.yaml
) and add aSectionPagesMenu
parameter under[params]
. This parameter specifies which sections should be displayed on the homepage.In
config.toml
(TOML format):toml[params] SectionPagesMenu = ["section1", "section2"]
In
config.yaml
(YAML format):yamlparams: SectionPagesMenu: - section1 - section2
Replace
"section1"
and"section2"
with the names of the sections you want to display on the homepage.Set Custom Content Order (Optional):
By default, Hugo displays the content from each section in chronological order based on the publish date. If you want to specify a custom order for the content within a section, you can do so in the front matter of each content file within that section.
For example, if you have a section called "blog" and you want to control the order of blog posts, you can add an
order
parameter to the front matter of each post:markdown--- title: "My Blog Post" date: 2023-09-05 order: 2 --- This is the content of my blog post.
In this example, the
order
parameter is set to2
, which means this post will appear second in the section, regardless of its publish date.Render the Section Content on the Homepage:
Finally, in your homepage template (typically
layouts/index.html
), you can use Hugo's range function to iterate through the content of the sections specified inSectionPagesMenu
and display them as you like.For example, to list the content from the "section1" section on the homepage, you can use code like this:
html{{ range .Site.Sections.section1.Pages }} <!-- Render each page from section1 here --> <h2>{{ .Title }}</h2> {{ .Content }} {{ end }}
Repeat this process for each section you want to display on the homepage, customizing the layout and design as needed.
With these steps, you can control which content from specific sections is rendered on your Hugo website's homepage and even specify a custom order for that content if necessary.