Content Examples

If you’ve been reading the documentation in order, you should now know about all the features and configurations available in Congo. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.

The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.

Branch pages #

Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is _index.md.

Congo will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the title parameter in a branch page will allow overriding the page title.

Homepage #

The homepage in Congo is special in that it’s overarching design is controlled by the homepage layout config parameter. You can learn more about this in the Homepage Layout section.

If you want to add custom content to this page, you simply need to create a content/_index.md file. Anything in this file will then be included in your homepage.

Example:

---
title: "Welcome to Congo!"
description: "This is a demo of adding content to the homepage."
---
Welcome to my website! I'm really happy you stopped by.

This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links.

List pages #

List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.

Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a “Projects” section, you would create content/projects/. Then create a Markdown file for each of your projects.

A list page will be generated by default, however to customise the content, you should also create an _index.md page in this new directory.

.
└── content
    └── projects
        ├── _index.md          # /projects
        ├── first-project.md   # /projects/first-project
        └── another-project
            ├── index.md       # /projects/another-project
            └── project.jpg

Hugo will generate URLs for the pages in your projects folder accordingly.

Just like the homepage, content in the _index.md file will be output into the generated list index. Congo will then list any pages in this section below the content.

Example:

---
title: "Projects"
description: "Learn about some of my projects."
cascade:
  showReadingTime: false
---
This section contains all my current projects.

In this example, the special cascade parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page.

The samples section of this site is an example of a list page.

Taxonomy pages #

Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.

The terminology can get a little confusing so let’s explore an example using a taxonomy named animals.

Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at config/_default/taxonomies.toml and defining the taxonomy name.

# config/_default/taxonomies.toml

animal = "animals"

Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular animal equals the plural animals to create our example taxonomy.

Now that our animals taxonomy exists, it needs to be added to individual content items. It’s as simple as inserting it into the front matter:

---
title: "Into the Lion's Den"
description: "This week we're learning about lions."
animals: ["lion", "cat"]
---

This has now created two terms within our animals taxonomy - lion and cat.

Although it’s not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at /animals/ and the term pages can be found at /animals/lion/ and /animals/cat/.

The list page will list all the terms contained within the taxonomy. In this example, navigating to /animals/ will show a page that has links for “lion” and “cat” which take visitors to the individual term pages.

The term pages will list all the pages contained within that term. These term lists are essentially the same as normal list pages and behave in much the same way.

In order to add custom content to taxonomy pages, simply create _index.md files in the content folder using the taxonomy name as the sub-directory name.

.
└── content
    └── animals
        ├── _index.md       # /animals
        └── lion
            └── _index.md   # /animals/lion

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 #

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
        ├── second-post.md    # /blog/second-post
        └── third-post
            ├── index.md      # /blog/third-post
            └── image.jpg

When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an index.md file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.

Example:

---
title: "My First Blog Post"
date: 2022-01-25
description: "Welcome to my blog!"
summary: "Learn more about me and why I am starting this blog."
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:

---
title: "My Medium post"
date: 2022-01-25
externalUrl: "https://medium.com/"
summary: "I wrote a post on Medium."
showReadingTime: false
_build:
  render: "false"
  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

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
│       ├── first-project.md
│       └── second-project.md
└── layouts
    └── projects
        └── list.html

This list.html file will now override the default list template, but only for the projects section. Before we look at this file, lets first look at the individual project files.

---
title: "Congo"
date: 2021-08-11
icon: "github"
description: "A theme for Hugo built with Tailwind CSS."
topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/jpanther/congo/"
---

In this example we are assigning some metadata for each project that we can then use in our list template. There’s no page content, but there’s nothing stopping you from including it. It’s your own custom template after all!

With the projects defined, now we can create a list template that outputs the details of each project.

{{ define "main" }}
  <section class="mt-8">
    {{ range .Pages }}
      <article class="pb-6">
        <a class="flex" href="{{ .Params.externalUrl }}">
          <div class="mr-3 text-3xl text-neutral-300">
            <span class="relative inline-block align-text-bottom">
              {{ partial "icon.html" .Params.icon }}
            </span>
          </div>
          <div>
            <h3 class="flex text-xl font-semibold">
              {{ .Title }}
            </h3>
            <p class="text-sm text-neutral-400">
              {{ .Description }}
            </p>
          </div>
        </a>
      </article>
    {{ 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.