给博客增加彩色标签云

Heson

hexo

发布于：2020年9月2日

次浏览

简介

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

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

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

闲话不多说，下面是教程

教程

同样是以volantis主题为例（我是4.0版本）：

合并标签云和归档页面

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

标签云页面：\themes\volantis\layout\tag.ejs
归档页面：themes\volantis\layout\archive.ejs

下面我们打开tag.ejs页面，复制以下内容（下面是我修改过的，增加了标题）：

        <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页面：

加到如图这个地方，同时我加了标签云和归档的标题：

<h2><i class="fas fa-cloud"></i>&nbsp;标签云</h2>

<h2><i class="fas fa-book-open"></i>&nbsp;时间轴</h2>

添加CSS样式

同样直接扔到main.styl里面：

.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加上最高优先级，如下：

.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里面

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