自定义typecho handsome主题标签云颜色

简介: 自定义typecho handsome主题标签云颜色

更改方法

打开后台-更改外观-设置外观-开发者设置-选择好需要的颜色粘贴至自定义JavaScript即可

颜色也可以自行设定,修改代码中的十六进制颜色值即可

<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

JavaScript

复制

说明:如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中;
相关文章
|
4月前
|
前端开发
WordPress主题Rizhuti-V2广告位模块美化
WordPress主题Rizhuti-V2广告位模块美化
44 0
|
搜索推荐 前端开发 开发者
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
1017 0
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
|
4月前
|
前端开发
wordpress主题导航菜单栏目增加角标
wordpress主题导航菜单栏目增加角标
73 1
|
4月前
|
前端开发
WordPress主题底部纯文本文章列表
WordPress主题底部纯文本文章列表
30 0
|
6月前
|
前端开发 小程序
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
851 0
butterfly主题的下载及美化
butterfly主题的下载及美化
203 0
|
前端开发 搜索推荐 开发者
Typecho-handsome主题页脚美化
handsome主题中页脚美化,如下图所示, 可以让主题的页脚更加具有个性化
300 1
Typecho-handsome主题页脚美化
|
PHP
Typecho-handsome主题——时间轴日志模板
本篇文章主要讲述了如何为Typecho中handsome主题添加一个新的独立页面模板——时间轴日志
703 2
Typecho-handsome主题——时间轴日志模板
Typecho-handsome主题如何增加侧边导航栏
handsome主题在使用的过程中导航栏初始时只有首页一个导航页面,本篇文章主要讲解一下应该如何修改源代码增加多个导航栏并且为其设置子导航
280 1
Typecho-handsome主题如何增加侧边导航栏
|
前端开发 JavaScript 开发者
Typecho-handsome主题美化
本篇文章主要介绍一下handsome主题的美化教程
526 0
Typecho-handsome主题美化