Tutorial: How to display a custom Section Title

tips & tricks
1

Here is a tutorial for a custom Section Title

Say we have 3 Sections in our site:
/exhibitions/, /artists/ and /art-fairs/

Hugo names Section list pages after the name of the directory, which is pretty straight forward.

But in this case we need the Art Fairs section to have a title of <title>Art Fairs</title> and not <title>Art-fairs</title> (that is the default way Hugo generates the title)

In your site’s <head> type the following

<title>{{ if .IsHome }}{{ .Title }}
(if on homepage (index.html) the Title is defined from config.toml)

{{ else }}

{{ if .IsNode }}{{if eq .Section "art-fairs"}}Art Fairs &middot; {{ .Site.Title }}{{end}}{{end}}

Here is the magic part.
First we use {{ if .IsNode }} to define that the following will be rendered on the section list page only. Then with {{if eq .Section "art-fairs"}} we tell Hugo the section in which we need the custom title Art Fairs &middot; {{ .Site.Title }}{{end}}{{end}}

Of course now that we declared a custom title for the Art Fairs section we need to state the title for the other sections and pages. Here is the full snippet, it’s a bit of a mouthful but it does what it’s supposed to do:

<title>{{ if .IsHome }}{{ .Title }}{{ else }}{{ if .IsNode }}{{if eq .Section "art-fairs"}}Art Fairs &middot; {{ .Site.Title }}{{end}}{{end}}{{ if .IsNode }}{{if eq .Section "artists"}}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}{{ end }}{{ if .IsNode }}{{if eq .Section "exhibitions"}}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}{{ end }}{{ if .IsPage }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}{{ end }}</title>

And there you have it. If you think that you can improve on this be my guest. I tried several combinations and this is the one that works for me.

2

I think it would be simpler to just create /art-fairs/_index.md with the title you want in front matter.

3 Likes
3

Thanks for this! It’s much simpler and it also solves a problem I had with lunr.js search results.

Even though the title changed into Art Fairs in the search results it was still listed as Art-fairs.

Now with the use of _index.md the search result is correct.

1 Like
4

My problem was similar, in that I wanted sections, taxonomies, and terms to display attractively (“sf” as “SF”, “dna-experiment” as “DNA Experiment”, etc), so I created a data file containing the mappings and a partial that looked them up:

data/casefix.toml

sf="SF"
tv="TV"
wtf="WTF"
dna-experiment="DNA Experiment"

layouts/partials/casefix.html

{{ index $.Site.Data.casefix (.Title | urlize) | default (.Title | humanize) }}

layouts/_default/list.html

...
<h2>{{ partial "casefix.html" . }}</h2>
...
2 Likes