简介

标签云个人认为最重要的作用,是方便用户根据标签分类,进行文章查找,对于提升博客浏览深度很有帮助。同样,归档和分类页面同样有着相同的作用。

至于SEO方面,一是可以丰富博客内链,二是用于提升关键词密度。

鉴于此,通过修改模板可以把标签云和归档放在同一页面下,同时给标签云加上彩色的背景和文字,使它更加的好(zhuang)看(bi)。于是有了下面这个页面:

黑石博客彩色标签云

闲话不多说,下面是教程

教程

同样是以volantis主题为例(我是4.0版本):

合并标签云和归档页面

合并之前,需要搞清楚这两个页面是通过哪个文件生成的。

  • 标签云页面:\themes\volantis\layout\tag.ejs

  • 归档页面:themes\volantis\layout\archive.ejs

下面我们打开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>&nbsp;标签云</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>&nbsp;标签云</h2>
1
<h2><i class="fas fa-book-open"></i>&nbsp;时间轴</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

评论