1.逻辑控制

定位到layouts/_default/terms.html,把之前的terms-tags标签控制代码注释掉,换成如下代码

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with $.Site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        {{ $largestFontSize := 1.5 }}
        {{ $smallestFontSize := 1 }}
        {{ $fontSpread := sub $largestFontSize $smallestFontSize }}
        {{ $max := add (len (index $.Site.Taxonomies.tags.ByCount 0).Pages) 1 }}
        {{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
        {{ $spread := sub $max $min }}
        {{ $fontStep := div $fontSpread $spread }}
        {{ $weigth := div (sub (math.Log $count) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
        {{ $currentFontSize := (add $smallestFontSize (mul (sub $largestFontSize $smallestFontSize) $weigth)) }}
        <a href="{{ .Permalink }}" style="font-size: {{ $currentFontSize }}rem; font-weight: {{ mul $currentFontSize 200 }};">
            {{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup>
        </a>
    </li>
    {{- end }}
    {{- end }}
</ul>

2.css修饰

定位到assets/css/extended/blank.css,添加如下代码

/*标签*/
.terms-tags {
    text-align: center;
}

.terms-tags a:hover {
    background: none;

    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.3);
}

.terms-tags a {
    border-radius: 30px;
    background: none;
    transition: transform 0.5s;
}

.dark .terms-tags a {
    background: none;
}

.dark .terms-tags a:hover {
    background: none;

    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.3);
}

.terms-tags li {
    margin: 5px;
}


我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1jvre40wyh59f