增加标签云代替原有标签和分类效果
时间:2022-07-25
本文章向大家介绍增加标签云代替原有标签和分类效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
更换hugo
博客主题的原有标签
更换标签显示以及分类显示,使用 highcharts
的 wordcloud
来实现一个更好看的标签云,并增加点击事件,实现原来的点击效果.官方案例.英文文档
按官方顺序将js
文件导入或者使用cdn
引入
本文使用官方提供的https cdn
,注意https
网站引用http
会有问题
修改主题文件下的 even/layouts/_default/terms.html
文件
主要是判断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 }}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Golang channel 快速入门
- 潘石屹用Python解决100个问题 | 素数
- Spring 自动装配模式之构造函数装配方式
- 安全狗 {safedog} 最新版注入bypass
- C语言定时关机小程序
- 深入k8s:Pod对象中重要概念及用法
- Golang语言排序的几种方式
- 性能分析(1)- Java 进程导致 CPU 使用率升高,问题怎么定位?
- 安全服务之安全基线及加固(三)Apache篇
- 使用docsify来管理文献
- Cypress系列(41)- Cypress 的测试报告
- SSRF绕过
- 性能测试必备知识(6)- 如何查看“CPU 上下文切换”
- flex布局 div盒子居中
- 使用Apple Configurator 2提取商店ipa or app文件