标签云

themes/hexo-theme-xups/_config.yml

@@ -92,16 +92,16 @@ tagcloud: true
 # 友情链接
 #----------------------------
 friends:
-  enable: true
+  enable: false
   list:
     1:
-      name: Haoren博客
+      name: google
-      title: 网络安全博客
+      title: 谷歌
-      link: http://blog.sina.com.cn/u/1825875765
+      link: https://www.google.com.hk/
     2:
-      name: Maxwell博客
+      name: youtube
-      title: 技术博客
+      title: 油管
-      link: http://blog.csdn.net/yeweiouyang
+      link: https://www.youtube.com/
 
 #----------------------------
 # 头部链接

themes/hexo-theme-xups/layout/_partial/sidebar.ejs

@@ -8,7 +8,7 @@
     <% if (theme.tagcloud) { %>
     <section class="widget">
         <h3 class="widget-hd"><strong>热门标签</strong></h3>
-        <%- partial('_widget/tags') %>
+        <%- partial('_widget/tags_cloud') %>
     </section>
     <% } %>
 

themes/hexo-theme-xups/layout/_widget/tags.ejs

@@ -1,12 +0,0 @@
-<!-- 文章标签 -->
-<div class="widget-bd tag-wrap">
-  <%
-  site.tags.forEach(function (tag, index) {
-    if (index < 39) {
-  %>
-    <a class="tag-item" href="<%= url_for(tag.path) %>" title="<%= tag.name %>"><%- tag.name %> (<%- tag.length %>)</a>
-  <%
-    }
-  }); 
-  %>
-</div>

themes/hexo-theme-xups/layout/_widget/tags_cloud.ejs

@@ -0,0 +1,11 @@
+<!-- 标签云 -->
+<div class="tags-cloud">
+<%- tagcloud({
+	min_font: 14, 
+	max_font: 30, 
+	amount: 999, 
+	color: true, 
+	start_color: '#e87474',
+	end_color: '#524ac5',
+}) %>
+</div>

themes/hexo-theme-xups/source/css/_partial/sidebar.styl

@@ -61,30 +61,24 @@
       p
         margin 0
         padding 0
-    .tag-item
+  .tags-cloud > a
-      float left
+    margin 0 3px
-      width 32.6666%
+    position relative
-      margin 0 1% 1% 0
+    &::after
-      padding 0 8px
+      content ''
-      line-height 29px
+      display block
-      font-size 12px
+      // 开始时候下划线的宽度为100%
-      color c-999
+      width 100%
-      background-color #f6f6f6
+      height 2px
-      -webkit-box-sizing border-box
+      position absolute
-      box-sizing border-box
+      bottom -3px
-      text-overflow ellipsis
+      left: 0
-      overflow hidden
+      background #aaa
-      white-space nowrap
+      transition all 0.3s ease-in-out
-      -webkit-transition .5s
+      // 通过transform的缩放scale来让初始时x轴为0
-      -ms-transition .5s
+      transform scale3d(0,1,1)
-      -moz-transition .5s
+      // 将坐标原点移到元素的中间，以原点为中心进行缩放
-      transition .5s
+      transform-origin 50% 0
-      &:hover
+      text-decoration underline
-        color #fff
+    &:hover::after
-        background-color #ff5e52
+      transform: scale3d(1,1,1);
-        opacity .85;
-    .tag-item:nth-child(3n+0)
-      margin-right 0
-  .tag-wrap
-    padding 10px 0 0
-    overflow hidden