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