handsome模板改成五颜六色的字体

Author： Meet
发布时间：January 3, 2021
49235 views
16 comments
6037 words
Categories：网站搭建

就之前喜欢黑白板式
突然抽风喜欢花里胡哨的颜色
于是就把站改成五颜六色的字体
![][1]
今天有个小伙伴问我怎么改 我直接发个代码吧

```html
<script>
/*
* 2021年1月2日23:34:26
* 故梦
* admin@gmit.vip
*/
function sjcolor(){
	var colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999", "#3bca6e", "#f23232", "#834e75", "#23b7e5", "#f60"];
	/*设置颜色*/
	document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > a > span").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > span").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > b").forEach(e => {
		e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*左侧导航字体颜色*/
	document.querySelectorAll("#post-panel > div > div > div > div.panel-body > div.nav-tabs-alt > ul > li > a").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#post-panel > div > div > div > div").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#post-panel > div.blog-post > div > div.post-meta.wrapper-lg > h2 > a").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*首页面板*/
	document.querySelectorAll("#small_widgets > h1").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#small_widgets > ul").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#content > main > div > div > div > h1").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*文章标题*/
	document.querySelectorAll("#search_input").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*搜索框*/
	document.querySelectorAll("#content > main > div > div > h1").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#content > main > div > div > div > div a >span").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*友情链接*/
	document.querySelectorAll("#header > div > ul > li > div > div > div > div > div > div > a > span > span").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*工具导航*/
	document.querySelectorAll("#tag_toc > h5").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*文章目录*/
	document.querySelectorAll("#content > main > div > div > header > h1").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#typedWord").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*签名标题*/
	document.querySelectorAll("#tag_cloud-2 h5").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#tag_cloud-2 a").forEach(e => {
		e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*标签颜色*/
	document.querySelectorAll("#blog_info > ul > li > span.badge.pull-right").forEach(e => {
		e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*博客信息*/
	document.querySelectorAll("#blog_info > h5").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#widget-tabs-4-hots > h5").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#widget-tabs-4-hots > ul > li > div > h4 > a").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#widget-tabs-4-hots > ul > li > div > small > span > span.meta-value").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*热门文章颜色*/
	document.querySelectorAll("#widget-tabs-4-comments > h5").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#widget-tabs-4-comments > ul > li > div > div > a").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#widget-tabs-4-comments > ul > li > div > small > span").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*最新评论颜色*/
	document.querySelectorAll("#widget-tabs-4-random > h5").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#widget-tabs-4-random > ul > li > div > h4 > a").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	document.querySelectorAll("#widget-tabs-4-random > ul > li > div > small > span > span.meta-value").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*随机文章颜色*/
	document.querySelectorAll("#sidebar > section.widget.widget_categories.wrapper-md.clear.visible-lg.visible-md > h5").forEach(e => {
		e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
	});
	/*手机阅读标题*/
}sjcolor();
</script>
```

把这代码放在**handsome**模板的**footer.php**即可
然后把**sjcolor();**加到pjax回调函数里 不然页面加载之后颜色就没了
</div>

[1]: https://blog.gmit.vip/usr/uploads/2021/01/2971842122.png

Last modification：May 14, 2022

如果觉得我的文章对你有用，请随意赞赏
双击文章内容区域可以给本文点赞哦，快来试试吧

16 comments

Karlex
7 Mouths Ago

卧槽卧槽，大佬牛逼！支持一波 ::GMgif:GM_1::

Reply
苹果
9 Mouths Ago

楼主用的什么模板？

Reply
九灵鹿
March 6, 2021

那个，请问怎么把sjcolor();加到pjax回调函数里？
我不会用回调函数(ó﹏ò｡)

Reply
1. 故梦
  March 7, 2021
  
  @九灵鹿
  
  主题设置里面的pjax回调
  
  Reply
  1. 九灵鹿
    March 7, 2021
    
    @故梦
    
    弄好啦，感谢
    
    Reply
Cx330
February 12, 2021

再问下大佬，左边的分类和友链是怎么弄出来的，我屏蔽组成的话，就都没了呀

Reply
1. 故梦
  February 13, 2021
  
  @Cx330
  
  我用js加载的
  
  Reply
  1. Cx330
    February 17, 2021
    
    @故梦
    
    谢谢大佬，看了一下，自己还是不太会，尴尬
    
    Reply
yehua
January 18, 2021

爷来了::GMgif:GM_1::

Reply
1. 故梦
  January 18, 2021
  
  @yehua
  
  ::DSJ:dianshijiang_3::
  
  Reply
呆哥
January 3, 2021

已嫖

Reply
1. 故梦
  January 3, 2021
  
  @呆哥
  
  ::DSJ:dianshijiang_4::
  
  Reply
yszw
January 3, 2021

拿了顺便会添加到自己blog美化记录文章中以做记录（会注明来源）

Reply
1. 故梦
  January 3, 2021
  
  @yszw
  
  ::DSJ:dianshijiang_7:: 没问题
  
  Reply
你若安好便是晴天
January 3, 2021

不错，加油

Reply
1. 故梦
  January 3, 2021
  
  @你若安好便是晴天
  
  ::DSJ:dianshijiang_7::
  
  Reply