菜单标签页添加彩色标签
我的小站Nickxie's Blog，首先看看显示的效果吧，标签页：
标签页
算不上特别好看，勉强看得过去吧😀，每次刷新都会有不同的颜色哦！修改步骤也是来自于别人的博客，我会放到文章的参考里面，当然也有我自己修改和添加的一部分。
- 在themes\next\layout下新建
tag-color.swig，修改里面的内容为：
<script type="text/javascript">
var alltags = document.getElementsByClassName('tag-cloud-tags');
var tags = alltags[0].getElementsByTagName('a');
for (var i = tags.length - 1; i >= 0; i--) {
var golden_ratio = 0.618033988749895;
var s = 0.5;
var v = 0.999;
var h = golden_ratio + Math.random()*0.8 - 0.5;
var h_i = parseInt(h * 6);
var f = h * 6 - h_i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var r, g, b;
switch (h_i) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3 :
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
case 5:
r = v;
g = p;
b = q;
break;
default:
r = 1;
g = 1;
b = 1;
}
tags[i].style.background = "rgba("+parseInt(r*255)+","+parseInt(g*255)+","+parseInt(b*255)+","+0.5+")";
}
</script>
<style>
.tag-cloud-tags{
text-align: center;
counter-reset: tags;
}
.tag-cloud-tags a{
display: inline-block;
border: 0px;
border-radius: 10px;
padding: 0px 10px;
margin: 8px;
color: rgba(34, 34, 34, 0.8);
}
/* 文字前添加相应的符号，content后的Unicode可以自定义*/
.tag-cloud-tags a:before{
font-family: 'Font Awesome 5 Free';
content: "\f02b";
font-weight: 900;
}
.tag-cloud-tags a:hover{
box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
transform: scale(1.1);
transition-duration: 0.15s;
}
</style>
随机生成漂亮的颜色
这里我把原来的随机生成颜色换成了一种黄金分割随机生成好看的颜色，参考了博主的函数。之前参考这篇博客进行修改tag-color时，会在标签之前生成一个未识别的符号，可能是博主没有改好，这里我想用font awesome的i标签，但是这里使用的是before添加content来实现，查了一下CSS里before和content的用法，并不能直接添加元素，但是可以添加特殊符号的Unicode，我就直接在font awesome上复制了相应的Unicode，粘贴到content: "\f02b"，但是会显示一个正方形。这个问题是通过在issue里看到需要添加相应的font-weight和font-family属性，记录一下解决问题的流程，哈哈。
- 打开theme/next/layout/page.swig，搜索
<div class="tag-cloud-title">，修改代码如下：
<div class="post-body{%- if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}">
{%- if page.type === 'tags' %}
<div class="tag-cloud">
<div class="tag-cloud-title">
{{ _p('counter.tag_cloud', site.tags.length) }}
</div>
<div class="tag-cloud-tags">
{{ tagcloud({
min_font : theme.tagcloud.min,
max_font : theme.tagcloud.max,
amount : theme.tagcloud.amount,
- color : true,
+ color : false,
start_color: theme.tagcloud.start,
end_color : theme.tagcloud.end})
}}
</div>
</div>
+ {% include 'tag-color.swig' %}
在文章底部添加彩色标签
效果图:
文章底部
这个就感觉好看一点，打开themes\next\layout_macro\post.swig文件，搜索for tag in post.tags.toArray()，在下面添加我们之前写好的黄金分割生成的随机颜色代码🤣，如下
<div class="post-tags">
{%- for tag in post.tags.toArray() %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{%- endfor %}
</div>
<script type="text/javascript">
var tagsall=document.getElementsByClassName("post-tags")
for (var i = tagsall.length - 1; i >= 0; i--){
var tags=tagsall[i].getElementsByTagName("a");
for (var j = tags.length - 1; j >= 0; j--) {
var golden_ratio = 0.618033988749895;
var s = 0.5;
var v = 0.999;
var h = golden_ratio + Math.random()*0.8 - 0.5;
var h_i = parseInt(h * 6);
var f = h * 6 - h_i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var r, g, b;
switch (h_i) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3 :
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
case 5:
r = v;
g = p;
b = q;
break;
default:
r = 1;
g = 1;
b = 1;
}
tags[j].style.background = "rgba("+parseInt(r*255)+","+parseInt(g*255)+","+parseInt(b*255)+","+0.5+")";
}
}
</script>
然后打开blog/source/_data文件夹新建styles.styl，修改文章底部标签的样式：
//文章底部彩色标签样式
.posts-expand .post-tags a {
display: inline-block;
font-size: 0.8em;
padding: 0px 10px;
border-radius: 8px;
color: rgb(85, 85, 85);
border: 0px;
}
修改完以后，如果有细微之处需要修改，可以搭配浏览器的调试工具进行微调。
遇到的问题及解决
- 移植黄金分割生成颜色函数时，按照算法的原理改好代码以后，调试一直没有颜色出来，就一句一句在网页调试工具里看哪里有问题，结果问题出在Math.seededRandom is not a function这个错误，当时太晚了就不想再去修改，就用Math.random进行魔改也能实现在相同范围里生成随机数。然后就能产生随机的颜色了。
- 就是标签文字前的符号问题，解决过程1.1小节里记录了。
网友评论