@@ -33,15 +30,13 @@ of this site is an example of a list page.Leaf pages #
| |
|---|
| Layout: | layouts/_default/single.html |
| Content (standalone): | content/../page-name.md |
| Content (bundled): | content/../page-name/index.md |
Leaf pages in Hugo are basically standard content pages. They are defined as pages that don’t contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.
The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named index.md without an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.
Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named lion but override the title to be “Lion”.
To see how this looks in reality, check out the tags taxonomy listing on this site.
Leaf pages #
| |
|---|
| Layout: | layouts/_default/single.html |
| Content (standalone): | content/../page-name.md |
| Content (bundled): | content/../page-name/index.md |
Leaf pages in Hugo are basically standard content pages. They are defined as pages that don’t contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.
The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named index.md without an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.
.
└── content
└── blog
├── first-post.md # /blog/first-post
@@ -57,8 +52,7 @@ on this site.Leaf pages
tags: ["welcome", "new", "about", "first"]
---
_This_ is the content of my blog post.
-
Leaf pages have a wide variety of front matter
-parameters that can be used to customise how they are displayed.
External links #
Congo has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you’d like to link to, without replicating the content in your Hugo site.
In order to create an external link article, some special front matter needs to be set:
Leaf pages have a wide variety of front matter parameters that can be used to customise how they are displayed.
External links #
Congo has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you’d like to link to, without replicating the content in your Hugo site.
In order to create an external link article, some special front matter needs to be set:
---
title: "My Medium post"
date: 2022-01-25
externalUrl: "https://medium.com/"
@@ -69,15 +63,13 @@ parameters that can be used to customise how they are displayed. list: "local"
---
Along with the normal front matter parameters like title and summary, the externalUrl parameter is used to tell Congo that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.
Additionally, we use a special Hugo front matter parameter _build to prevent a normal page for this content being generated - there’s no point generating a page since we’re linking to an external URL!
The theme includes an archetype to make generating these external link articles simple. Just specify -k external when making new content.
hugo new -k external posts/my-post.md
-
Simple pages #
| |
|---|
| Layout: | layouts/_default/simple.html |
| Front Matter: | layout: "simple" |
Congo also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page front matter
-variables.
To enable the simple layout on a particular page, add the layout front matter variable with a value of "simple":
Simple pages #
| |
|---|
| Layout: | layouts/_default/simple.html |
| Front Matter: | layout: "simple" |
Congo also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page front matter variables.
To enable the simple layout on a particular page, add the layout front matter variable with a value of "simple":
---
title: "My landing page"
date: 2022-03-08
layout: "simple"
---
This page content is now full-width.
-
Custom layouts #
One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.
Layouts follow all the normal Hugo templating rules and more information is available in the official Hugo docs
-.
Overriding default layouts #
Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.
For example, creating a layouts/_default/single.html file will allow the layout of leaf pages to be completely customised.
Custom section layouts #
It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.
Let’s step through an example that creates a custom “Projects” page that lists projects using a special layout.
In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a list.html file.
Custom layouts #
One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.
Layouts follow all the normal Hugo templating rules and more information is available in the official Hugo docs.
Overriding default layouts #
Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.
For example, creating a layouts/_default/single.html file will allow the layout of leaf pages to be completely customised.
Custom section layouts #
It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.
Let’s step through an example that creates a custom “Projects” page that lists projects using a special layout.
In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a list.html file.
.
└── content
│ └── projects
│ ├── _index.md
@@ -117,9 +109,7 @@ variables.To enable the simple layout on a particular page, add the
{{ end }}
</section>
{{ end }}
-
Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.
Keep in mind that you’ll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the Advanced Customisation
-section.
When making custom templates like this one, it’s always easiest to take a look at how the default Congo template works and then use that as a guide. Remember, the Hugo docs
-are a great resource to learn more about creating templates too.