# Tag Cloud

**URL:** <https://discourse.gohugo.io/t/tag-cloud/6335>\
**Category:** tips & tricks\
**Created:** [April 26, 2017, 12:31am UTC](https://discourse.gohugo.io/t/tag-cloud/6335 "2017-04-26T00:31:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [April 26, 2017, 12:31am UTC](https://discourse.gohugo.io/t/tag-cloud/6335/1 "2017-04-26T00:31:15Z")

</div>

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

So I made it myself:

> <https://github.com/gohugoio/hugoThemesSite/blob/ff2c51f118fe932525715002895eda1f036877d7/layouts/partials/tag-cloud.html>

See it in action here:

[http://themes.gohugo.io/](http://themes.gohugo.io/)

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [April 26, 2017, 8:03am UTC](https://discourse.gohugo.io/t/tag-cloud/6335/2 "2017-04-26T08:03:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ITSecMedia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/itsecmedia/32/1552_2.png) [@ITSecMedia](https://discourse.gohugo.io/u/ITSecMedia)\
**Post date:** [August 29, 2017, 10:56am UTC](https://discourse.gohugo.io/t/tag-cloud/6335/3 "2017-08-29T10:56:31Z")

</div>

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/](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 }}
```

---

<div class="post-metadata">

**Author:** ![Reddog](https://avatars.discourse-cdn.com/v4/letter/r/ce73a5/32.png) [@Reddog](https://discourse.gohugo.io/u/Reddog)\
**Post date:** [February 10, 2020, 4:10am UTC](https://discourse.gohugo.io/t/tag-cloud/6335/4 "2020-02-10T04:10:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ITSecMedia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/itsecmedia/32/1552_2.png) [@ITSecMedia](https://discourse.gohugo.io/u/ITSecMedia)\
**Post date:** [February 10, 2020, 8:15am UTC](https://discourse.gohugo.io/t/tag-cloud/6335/5 "2020-02-10T08:15:03Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [February 11, 2020, 8:15am UTC](https://discourse.gohugo.io/t/tag-cloud/6335/6 "2020-02-11T08:15:05Z")

</div>

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