Fragments of verbose memory

冗長な記憶の断片 - Web技術のメモをほぼ毎日更新(準備中)

Jan 19, 2021 - コメント - 日記

ブログにタグクラウドを追加してみました

このブログの右のサイドバーににタグクラウドを追加してみました。 ちゃんと動いているようですね。

TagCloud

このブログはHugo と言う静的サイトジェネレータを利用しています。サイドバーにタグクラウドを表示したかったので、 Hugoの掲示板を検索したら参考になりそうな投稿 があったので持ってきました。

themes/octopress/layouts/partials/sidebar.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
  {{ if not (eq (len $.Site.Taxonomies.tags) 0) }}
    {{ $fontUnit := "rem" }}
    {{ $largestFontSize := 2.0 }}
    {{ $smallestFontSize := 1.0 }}
    {{ $fontSpread := sub $largestFontSize $smallestFontSize }}
    {{ $max := len (index $.Site.Taxonomies.tags.ByCount 0).Pages }}
    {{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
    {{ $spread := sub $max $min }}
    {{ $fontStep := div $fontSpread $spread }}    
    <section class="even">
    <h1><a href="/tags/" style="text-decoration: none;">Tags</a></h1>
    <div id="tag-cloud" class="tag-cloud">
        {{ range $name, $taxnomy := $.Site.Taxonomies.tags }}
            {{ $currentTagCount := len $taxnomy.Pages }}
            {{ $currentFontSize := (add $smallestFontSize (mul (sub $currentTagCount $min) $fontStep) ) }}
            <a href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}" style="font-size:{{$currentFontSize}}{{$fontUnit}}">{{ $name }}</a>
        {{ end }}
    </div>
    </section>
  {{ end }}