Hexo折腾日记之标签篇

发表于 分类于 Valine： 本文字数： 3.5k

前言

今天又耗费一个上午给我的博客折腾出了彩色标签，接下来记录我的设置过程

page.swig文件设置

首先先打开/next/layout文件夹下的page.swig文件，在文件中找到以下内容

1
2
3
4
5
6
7
8
9
10
<div class="tag-cloud">
    <div class="tag-cloud-title">
        {%- set visibleTags = 0 %}
        {%- for tag in site.tags %}
        {%- if tag.length %}
            {%- set visibleTags += 1 %}
        {%- endif %}
        {%- endfor %}
        {{ _p('counter.tag_cloud', visibleTags) }}
    </div>

接下来的就是我们标签页面的主要代码

1
2
3
4
5
6
7
8
    <div class="tag-cloud-tags" id="tags">
        {%- if not theme.tagcloud %}
        {{ tagcloud({min_font: 12, max_font: 30, amount: 200, color: true, start_color: '#fff', end_color: '#fff'}) }}
        {% 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>
</div>

这里我们已经将起始颜色和终止颜色都换成了#fff即纯白色，接下来我们就开始随机设置每个标签的背景颜色。

1
2
3
4
5
6
7
8
9
10
11
<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>

然后我们再调整标签的CSS样式即可，这里附上我的CSS样式

1
2
3
4
5
.tag-cloud a {
    border: 0px;
    padding: 0px 10px;
    border-radius: 10px;
}

post.swig文件设置

接下来我们设置主页的标签，首先NexT主题首页的文章预览里没有标签，所以我们要先在文章预览里添加标签。打开/home/zyj/blog/themes/next/layout/_macro下的post.swig文件，找到

1
2
{% elif post.excerpt %}
    {{ post.excerpt }}

在其后面添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{%- if post.tags and post.tags.length %}
<div class="home-post-tags">
    {%- for tag in post.tags %}
    <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag.name }}</a>
    {%- endfor %}
    <script type="text/javascript">
    var tagsall=document.getElementsByClassName("home-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 r=Math.floor(Math.random()*255);
            var g=Math.floor(Math.random()*255);
            var b=Math.floor(Math.random()*255);
            tags[j].style.background = "rgb("+r+","+g+","+b+")";
        }
    }
    </script>
</div>
{%- endif %}

即可在文章预览中添加彩色标签

接下来将文章主页面末尾的标签换成彩色标签，同样在post.swig中找到：

1
2
3
4
5
<div class="post-tags" id="post-tags">
{%- for tag in post.tags %}
    <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
{%- endfor %}
</div>

在其后添加

1
2
3
4
5
6
7
8
9
10
11
12
<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 r=Math.floor(Math.random()*75+130);
        var g=Math.floor(Math.random()*75+100);
        var b=Math.floor(Math.random()*75+80);
        tags[j].style.background = "rgb("+r+","+g+","+b+")";
    }
}                        
</script>

0%