In this blog post, we will see how to customize the tags when displayed in the Hugo site, especially with the Fuji theme.

Disclaimer

Note: I use the Fuji Theme for Hugo.

I presume most of the configuration values should be common across all the themes. However, it is better to check with the theme documentation for the right way to get the data rendered and displayed correctly on the site, as the keywords used to display the data might be different in each theme.

Config changes to be done in the post-meta.html file

The layout for the tags should be modified appropriately in the <YOUR_SITE>\layouts\partials\post-meta.html file, as follows.

Note: The predefined set up has more or less the same thing, but no comma in it. I tried adding a comma in the default listing - after every individual tag element in displayed, however it adds a tag for all the elements uncontionally, which does not look good for the last element. Hence, made use of the snippet/gist from the sample github link, to add the comma for all but the last goes as listed above.

{{ if .Params.tags }}
    <span>
        <i class="iconfont icon-pricetags-sharp"></i>&nbsp;
        <em>
            {{ range $i, $t := .Params.tags }}
                {{ if $i }}, {{ end }}
                <a href="{{ relLangURL ( printf "tags/%s" ( $t | urlize ) ) }}">{{ $t}}</a>
            {{ end }}
        </em>
    </span>
{{ end }}

Screenshot

The changes look like the below.

CSV Tags- 16Jun2021

References

Cheers,
RM…
Raghavan alias Saravanan Muthu
16 Jun 2021 | Wed | 19 18 48 PM IST