hexo(sakura)——标签、分类页面美化
一、效果
首先来看一下标签、分类页面美化后的效果
标签页面美化
分类页面美化
二、标签页面
1. tags页面资源文件
-
首先要新建一个tags页面
hexo new page tags -
编辑tags页面
打开站点文件夹下的source\tags\index.md，添加：--- title: tags + layout: tags-bubble date: 2020-4-25 22:14:16 --- -
在主题的
_config.yml中添加：标签: {path: /tags, fa: fa-tags },
2. 创建样式文件
标签页面
在themes\sakura\layout文件夹下新建tags-bubble.ejs文件，添加以下代码：
<script src="/js/bubble.js">script>
<div class="blank" style="padding-top: 75px;">
div>
<div id="content" class="site-content">
<div id="main">
<header class="page-header">
<h1 class="cat-title">
标签云h1>
<span class="cat-des">
<p>
<%- "Tags " + site.tags.length %>p>
span>
header>
<div id="main-part">
<div class="tag-cloud">
<div class="tag-cloud-tags" hidden>
<%- tagcloud({
min_font: 15,
max_font: 30,
amount: 200,
color: true,
start_color: '#ff6666',
end_color: '#0099cc'
}) %>
div>
div>
<div class="tagwrapper">
<div class="tagbubble">div>
div>
<script type="text/javascript">
var alltags = document.getElementsByClassName('tag-cloud-tags');
var tags = alltags[0].getElementsByTagName('a');
var bo = new Array();
var co = new Array();
for (var i = 0; i < 4; i++) {
bo.push("b" + i);
}
for (var i = 0; i < 7; i++) {
co.push("c" + i);
}
var divDom = document.querySelector('.tagbubble')
//var divDom = document.getElementsByClassName('tagbubble')[0];
for (var i = 0; i < tags.length; i++) {
var atag = document.createElement('a');
var boStyle = bo[Math.floor(Math.random() * 4)];
var coStyle = co[Math.floor(Math.random() * 7)];
if (tags[i].innerText.length > 10) {
boStyle = "b0";
} else if (tags[i].innerText.length > 5 && tags[i].innerText.length < 10) {
boStyle = "b1";
}
atag.setAttribute("class", boStyle + " " + coStyle);
atag.setAttribute("href", tags[i].href);
atag.innerText = tags[i].innerText;
divDom.appendChild(atag);
}
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
//移动端页面
return 80;
} else {
//pc端页面
return 150;
}
}
var tagRadius = browserRedirect();
/*3D标签云*/
tagcloud({
selector: ".tagbubble", //元素选择器
fontsize: 14, //基本字体大小, 单位px
radius: tagRadius, //滚动半径, 单位px 页面宽度和高度的五分之一
mspeed: "slow", //滚动最大速度, 取值: slow, normal(默认), fast
ispeed: "slow", //滚动初速度, 取值: slow, normal(默认), fast
direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
});
script>
div>
div>
div>
创建样式文件
在themes\sakura\layout\source\css文件夹下新建一个tag-bubble.css文件，添加以下代码：
.tagwrapper {
margin: 0 auto;
padding: 0;
height: 220px;
width: 700px;
min-width: 100px;
}
.tagbubble {
position: relative;
margin-top: 300px;
}
.tagbubble a {
display: block;
border-radius: 50%;
color: #fff;
font-weight: bold;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.b0 {
width: 95px;
height: 90px;
line-height: 90px;
}
.b1 {
width: 70px;
height: 70px;
line-height: 55px;
}
.b2 {
width: 60px;
height: 60px;
line-height: 60px;
}
.b3 {
width: 45px;
height: 45px;
line-height: 40px;
}
.c0 {
background: -moz-linear-gradient(top, #d1e5fd 0%, #3d86f4 100%);
background: -webkit-linear-gradient(top, #d1e5fd 0%, #3d86f4 100%);
background: -o-linear-gradient(top, #d1e5fd 0%, #3d86f4 100%);
background: -ms-linear-gradient(top, #d1e5fd 0%, #3d86f4 100%);
background: linear-gradient(to bottom, #d1e5fd 0%, #3d86f4 100%);
}
.c1 {
background: -moz-linear-gradient(top, #b9f8ff 0%, #1de7ff 100%);
background: -webkit-linear-gradient(top, #b9f8ff 0%, #1de7ff 100%);
background: -o-linear-gradient(top, #b9f8ff 0%, #1de7ff 100%);
background: -ms-linear-gradient(top, #b9f8ff 0%, #1de7ff 100%);
background: linear-gradient(to bottom, #b9f8ff 0%, #1de7ff 100%);
}
.c2 {
background: -moz-linear-gradient(top, #fff4e2 0%, #ffd79c 100%);
background: -webkit-linear-gradient(top, #fff4e2 0%, #ffd79c 100%);
background: -o-linear-gradient(top, #fff4e2 0%, #ffd79c 100%);
background: -ms-linear-gradient(top, #fff4e2 0%, #ffd79c 100%);
background: linear-gradient(to bottom, #fff4e2 0%, #ffd79c 100%);
}
.c3 {
background: -moz-linear-gradient(top, #fef4fa 0%, #fbbae0 100%);
background: -webkit-linear-gradient(top, #fef4fa 0%, #fbbae0 100%);
background: -o-linear-gradient(top, #fef4fa 0%, #fbbae0 100%);
background: -ms-linear-gradient(top, #fef4fa 0%, #fbbae0 100%);
background: linear-gradient(to bottom, #fef4fa 0%, #fbbae0 100%);
}
.c4 {
background: -moz-linear-gradient(top, #fedc90 0%, #ffb515 100%);
background: -webkit-linear-gradient(top, #fedc90 0%, #ffb515 100%);
background: -o-linear-gradient(top, #fedc90 0%, #ffb515 100%);
background: -ms-linear-gradient(top, #fedc90 0%, #ffb515 100%);
background: linear-gradient(to bottom, #fedc90 0%, #ffb515 100%);
}
.c5 {
background: -moz-linear-gradient(top, #bcf7ca 0%, #1fda4b 100%);
background: -webkit-linear-gradient(top, #bcf7ca 0%, #1fda4b 100%);
background: -o-linear-gradient(top, #bcf7ca 0%, #1fda4b 100%);
background: -ms-linear-gradient(top, #bcf7ca 0%, #1fda4b 100%);
background: linear-gradient(to bottom, #bcf7ca 0%, #1fda4b 100%);
}
.c6 {
background: -moz-linear-gradient(top, #f7cdf8 0%, #db43e7 100%);
background: -webkit-linear-gradient(top, #f7cdf8 0%, #db43e7 100%);
background: -o-linear-gradient(top, #f7cdf8 0%, #db43e7 100%);
background: -ms-linear-gradient(top, #f7cdf8 0%, #db43e7 100%);
background: linear-gradient(to bottom, #f7cdf8 0%, #db43e7 100%);
}
/* 移动端样式 */
@media (max-width: 767px) {
.tagwrapper {
width: 10px;
margin-left: 20px;
min-width: 0px;
}
.tagbubble {
width: 300px;
min-width: 0px;
margin-top: 200px;
margin-left: 10px;
}
.tagbubble a {
font-size: 13px;
}
.b0 {
width: 65px;
height: 65px;
line-height: 60px;
}
.b1 {
width: 50px;
height: 50px;
line-height: 45px;
}
.b2 {
width: 40px;
height: 40px;
line-height: 40px;
}
.b3 {
width: 35px;
height: 35px;
line-height: 35px;
}
}
创建js文件
在themes\sakura\layout\source\js文件夹下新建一个bubble.js文件，添加以下代码：
/*
* 3d标签云
* 功能：鼠标移入标签，当前标签静止放大
* 说明：
* */
window.tagcloud = (function(win, doc) { // ns
// 判断对象
function isObject (obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
// 构造函数
function TagCloud (options) {
var self = this;
self.config = TagCloud._getConfig(options);
self.box = self.config.element; //组件元素
self.fontsize = self.config.fontsize; //平均字体大小
self.radius = self.config.radius; //滚动半径
self.depth = 2 * self.radius; //滚动深度
self.size = 2 * self.radius; //随鼠标滚动变速作用区域
self.mspeed = TagCloud._getMsSpeed(self.config.mspeed);
self.ispeed = TagCloud._getIsSpeed(self.config.ispeed);
self.items = self._getItems();
self.direction = self.config.direction; //初始滚动方向
self.keep = self.config.keep; //鼠标移出后是否保持之前滚动
//初始化
self.active = false; //是否为激活状态
self.lasta = 1;
self.lastb = 1;
self.mouseX0 = self.ispeed * Math.sin(self.direction * Math.PI / 180); //鼠标与滚动圆心x轴初始距离
self.mouseY0 = -self.ispeed * Math.cos(self.direction * Math.PI / 180); //鼠标与滚动圆心y轴初始距离
self.mouseX = self.mouseX0; //鼠标与滚动圆心x轴距离
self.mouseY = self.mouseY0; //鼠标与滚动圆心y轴距离
self.index = -1;
//鼠标移入
TagCloud._on(self.box, 'mouseover', function () {
self.active = true;
});
//鼠标移出
TagCloud._on(self.box, 'mouseout', function () {
self.active = false;
});
//鼠标在内移动
TagCloud._on(self.keep ? win : self.box, 'mousemove', function (ev) {
var oEvent = win.event || ev;
var boxPosition = self.box.getBoundingClientRect();
self.mouseX = (oEvent.clientX - (boxPosition.left + self.box.offsetWidth / 2)) / 5;
self.mouseY = (oEvent.clientY - (boxPosition.top + self.box.offsetHeight / 2)) / 5;
});
for (var j = 0, len = self.items.length; j < len; j++) {
self.items[j].element.index=j;
//鼠标移出子元素,当前元素静止放大
self.items[j].element.onmouseover = function(){
self.index = this.index;
};
//鼠标移出子元素,当前元素继续滚动
self.items[j].element.onmouseout = function(){
self.index = -1;
};
}
//定时更新
TagCloud.boxs.push(self.box);
self.update(self); //初始更新
self.box.style.visibility = "visible";
self.box.style.position = "relative";
// self.box.style.minHeight = 1.2 * self.size + "px";
// self.box.style.minWidth = 2.5 * self.size + "px";
self.box.style.minHeight = 0 * self.size + "px";
self.box.style.minWidth = 0 * self.size + "px";
for (var j = 0, len = self.items.length; j < len; j++) {
self.items[j].element.style.position = "absolute";
self.items[j].element.style.zIndex = j + 1;
}
self.up = setInterval(function() {
self.update(self);
}, 10);
}
//实例
TagCloud.boxs = []; //实例元素数组
// 静态方法们
TagCloud._set = function (element) {
if (TagCloud.boxs.indexOf(element) == -1) {//ie8不支持数组的indexOf方法
return true;
}
};
//添加数组IndexOf方法
if (!Array.prototype.indexOf){
Array.prototype.indexOf = function(elt /*, from*/){
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++){
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
TagCloud._getConfig = function (config) {
var defaultConfig = { //默认值
fontsize: 16, //基本字体大小, 单位px
radius: 60, //滚动半径, 单位px
mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast
ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
keep: true //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
};
if(isObject(config)) {
for(var i in config) {
if(config.hasOwnProperty(i)) {//hasOwnProperty()用来判断一个属性是定义在对象本身而不是继承自原型链
defaultConfig[i] = config[i]; //用户配置
}
}
}
return defaultConfig;// 配置 Merge
};
TagCloud._getMsSpeed = function (mspeed) { //滚动最大速度
var speedMap = {
slow: 1.5,
normal: 3,
fast: 5
};
return speedMap[mspeed] || 3;
};
TagCloud._getIsSpeed = function (ispeed) { //滚动初速度
var speedMap = {
slow: 10,
normal: 25,
fast: 50
};
return speedMap[ispeed] || 25;
};
TagCloud._getSc = function(a, b) {
var l = Math.PI / 180;
//数组顺序0,1,2,3表示asin,acos,bsin,bcos
return [
Math.sin(a * l),
Math.cos(a * l),
Math.sin(b * l),
Math.cos(b * l)
];
};
TagCloud._on = function (ele, eve, handler, cap) {
if (ele.addEventListener) {
ele.addEventListener(eve, handler, cap);
} else if (ele.attachEvent) {
ele.attachEvent('on' + eve, handler);
} else {
ele['on' + eve] = handler;
}
};
// 原型方法
TagCloud.prototype = {
constructor: TagCloud, // 反向引用构造器
update: function () {
var self = this, a, b;
if (!self.active && !self.keep) {
self.mouseX = Math.abs(self.mouseX - self.mouseX0) < 1 ? self.mouseX0 : (self.mouseX + self.mouseX0) / 2; //重置鼠标与滚动圆心x轴距离
self.mouseY = Math.abs(self.mouseY - self.mouseY0) < 1 ? self.mouseY0 : (self.mouseY + self.mouseY0) / 2; //重置鼠标与滚动圆心y轴距离
}
a = -(Math.min(Math.max(-self.mouseY, -self.size), self.size) / self.radius ) * self.mspeed;
b = (Math.min(Math.max(-self.mouseX, -self.size), self.size) / self.radius ) * self.mspeed;
if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return; }
self.lasta = a;
self.lastb = b;
var sc = TagCloud._getSc(a, b);
for (var j = 0, len = self.items.length; j < len; j++) {
var rx1 = self.items[j].x,
ry1 = self.items[j].y*sc[1] + self.items[j].z*(-sc[0]),
rz1 = self.items[j].y*sc[0] + self.items[j].z*sc[1];
var rx2 = rx1 * sc[3] + rz1 * sc[2],
ry2 = ry1,
rz2 = rz1 * sc[3] - rx1 * sc[2];
if(self.index==j){
self.items[j].scale = 1; //取值范围0.6 ~ 3
self.items[j].fontsize = 16;
self.items[j].alpha = 1;
self.items[j].element.style.zIndex = 99;
}else{
var per = self.depth / (self.depth + rz2);
self.items[j].x = rx2;
self.items[j].y = ry2;
self.items[j].z = rz2;
self.items[j].scale = per; //取值范围0.6 ~ 3
self.items[j].fontsize = Math.ceil(per * 2) + self.fontsize - 6;
self.items[j].alpha = 1.5 * per - 0.5;
self.items[j].element.style.zIndex = Math.ceil(per*10-5);
}
//self.items[j].element.style.fontSize = self.items[j].fontsize + "px";//字体变大小
self.items[j].element.style.left = self.items[j].x + (self.box.offsetWidth - self.items[j].offsetWidth) / 2 + "px";
self.items[j].element.style.top = self.items[j].y + (self.box.offsetHeight - self.items[j].offsetHeight) / 2 + "px";
self.items[j].element.style.filter = "alpha(opacity=" + 100 * self.items[j].alpha + ")";
self.items[j].element.style.opacity = self.items[j].alpha;
}
},
_getItems: function () {
var self = this,
items = [],
element = self.box.children, // children 全部是Element
length = element.length,
item;
for (var i = 0; i < length; i++) {
item = {};
item.angle = {};
item.angle.phi = Math.acos(-1 + (2 * i + 1) / length);
item.angle.theta = Math.sqrt((length + 1) * Math.PI) * item.angle.phi;
item.element = element[i];
item.offsetWidth = item.element.offsetWidth;
item.offsetHeight = item.element.offsetHeight;
item.x = self.radius * 1.5 * Math.cos(item.angle.theta) * Math.sin(item.angle.phi);
item.y = self.radius * 1.5 * Math.sin(item.angle.theta) * Math.sin(item.angle.phi);
item.z = self.radius * 1.5 * Math.cos(item.angle.phi);
item.element.style.left = item.x + (self.box.offsetWidth - item.offsetWidth) / 2 + "px";
item.element.style.top = item.y + (self.box.offsetHeight - item.offsetHeight) / 2 + "px";
items.push(item);
}
return items; //单元素数组
}
};
if (!doc.querySelectorAll) {//ie7不支持querySelectorAll，所以要重新定义
doc.querySelectorAll = function (selectors) {
var style = doc.createElement('style'), elements = [], element;
doc.documentElement.firstChild.appendChild(style);
doc._qsa = [];
style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
window.scrollBy(0, 0);
style.parentNode.removeChild(style);
while (doc._qsa.length) {
element = doc._qsa.shift();
element.style.removeAttribute('x-qsa');
elements.push(element);
}
doc._qsa = null;
return elements;
};
}
return function (options) { // factory
options = options || {}; // 短路语法
var selector = options.selector || '.tagcloud', //默认选择class为tagcloud的元素
elements = doc.querySelectorAll(selector),
instance = [];
for (var index = 0, len = elements.length; index < len; index++) {
options.element = elements[index];
if (!!TagCloud._set(options.element)) {
instance.push(new TagCloud(options));
}
}
return instance;
};
})(window, document);
引入tag-bubble.css和bubble.js
bubble.js在tags-bubble.ejs的第一行引入了，不需要再次引入
引入tag-bubble.css，在themes\sakura\layout\_partial\head.ejs中添加：
<link rel="stylesheet" href="/css/tag-bubble.css">
大约在第40行左右：
效果
标签云
三、分类页面
1. 分类页面资源文件
-
首先要新建一个categories页面
hexo new page categories -
编辑tags页面
打开站点文件夹下的
source\categories\index.md，添加：--- title: categories + layout: categories-love date: 2020-4-25 22:14:16 --- -
在主题的
_config.yml中添加：分类: {path: /categories, fa: fa-th-list faa-bounce },
2. 创建样式文件
标签页面
在themes\sakura\layout文件夹下新建categories-love.ejs文件，添加以下代码：
<div class="blank" style="padding-top: 75px;">
div>
<div id="content" class="site-content">
<div id="main">
<header class="page-header">
<h1 class="cat-title">
分类h1>
<span class="cat-des">
<p>
<%- "Categories " + site.categories.length %>p>
span>
header>
<div id="main-part">
<div class="category-all-page">
<div class="category-all" hidden>
<%- tagcloud({
min_font: 15,
max_font: 30,
amount: 200,
color: true,
start_color: '#ff6666',
end_color: '#0099cc'
}) %>
div>
div>
<div class="categorylove">div>
<script type="text/javascript">
var categories = document.getElementsByClassName('category-all');
//var categories = document.querySelector('.category-all');
//隐藏category-all这个div
categories[0].setAttribute("hidden", "hidden");
var category = categories[0].getElementsByTagName('a');
var words = ['❤️'];
for (var i = 0; i < category.length; i++) {
// words.push(category[i].innerHTML)
words.push(category[i]);
words.push('♠');
}
// words.push('');
var dom = {
love: document.querySelector('.categorylove')
}
dom.love.style.setProperty('--particles', words.length)
words.forEach((word, i) => {
let atag = document.createElement('a');
atag.style.setProperty('--n', i + 1);
atag.style.setProperty('text-decoration', 'none');
atag.style.setProperty('border-bottom', 'none');
var r = Math.floor(Math.random() * 75 + 130);
var g = Math.floor(Math.random() * 75 + 100);
var b = Math.floor(Math.random() * 75 + 80);
atag.style.setProperty("color", "rgb(" + r + "," + g + "," + b + ")");
atag.setAttribute("href", word.href);
atag.innerText = word.innerText;
if (word.href == undefined) {
atag.setAttribute("href", "#");
atag.innerText = word;
}
dom.love.appendChild(atag);
})
script>
div>
div>
div>
创建样式文件
在themes\sakura\layout\source\css文件夹下新建一个categories-love.css文件，添加以下代码：
.categorylove {
width: 500px;
height: 650px;
position: relative;
margin: 60px auto
}
.categorylove a {
position: absolute;
left: 0;
font-size: 20px;
font-family: sans-serif;
text-shadow: 0 0 1em #fff;
animation: x-move 10s ease-in-out infinite alternate, y-move 20s linear infinite;
animation-delay: calc(30s / var(--particles) * var(--n) * -1);
user-select: auto
}
.categorylove a:first-child {
color: #ff4500;
font-size: 3em;
text-shadow: 0 0 .1em #000, 0 0 1em #fff;
z-index: 1
}
@keyframes x-move {
to {
left: 450px
}
}
@keyframes y-move {
0% {
transform: translateY(180px)
}
10% {
transform: translateY(45px)
}
15% {
transform: translateY(5px)
}
18% {
transform: translateY(0)
}
20% {
transform: translateY(5px)
}
22% {
transform: translateY(35px)
}
24% {
transform: translateY(65px)
}
25% {
transform: translateY(110px)
}
26% {
transform: translateY(65px)
}
28% {
transform: translateY(35px)
}
30% {
transform: translateY(5px)
}
32% {
transform: translateY(0)
}
35% {
transform: translateY(5px)
}
40% {
transform: translateY(45px)
}
50% {
transform: translateY(180px)
}
71% {
transform: translateY(430px)
}
72.5% {
transform: translateY(440px)
}
75% {
transform: translateY(450px)
}
77.5% {
transform: translateY(440px)
}
79% {
transform: translateY(430px)
}
100% {
transform: translateY(180px)
}
}
@media (max-width:767px) {
.categorylove {
width: 360px;
height: 450px;
margin: 30px auto
}
@keyframes x-move {
to {
left: 285px
}
}
}
引入categories-love.css
在themes\sakura\layout\_partial\head.ejs中添加：
<link rel="stylesheet" href="/css/categories-love.css">
大约在第40行左右（标签页面引入的tag-bubble.css下方）：
效果
分类
四、参考文章
标签云参数配置：Hexo（sakura）自定义标签云
标签和分类页面美化样式（一篇hexo+next的标签云美化）：Hexo Next主题之自定义标签页
欢迎大家评论区交流，一起交就学习