Creating This Blog Part 3: Tag Functionality and Listings, and Adding an About Page.

This is a follow-up to two previous posts ( here and here) describing how I set up this blog. Here I describe a couple of extra pieces of the setup including listing tags for each post, and adding the about page.

Listing the Tags for Each Post

The Hyde theme, on which this Hugo site is based, does not list the post tags at the beginning of the page. I wanted to add this to the interface. Here is how I did it.

To specify the tags of a post, the header of a post should have a tags: entry, such as this:

---
title: "Creating This Blog Part 2"
date: 2022-02-01T21:12:04-05:00
draft: false
tags : ["Blog setup", "Hugo", "Multilingual i18n"]
categories: ["Hugo", "Coding"]
---

To get the tags to show up at the beginning of the post, one can add a simple code to the file /layouts/_default/single.html, which controls the layout of all the posts:

<p> 
  <strong>{{ i18n "Tags"}}: </strong>
  {{ range .Params.tags }}
      <br/> -- {{ . }} 
  {{ end }}
</p>

In this case, the output would be:

Tags:
– Blog setup
– Hugo
– Multilingual i18n

Here:

• The <strong>{{ i18n "Tags"}}: </strong> adds in bold the multilingual Tags snippet which accodding to the files en.toml and es.toml shows up as “Tags” if the page is in English, or “Etiquetas” if the page is in Spanish.
• The {{ range .Params.tags }} ... {{ end }} loops over the .Params.tags, which are the tags that are defined in the post.
• The <br/> -- {{ . }} adds a line break, a dash --, and the {{ . }} displays the tag name.

I wanted something fancier, which listed tags in a single line separated by commas, and more importantly, linked to the page that Hugo automatically generates for each tag. After several tweaks, this was the final code:

<p> 
  <strong>{{ i18n "Tags"}}: </strong>
  {{ range $i,  $e := .Params.tags }}
      {{- if $i -}}, {{ end -}}
      <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">{{ . }}</a>
  {{ end }}
</p>

What the fancier pieces of the code do is:

• The range $i, in the loop definition is a loop counter, to allow adding a comma after each tag link only after the first tag is listed (one does not want a comma at the beginning of the end of the list).
• The {{- if $i -}}, {{ end -}} adds a comma between each tag link only after the first tag is listed.
• The fancy looking <a href... creates a link to the Hugo automatically-generated page of the corresponding tag (of the form BASE_URL/blog/en/tags/katex/ if the tag is “KaTeX”).

Adding an “About” Page Which Does not use the Layout of the Posts.

This involved creating a new layout file. I created the layout layouts/_default/about.html with a very simple structure. Here are the contents of the file (it just adds a title, and the file contents through {{ .Content }}):

{{ define "main" }}
   <header>
     <h1>
       {{ .Title }}
     </h1>
   </header>

   {{ .Content }}
{{ end }}

Next step was to add the files content/about/about.md and content/about/about.es.md which had the actual contents of the about page. They also used a special layout and type in their headings:

---
title: "About This Blog"
date: 2021-12-13T17:19:54-05:00
layout: about
type: about
---

The layout: about is what makes sure this page is displayed with the about layout I showed above.

Then, it was important to not list this about page in the listing of all the posts, so to the file layouts/index.html which controls the layout for the post listings I added lines 5 and 19 below, which check to see that the Page it is trying to display does not have about type.

 1{{ define "main" -}}
 2  <!-- This is the "truncated blog posts page -->
 3  <div class="posts">
 4  {{ range .Site.RegularPages -}}
 5    {{ if ne .Type "about" }}  <!-- skips the static page with type about in content/about -->
 6      <article class="post">
 7        <h1 class="post-title">
 8          <a href="{{ .Permalink }}">{{ .Title }}</a>
 9        </h1>
10        <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date | time.Format ":date_long" }}</time>
11        <!-- <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> -->
12        {{ .Summary }}
13        {{ if .Truncated }}
14        <div class="read-more-link">
15          <a href="{{ .RelPermalink }}">{{ i18n "Read-More" }} ...</a>
16        </div>
17        {{ end }}
18      </article>
19    {{ end }}
20  {{- end }}
21  </div>
22{{- end }}

Last step was to add the about link to the sidebar menu. This was accomplished by adding to the site configuration file config.toml the lines:

[[languages.en.menu.main]]
    name = "About"
    identifier = "about"
    weight = 300
    url = "/about/about"

[[languages.es.menu.main]]
    name = "Acerca de este blog"
    identifier = "about"
    weight = 300
    url = "/about/about"

More on Creating This Blog

See other posts under the Blog setup tag.