Theme Updates (Icons/Crumbs)

I have made some more updates to the theme for this site. Fontawesome icons have been added and I will be using them while updating the styling and creating new pages. There is now a breadcrumb trail, so you can navigate to any parent pages (such as Site Updates in the case of this post).

I may make improvements to the code in the future, but for the time being, it works as desired.

The theme is available via the GitHub repository go-hugo-theme-texotela.

To create the breadcrumb trail, I first create a partial layouts/partials/breadcrumb-trail.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

{{ if .Page.Parent }}
    {{ if .Page.Parent.IsHome }}
    <li class="pl-2">
        <a href="{{ .Page.Site.BaseURL }}" class="no-underline text-blue-900">
            <i class="fas fa-home" title="Home"></i>
        </a>
    </li>
    {{ else }}
        {{- partial "breadcrumb-trail" (dict "CurrentPage" false "Page" .Page.Parent) -}}
    {{ end }}
    <li aria-hidden="true" class="pl-1"><i class="fas fa-angle-double-right"></i></li>
    {{ if .CurrentPage }}
        <li class="pl-1">{{ .Page.Title }}</li>
    {{ else }}
    <li class="pl-1">
        <a href="{{ .Page.Permalink }}" class="text-blue-900">{{ .Page.Title }}</a>
    </li>
    {{ end }}
{{ end }}

It is then referenced in the page template layouts/_default/baseof.html.

1
2
3
4
5
6
7

{{ if not .IsHome }}
    <nav class="p-2 bg-gray-400 text-sm">
        <ul class="flex" aria-label="Breadcrumb">
            {{- partial "breadcrumb-trail" (dict "CurrentPage" true "Page" .) -}}
        </ul>
    </nav>
{{ end }}

To prevent it showing on the home page, a check is done {{ if not .IsHome }} before including the relevant styling and the partial with the required parameters, using the dict function. The CurrentPage parameter is set to true, since this is the initial iteration and the Page parameter is set to the current page context. A recursive iteration is performed, rendering links to the parent pages before rendering the current pages title.

In the partial, a check is made to ensure the page has a parent with {{ if .Page.Parent }}. Then it checks if the parent is the home page, if it is, the home icon by fontawesome is used and the home page linked to. If the parent isn’t the home page, the partial is included, this time with CurrentPage set to false and Page set to the parent.

The next thing to be rendered is the separator, hidden from screen readers with the aria-hidden attribute, since it is for visual purposes only.

The title for the page is then rendered, if the CurrentPage parameter is set to true. If CurrentPage is false, a link to the page (which will be an ancestor node) is rendered.

This demonstrates one way of rendering breadcrumbs. While the code is specific to Hugo, the logic used is also applicable to any situation where you need to process or display hierarchical data (such as a folder structure, or tasks with sub tasks).