Think of tags like… Metadatada. These are attributes you may associate with any content in Hugo, so as to make it easier to coalesce/reference for future you.
Tag Cloud
You’ve ABSOLUTELY seen one of these before. It may just be that you’ve not really paid any attention to it.
From this frontmatter snippit, Hugo will create tags/hugo and tags/tags pages for us. These pages are called term pages and the /tags is a taxonomy page.
Tangent! This is a different topic altogether.
If you want to change these pages you need to create templates For the tags and term pages. Respectively /layouts/tags/list.html and /layouts/tags/term.html. Mert wrote a bit about Hugo templates in this post and this post
Render the Tags of a page
To achieve the first one, Lets created a partial called get_tags.html:
This code:
Gets the tags from the page’s frontmatter.
Sorts them alphabetically
Returns HTML links which include the hash “#” symbol at the beginning of each tagname.
<divclass="tagcloud taxcloud bucket"><!-- https://gohugo.io/templates/taxonomy-templates/#taxonomy-methods -->{{-ifne(len$.Site.Taxonomies.tags)0-}}<!---
site.params.tagCloud:
style: 'button'
largestFontSize: 1.75
smallestFontSize: 0.25
minimumMatches: 1
--->{{-$largestFontSize:=$.Site.Params.tagCloud.largestFontSize|default1.6-}}{{-$smallestFontSize:=$.Site.Params.tagCloud.smallestFontSize|default0.5-}}{{-$fontSpread:=sub$largestFontSize$smallestFontSize-}}{{-$max:=add(len(index$.Site.Taxonomies.tags.ByCount0).Pages)1-}}{{-$min:=len(index$.Site.Taxonomies.tags.ByCount.Reverse0).Pages-}}{{-$minMatch:=$.Site.Params.tagCloud.minimumMatches|default0-}}{{-$spread:=sub$max$min-}}{{-$fontStep:=div$fontSpread$spread-}}{{-range$name,$taxonomy:=$.Site.Taxonomies.tags-}}{{-$tagCount:=len$taxonomy.Pages-}}{{-ifle$tagCount$minMatch-}}{{-warnf"[TAGCLOUD] $.Site.Params.tagCloud.minimumMatches has current value of %i. Excluding %q from tag cloud, as it has %s matches."$.Site.Params.tagCloud.minimumMatches$name$tagCount-}}{{-else-}}{{-$currentFontSize:=(add$smallestFontSize(mul(sub$tagCount$min)$fontStep))-}}{{-$weigth:=div(sub(math.Log$tagCount)(math.Log$min))(sub(math.Log$max)(math.Log$min))-}}{{-$currentFontSize:=(add$smallestFontSize(mul(sub$largestFontSize$smallestFontSize)$weigth))-}}{{-ifeq$.Site.Params.tagCloud.style"button"-}}<aclass="tag-button_link tagcloud-item tag-button"style="font-size: {{$currentFontSize}}rem;"href="{{"/tags/"|relURL}}{{$name|urlize}}"><spanclass="gdoc-tag gdoc-tax tax-button">{{$name}}<sup>{{$tagCount}}</sup></span></a>{{-else-}}{{-ifne$.Site.Params.tagCloud.style"simple"-}}{{-warnf" $.Site.Params.tagCloud.style has current value of %q. Current supported values are 'button' or 'simple'. Defaulting to 'simple'. "$.Site.Params.tagCloud.style-}}{{-end-}}<ahref="{{"/tags/"|relURL}}{{$name|urlize}}"class="tagcloud-item"style="font-size: {{$currentFontSize}}rem;">{{$name}}<sup>{{$tagCount}}</sup></a>{{-end-}}{{-end-}}{{-end-}}{{-end-}}</div>