标签云

themes/hexo-theme-xups/_config.yml

@@ -92,16 +92,16 @@ tagcloud: true
 # 友情链接
 #----------------------------
 friends:
-  enable: true
+  enable: false
   list:
     1:
-      name: Haoren博客
-      title: 网络安全博客
-      link: http://blog.sina.com.cn/u/1825875765
+      name: google
+      title: 谷歌
+      link: https://www.google.com.hk/
     2:
-      name: Maxwell博客
-      title: 技术博客
-      link: http://blog.csdn.net/yeweiouyang
+      name: youtube
+      title: 油管
+      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
-      float left
-      width 32.6666%
-      margin 0 1% 1% 0
-      padding 0 8px
-      line-height 29px
-      font-size 12px
-      color c-999
-      background-color #f6f6f6
-      -webkit-box-sizing border-box
-      box-sizing border-box
-      text-overflow ellipsis
-      overflow hidden
-      white-space nowrap
-      -webkit-transition .5s
-      -ms-transition .5s
-      -moz-transition .5s
-      transition .5s
-      &:hover
-        color #fff
-        background-color #ff5e52
-        opacity .85;
-    .tag-item:nth-child(3n+0)
-      margin-right 0
-  .tag-wrap
-    padding 10px 0 0
-    overflow hidden
+  .tags-cloud > a
+    margin 0 3px
+    position relative
+    &::after
+      content ''
+      display block
+      // 开始时候下划线的宽度为100%
+      width 100%
+      height 2px
+      position absolute
+      bottom -3px
+      left: 0
+      background #aaa
+      transition all 0.3s ease-in-out
+      // 通过transform的缩放scale来让初始时x轴为0
+      transform scale3d(0,1,1)
+      // 将坐标原点移到元素的中间，以原点为中心进行缩放
+      transform-origin 50% 0
+      text-decoration underline
+    &:hover::after
+      transform: scale3d(1,1,1);