You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.4 KiB
HTML
39 lines
1.4 KiB
HTML
{{ partial "header.html" . }}
|
|
{{ $baseurl := .Site.BaseURL}}
|
|
{{ $data := .Data }}
|
|
<section class="taxonomy-terms">
|
|
<h1>{{ .Title }}</h1>
|
|
<i>Explore the {{ $data.Plural }} interactively:</i>
|
|
<div id="tag-wrapper" style="width: 100%; height: 400px;"></div>
|
|
Find out how this word cloud is generated: <a href="{{ $baseurl }}2020/adding-a-tag-cloud-to-my-hugo-blog/">Adding a Tag Cloud to my Hugo blog</a>
|
|
<br>
|
|
<h3>All {{ $data.Plural }} alphabetically</h3>
|
|
<ul>
|
|
{{ range $key, $value := .Data.Terms }}
|
|
<li><a href="{{ $baseurl }}{{ $data.Plural }}/{{ $key | urlize }}">{{ $key }}</a> {{ len $value }}</li>
|
|
{{ end }}
|
|
</ul>
|
|
<script src="{{ $baseurl }}js/wordcloud2.js"></script>
|
|
<script>
|
|
let tagArray = new Array();
|
|
{{ range $key, $value := .Data.Terms }}
|
|
tagArray.push([{{ $key }}, {{ len $value }} ])
|
|
{{ end }}
|
|
|
|
const tagWrapper = document.querySelector("#tag-wrapper");
|
|
WordCloud(tagWrapper, {
|
|
list: tagArray,
|
|
weightFactor: 10,
|
|
classes: "tag-cloud-item",
|
|
});
|
|
|
|
tagWrapper.addEventListener('wordcloudstop', function (e) {
|
|
document.querySelectorAll('.tag-cloud-item').forEach(function (element) {
|
|
const text = element.innerHTML;
|
|
element.innerHTML = `<a href="{{ $baseurl }}{{ $data.Plural }}/${text}/" style="color: inherit;">${text}</a>`;
|
|
});
|
|
});
|
|
</script>
|
|
</section>
|
|
{{ partial "footer.html" . }}
|