简介
标签云个人认为最重要的作用，是方便用户根据标签分类，进行文章查找，对于提升博客浏览深度很有帮助。同样，归档和分类页面同样有着相同的作用。
至于SEO方面，一是可以丰富博客内链，二是用于提升关键词密度。
鉴于此，通过修改模板可以把标签云和归档放在同一页面下，同时给标签云加上彩色的背景和文字，使它更加的好(zhuang)看(bi)。于是有了下面这个页面：
闲话不多说，下面是教程
教程
同样是以volantis主题为例（我是4.0版本）：
合并标签云和归档页面
合并之前，需要搞清楚这两个页面是通过哪个文件生成的。
下面我们打开tag.ejs页面，复制以下内容（下面是我修改过的，增加了标题）：
1
2
3
4
5
6
7
8
9
10
| <article id="tag" class="post article white-box reveal <%- theme.custom_css.body.effect.join(' ') %>">
<h2><i class="fas fa-cloud"></i> 标签云</h2>
<div class="all-tags">
<% let tc = theme.sidebar.widget_library.tagcloud; %>
<%- list_tags({}) %>
</div>
<script>colortag();</script>
<br>
<%- page.content %>
</article>
|
到archive.ejs页面：
加到如图这个地方，同时我加了标签云和归档的标题：
1
| <h2><i class="fas fa-cloud"></i> 标签云</h2>
|
1
| <h2><i class="fas fa-book-open"></i> 时间轴</h2>
|
添加CSS样式
同样直接扔到main.styl里面：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .tagred
background: #feecf0
color:#cc0f35
.tagyellow
background: #f4e9ff
color:#8a51c0
.tagblue
background: #eef3fc
color:#2160c4
.taggreen
background: #ebfffc
color:#00947e
.tagpurple
background: #f4e9ff
color:#8a51c0
.taggrown
background: #fffbeb
color:#947600
|
若有的童鞋不变色的话，请给此css加上最高优先级，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .tagred
background: #feecf0!important
color:#cc0f35!important
.tagyellow
background: #f4e9ff!important
color:#8a51c0!important
.tagblue
background: #eef3fc!important
color:#2160c4!important
.taggreen
background: #ebfffc!important
color:#00947e!important
.tagpurple
background: #f4e9ff!important
color:#8a51c0!important
.taggrown
background: #fffbeb!important
color:#947600!important
|
增加jQuery函数
放到themes\volantis\source\js\app.js里面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function colortag(){
$("ul.tag-list li").each(function(){
let random = Math.floor(Math.random()*5+1);
if(random == 2){
$(this).find('a').addClass('tagred');
} else if ( random == 3 ){
$(this).find('a').addClass('tagyellow');
} else if ( random == 4 ){
$(this).find('a').addClass('tagblue');
} else if ( random == 5 ){
$(this).find('a').addClass('taggreen');
} else if ( random == 2 ){
$(this).find('a').addClass('tagpurple');
} else if ( random == 1 ){
$(this).find('a').addClass('taggrown');
}
});}
colortag();
|
此函数主要随机取得标签云的a链接，并添加随机颜色的class，之前class样式已经在css里设置了。
修改完毕！
最后，发布一条声明：
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1md043iqtkk1p
