为Next加上彩色标签云

发表于 更新于 分类于 本文字数： 1.9k 阅读时长 ≈ 2 分钟

最近一直看hexo官方的标签云太难看，就google了一下。最终搜索到了这篇文章（传送门），在此也做下记录吧！

  1. 打开themes –> next –> layout –> page.swig文件

  2. 找到{ % if page.type === 'tags' % }

  3. 将下方代码进行替换即可

1
2
3
4
5
6
7
8
9
原内容：

<div class="tag-cloud-tags">
  {% if not theme.tagcloud %}
    {{ tagcloud({min_font: 12, max_font: 30, amount: 200, color: true, start_color: '#ccc', end_color: '#111'}) }}
  {% else %}
    {{ tagcloud({min_font: theme.tagcloud.min, max_font: theme.tagcloud.max, amount: theme.tagcloud.amount, color: true, start_color: theme.tagcloud.start, end_color: theme.tagcloud.end}) }}
  {% endif %}
</div>
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
修改之后的内容：

<div class="tag-cloud-tags" id="tags">
  {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
</div>
<br/>

<script type="text/javascript">
  var alltags=document.getElementById('tags');
  var tags=alltags.getElementsByTagName('a');

  for (var i = tags.length - 1; i >= 0; i--) {
    var r=Math.floor(Math.random()*75+130);
    var g=Math.floor(Math.random()*75+100);
    var b=Math.floor(Math.random()*75+80);
    tags[i].style.background = "rgb("+r+","+g+","+b+")";
  }
</script>

<style type="text/css">
  div#posts.posts-expand .tag-cloud a{
    background-color: #f5f7f1;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 18px;
  }

  .tag-cloud a{
    background-color: #f5f7f1;
    border-radius: 4px;
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 5px;
    margin-left: 0px;
    margin-top: 8px;
    margin-bottom: 0px;
}

  .tag-cloud a:before{
    content: "";
  }

  .tag-cloud-tags{
    text-align: left;
    counter-reset: tags;
  }
</style>

之后清理缓存，重新部署就行了。

最终效果如下：

彩色标签云