Tag Cloud

I searched for “tag cloud”, and assumed I could find some good examples, but no …

So I made it myself:

See it in action here:

http://themes.gohugo.io/

11 Likes

Thanks so much for this. Other solutions I’ve seen were JS based.

And of course it’s much better and faster to render tags directly from the template.

Please let me introduce a simple & elegant solution for a tag-cloud based on scss.

You can see that in action at the bottom of this page : https://www.bullion-investor.com/report/


=== tagcloud.scss ===

@for $i from 2 through 1000 {
    @if $i <= 20 { $size: 1em + ( 2 / 20 ) * $i; }
    @if $i >  20 { $size: 3em; }
    .font_size_#{$i} { font-size: $size; }
}

=== layout index.html ===

{{ with .Site.Taxonomies.tag }}
    <h1 class="list_title"><a href="{{ $baseUrl }}tag/">Tags</a></h1>
    <section class="taxonomy">
        {{ range $key, $value := . }}
        <span class="tag">
            <a href="{{ $baseUrl }}tag/{{ $key | urlize }}/" class="font_size_{{ .Count }}">
                {{ $key }}
            </a>
        </span>
        {{ end }}
    </section>
{{ end }}
4 Likes

It seems your bullion-investor link no longer works because CloudFlare thinks there is something malicious going on.

@Reddog thanks for the notification. I recently had big trouble and needed to use cloudflare. It should work now again for you. There been a few blocked countries.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.