diff --git a/_data/widgets.yml b/_data/widgets.yml
index 2c90eb4..9ae11e9 100644
--- a/_data/widgets.yml
+++ b/_data/widgets.yml
@@ -31,6 +31,19 @@ ghuser:
   avatar: true # show avatar or not
   menu: true # show menu or not
 
+tagcloud:
+  layout: tagcloud
+  title: 标签云
+  # 标签云配置
+  min_font: 12
+  max_font: 24
+  amount: 100
+  orderby: name
+  order: 1 # 1, sac 升序；-1, desc 降序
+  color: false # 使用颜色
+  start_color: # 开始的颜色。您可使用十六进位值（#b700ff），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 颜色关键字。此变量仅在 color 参数开启时才有用。
+  end_color: # 结束的颜色。您可使用十六进位值（#b700ff），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 颜色关键字。此变量仅在 color 参数开启时才有用。
+  show_count: false # 显示每个标签的文章总数
 
 welcome:
   layout: markdown
diff --git a/layout/_partial/sidebar/widgets/tagcloud.ejs b/layout/_partial/sidebar/widgets/tagcloud.ejs
new file mode 100644
index 0000000..d00c652
--- /dev/null
+++ b/layout/_partial/sidebar/widgets/tagcloud.ejs
@@ -0,0 +1,24 @@
+<%
+function layoutDiv() {
+  var el = '';
+  if (site.tags == undefined || site.tags.length == 0) {
+    return el;
+  }
+  var opts = Object.assign({}, item);
+  delete opts['title'];
+  delete opts['layout'];
+  opts.class = 'tag ';
+  el += '<div class="widget-wrap" id="tagcloud">';
+    if (item.title) {
+      el += '<div class="widget-header cap theme dis-select">';
+      el += '<span class="name">' + item.title + '</span>';
+      el += '</div>';
+    }
+    el += '<div class="widget-body fs14">';
+      el += tagcloud(site.tags, opts);
+    el += '</div>';
+  el += '</div>';
+  return el;
+}
+%>
+<%- layoutDiv() %>
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index d7f137a..b0eedb5 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -147,77 +147,3 @@ nav.menu
 .l_left .menu a.nav-item
   flex-grow: 1
 
-.l_left .widgets
-  overflow: scroll
-  flex-grow: 1
-  scrollbar-width: none
-  scrollbar(0, 0)
-  z-index: 1
-  line-height: 1.2
-  .widget-wrap
-    margin: 1rem var(--gap-l) 3rem var(--gap-l)
-    .widget-header
-      display: flex
-      justify-content: space-between
-      align-items: center
-      font-weight: 500
-      position: sticky
-      top: -2px
-      background: var(--site-bg)
-      padding-top: 2px
-      z-index 1
-      .item 
-        display: block
-      >span 
-        margin: 0.25rem 0
-        text-align: left
-      &:empty
-        display: none
-      .cap-action
-        hover-block 4px 4px
-        line-height: 0
-        color: var(--text-meta)
-        trans2: color background
-        .icon
-          fill: var(--text-meta)
-        &:hover
-          color: $color-hover
-          .icon
-            fill: $color-hover
-
-    .widget-body
-      margin: 0.5rem 0
-      color: var(--text-p1)
-      p
-        margin-top: .5em
-        margin-bottom: .5em
-        line-height: 1.5
-    .widget-header+.widget-body
-      margin-top: 0
-
-  .widget-wrap#recent .widget-body
-    display: flex
-    flex-direction: column
-    align-items: flex-start
-    margin-top: 0.25rem
-    a
-      line-height: 1.2
-      font-size: $fs-13
-      margin: 0.25rem 0
-      padding: 2px 0
-      .title  
-        font-size: $fs-13
-        color: var(--text-p2)
-      &:hover
-        color: $color-hover
-  .widget-wrap#related 
-    .widget-body a
-      margin-top: 0.5rem
-      .title 
-        font-weight: 700
-        font-size: $fs-14
-      .excerpt
-        -webkit-line-clamp: 3
-
-.widgets .loading-wrap
-  margin: 0.5rem 0
\ No newline at end of file
diff --git a/source/css/_layout/sidebar/widgets.styl b/source/css/_layout/sidebar/widgets.styl
new file mode 100644
index 0000000..9e92040
--- /dev/null
+++ b/source/css/_layout/sidebar/widgets.styl
@@ -0,0 +1,85 @@
+.widgets .loading-wrap
+  margin: 0.5rem 0
+
+.l_left .widgets
+  overflow: scroll
+  flex-grow: 1
+  scrollbar-width: none
+  scrollbar(0, 0)
+  z-index: 1
+  line-height: 1.2
+  .widget-wrap
+    margin: 1rem var(--gap-l) 3rem var(--gap-l)
+    .widget-header
+      display: flex
+      justify-content: space-between
+      align-items: center
+      font-weight: 500
+      position: sticky
+      top: -2px
+      background: var(--site-bg)
+      padding-top: 2px
+      z-index 1
+      .item 
+        display: block
+      >span 
+        margin: 0.25rem 0
+        text-align: left
+      &:empty
+        display: none
+      .cap-action
+        hover-block 4px 4px
+        line-height: 0
+        color: var(--text-meta)
+        trans2: color background
+        .icon
+          fill: var(--text-meta)
+        &:hover
+          color: $color-hover
+          .icon
+            fill: $color-hover
+
+    .widget-body
+      margin: 0.5rem 0
+      color: var(--text-p1)
+      p
+        margin-top: .5em
+        margin-bottom: .5em
+        line-height: 1.5
+    .widget-header+.widget-body
+      margin-top: 0
+
+
+
+.l_left .widgets
+  .widget-wrap#recent .widget-body
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    margin-top: 0.25rem
+    a
+      line-height: 1.2
+      font-size: $fs-13
+      margin: 0.25rem 0
+      padding: 2px 0
+      .title  
+        font-size: $fs-13
+        color: var(--text-p2)
+      &:hover
+        color: $color-hover
+  .widget-wrap#related .widget-body a
+    margin-top: 0.5rem
+    .title 
+      font-weight: 700
+      font-size: $fs-14
+    .excerpt
+      -webkit-line-clamp: 3
+
+  .widget-wrap#tagcloud .widget-body
+    margin-top: 0.25rem
+    a  
+      word-break: break-word
+      color: var(--text-p2)
+      line-height: 1.5
+      &:hover
+        color: $color-hover