菜單標(biāo)簽頁添加彩色標(biāo)簽

我的小站Nickxie's Blog，首先看看顯示的效果吧，標(biāo)簽頁：

標(biāo)簽頁

算不上特別好看，勉強(qiáng)看得過去吧??，每次刷新都會(huì)有不同的顏色哦！修改步驟也是來自于別人的博客，我會(huì)放到文章的參考里面，當(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)的符號(hào)，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時(shí)，會(huì)在標(biāo)簽之前生成一個(gè)未識(shí)別的符號(hào)，可能是博主沒有改好，這里我想用font awesome的i標(biāo)簽，但是這里使用的是before添加content來實(shí)現(xiàn)，查了一下CSS里before和content的用法，并不能直接添加元素，但是可以添加特殊符號(hào)的Unicode，我就直接在font awesome上復(fù)制了相應(yīng)的Unicode，粘貼到content: "\f02b"，但是會(huì)顯示一個(gè)正方形。這個(gè)問題是通過在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)簽

效果圖:

文章底部

這個(gè)就感覺好看一點(diǎn)，打開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ù)時(shí)，按照算法的原理改好代碼以后，調(diào)試一直沒有顏色出來，就一句一句在網(wǎng)頁調(diào)試工具里看哪里有問題，結(jié)果問題出在Math.seededRandom is not a function這個(gè)錯(cuò)誤，當(dāng)時(shí)太晚了就不想再去修改，就用Math.random進(jìn)行魔改也能實(shí)現(xiàn)在相同范圍里生成隨機(jī)數(shù)。然后就能產(chǎn)生隨機(jī)的顏色了。
• 就是標(biāo)簽文字前的符號(hào)問題，解決過程1.1小節(jié)里記錄了。

參考

• 添加彩色標(biāo)簽頁

  • CSDN
  • 淺笑の博客

• JS黃金分割法實(shí)現(xiàn)隨機(jī)漂亮顏色

  • 實(shí)現(xiàn)原理
  • JS代碼