更换标签显示以及分类显示,使用 highcharts 的 wordcloud 来实现一个更好看的标签云,并增加点击事件,实现原来的点击效果.官方案例.英文文档
本文使用官方提供的https cdn,注意https网站引用http会有问题
主要是判断url的name,分 tags 和 categories两种情况进行处理 全部文件如下:
{{- define "title" }}{{ T .Data.Plural }} - {{ .Site.Title }}{{ end -}} {{- define "content" -}} {{ $name := .Data.Plural -}} {{ $terms := .Data.Terms.ByCount -}} {{ $length := len $terms -}}<script src="https://code.highcharts.com.cn/highcharts/8.1.2/highcharts.js"></script> <script src="https://code.highcharts.com.cn/highcharts/8.1.2/modules/exporting.js"></script> <script src="https://code.highcharts.com.cn/highcharts/8.1.2/modules/wordcloud.js"></script> <script src="https://code.highcharts.com.cn/highcharts/8.1.2/modules/oldie.js"></script> {{ if eq $name "categories" -}} <div class="terms"> <div class="terms-title"> {{ if eq $length 0 -}} {{ T "zeroCategoryCounter" }} {{- else -}} {{ T "categoryCounter" $length }} {{- end }} </div> <div id=categories></div> <script> var terms = {{ $terms }}; length = terms.length var str = ""; for (i = 0; i < length; i++) { str += terms[i].Name + "," } var text = str; var data = text.split(/[,\. ]+/g) .reduce(function (arr, word) { var obj = arr.find(function (obj) { return obj.name === word; }); if (obj) { obj.weight += 1; } else { obj = { name: word, weight: 1 }; arr.push(obj); } return arr; }, []); Highcharts.chart('categories', { //highcharts logo credits: { enabled: false }, series: [{ type: 'wordcloud', data: data, rotation: 0,//字体不旋转 maxFontSize: 10,//最大字体 minFontSize: 1,//最小字体 style: { fontFamily: "微软雅黑", fontWeight: '500' } }], title: { text: '' }, //点击事件方法 plotOptions: { series: { cursor: 'pointer', events: { click: function (e) { // 单条数据 var path = e.point.options.name; window.location.href = "/categories/" + path; } } } }, }); </script> </div> {{- else if eq $name "tags" -}} <div class="terms"> <div class="terms-title"> {{ if eq $length 0 -}} {{ T "zeroTagCounter" }} {{- else -}} {{ T "tagCounter" $length }} {{- end }} </div> <div id=tags></div> <script> var terms = {{ $terms }}; length = terms.length var str = ""; for (i = 0; i < length; i++) { str += terms[i].Name + "," } var text = str; var data = text.split(/[,\. ]+/g) .reduce(function (arr, word) { var obj = arr.find(function (obj) { return obj.name === word; }); if (obj) { obj.weight += 1; } else { obj = { name: word, weight: 1 }; arr.push(obj); } return arr; }, []); Highcharts.chart('tags', { //highcharts logo credits: { enabled: false }, series: [{ type: 'wordcloud', data: data, rotation: 0,//字体不旋转 maxFontSize: 10,//最大字体 minFontSize: 1,//最小字体 style: { fontFamily: "微软雅黑", fontWeight: '500' } }], title: { text: '' }, //点击事件方法 plotOptions: { series: { cursor: 'pointer', events: { click: function (e) { // 单条数据 var path = e.point.options.name; window.location.href = "/tags/" + path; } } } }, }); </script> </div> {{- end }} {{- end }}