菜單標(biāo)簽頁添加彩色標(biāo)簽
我的小站Nickxie's Blog，首先看看顯示的效果吧，標(biāo)簽頁：
標(biāo)簽頁
算不上特別好看，勉強看得過去吧??，每次刷新都會有不同的顏色哦！修改步驟也是來自于別人的博客，我會放到文章的參考里面，當(dāng)然也有我自己修改和添加的一部分。
- 在themes\next\layout下新建
tag-color.swig，修改里面的內(nèi)容為：
<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);
}
/* 文字前添加相應(yīng)的符號，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>
隨機(jī)生成漂亮的顏色
這里我把原來的隨機(jī)生成顏色換成了一種黃金分割隨機(jī)生成好看的顏色，參考了博主的函數(shù)。之前參考這篇博客進(jìn)行修改tag-color時，會在標(biāo)簽之前生成一個未識別的符號，可能是博主沒有改好，這里我想用font awesome的i標(biāo)簽，但是這里使用的是before添加content來實現(xiàn)，查了一下CSS里before和content的用法，并不能直接添加元素，但是可以添加特殊符號的Unicode，我就直接在font awesome上復(fù)制了相應(yīng)的Unicode，粘貼到content: "\f02b"，但是會顯示一個正方形。這個問題是通過在issue里看到需要添加相應(yīng)的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' %}
在文章底部添加彩色標(biāo)簽
效果圖:
文章底部
這個就感覺好看一點，打開themes\next\layout_macro\post.swig文件，搜索for tag in post.tags.toArray()，在下面添加我們之前寫好的黃金分割生成的隨機(jī)顏色代碼??，如下
<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，修改文章底部標(biāo)簽的樣式：
//文章底部彩色標(biāo)簽樣式
.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;
}
修改完以后，如果有細(xì)微之處需要修改，可以搭配瀏覽器的調(diào)試工具進(jìn)行微調(diào)。
遇到的問題及解決
- 移植黃金分割生成顏色函數(shù)時，按照算法的原理改好代碼以后，調(diào)試一直沒有顏色出來，就一句一句在網(wǎng)頁調(diào)試工具里看哪里有問題，結(jié)果問題出在Math.seededRandom is not a function這個錯誤，當(dāng)時太晚了就不想再去修改，就用Math.random進(jìn)行魔改也能實現(xiàn)在相同范圍里生成隨機(jī)數(shù)。然后就能產(chǎn)生隨機(jī)的顏色了。
- 就是標(biāo)簽文字前的符號問題，解決過程1.1小節(jié)里記錄了。
參考
-
添加彩色標(biāo)簽頁
-
JS黃金分割法實現(xiàn)隨機(jī)漂亮顏色
