NexT设置彩色标签

Posted on In Views:

效果图详见我的网站：Tags | HaCTang’s Group。

参考了NEXT设置彩色标签 | 代码如诗 (grainmad.github.io)的步骤。

1.标签页设置彩色标签

路径 \node_modules\hexo-theme-next\layout下新建tag-color.njk，将以下代码粘贴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<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.7+")";
     }
</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>

然后在node_modules\hexo-theme-next\layout\page.njk中以下位置添加{% include 'tag-color.njk' %}

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="post-body{% if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">
  {%- if page.type === 'tags' %}
    {%- include '_partials/page/tags.njk' -%}
  {% elif page.type === 'categories' %}
    {%- include '_partials/page/categories.njk' -%}
  {% elif page.type === 'schedule' %}
    {%- include '_partials/page/schedule.njk' -%}
  {% else %}
    {{ page.content }}
  {%- endif %}
</div>

{% include 'tag-color.njk' %}

2.文章底部标签

找到node_modules\hexo-theme-next\layout\_macro\post.njk，并在以下含post-tags类的<div>标签后添加<script>和<style>标签，另外注意标签的图标可以在theme.tag_icon字段设置为true替换#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
{%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %}
<div class="post-tags">
  {%- for tag in post.tags.toArray() %}
    <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ 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.7+")";
      }
  }
</script>
<style>
.post-tags a {
    display: inline-block;
    font-size: 0.8em;
    padding: 0px 10px;
    border-radius: 8px;
    color: rgb(85, 85, 85);
    border: 0px;
}
.post-tags a:hover{
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
    transform: scale(1.1);
    transition-duration: 0.15s;
}
</style>