diff --git a/layout/_partial/sidebar/index.ejs b/layout/_partial/sidebar/index.ejs
index 50b287a..1fd13b2 100755
--- a/layout/_partial/sidebar/index.ejs
+++ b/layout/_partial/sidebar/index.ejs
@@ -47,7 +47,7 @@ function layoutWidgets() {
   var el = '';
   el += '<div class="widgets">';
   if (page.layout == 'wiki' && proj && page.menu_id == 'wiki') {
-    el += '<div class="widget-wrap logo-wrap wiki"><div class="widget-body">';
+    el += '<widget class="widget-wrapper logo-wrap wiki"><div class="widget-body">';
     // all products
     el += '<a style="filter: grayscale(100%)" class="wiki-home cap" href="' + url_for(config.wiki_dir) + '">';
     el += '<svg aria-hidden="true" viewBox="0 0 16 16" width="1rem" height="1rem" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>';
@@ -69,7 +69,7 @@ function layoutWidgets() {
       let sub = proj.subtitle;
       el += layoutTitle(main, url, sub);
     }
-    el += '</div></div>';
+    el += '</div></widget>';
   }
   if (page.sidebar) {
     page.sidebar.forEach((w, i) => {
@@ -87,7 +87,7 @@ function layoutWidgets() {
         Object.assign(widget, w)
       }
       if (widget && widget.layout) {
-        el += partial('widgets/' + widget.layout, {item: widget})
+        el += partial('../widgets/' + widget.layout, {item: widget})
       }
     });
   }
diff --git a/layout/_partial/sidebar/widgets/ghissues.ejs b/layout/_partial/widgets/ghissues.ejs
similarity index 93%
rename from layout/_partial/sidebar/widgets/ghissues.ejs
rename to layout/_partial/widgets/ghissues.ejs
index e6aeabd..c229e57 100644
--- a/layout/_partial/sidebar/widgets/ghissues.ejs
+++ b/layout/_partial/widgets/ghissues.ejs
@@ -21,7 +21,7 @@ function layoutDiv() {
   if (item.labels) {
     item.api += '&labels=' + item.labels;
   }
-  el += '<div class="widget-wrap" id="timeline">';
+  el += '<widget class="widget-wrapper timeline">';
     if (item.title) {
       el += '<div class="widget-header cap theme dis-select">';
       el += '<span class="name">' + item.title + '</span>';
@@ -37,7 +37,7 @@ function layoutDiv() {
       el += '>';
       el += '</div>';
     el += '</div>';
-  el += '</div>';
+  el += '</widget>';
   return el;
 }
 %>
diff --git a/layout/_partial/sidebar/widgets/ghrepo.ejs b/layout/_partial/widgets/ghrepo.ejs
similarity index 98%
rename from layout/_partial/sidebar/widgets/ghrepo.ejs
rename to layout/_partial/widgets/ghrepo.ejs
index dbfbbb0..57e83a6 100644
--- a/layout/_partial/sidebar/widgets/ghrepo.ejs
+++ b/layout/_partial/widgets/ghrepo.ejs
@@ -18,7 +18,7 @@ function layoutDiv() {
     return el;
   }
   // 布局
-  el += '<div class="widget-wrap" id="repo-info">';
+  el += '<widget class="widget-wrapper ghrepo">';
   // body
   el += '<div class="widget-body">';
   el += '<div class="items stellar-ghinfo-api" api="' + theme.api_host.ghapi + '/repos/' + repo + '">';
@@ -45,7 +45,7 @@ function layoutDiv() {
   el += '</a>';
   el += '</div>';
   el += '</div>';
-  el += '</div>';
+  el += '</widget>';
   return el;
 }
 %>
diff --git a/layout/_partial/sidebar/widgets/ghuser.ejs b/layout/_partial/widgets/ghuser.ejs
similarity index 94%
rename from layout/_partial/sidebar/widgets/ghuser.ejs
rename to layout/_partial/widgets/ghuser.ejs
index 7b0999e..730d421 100644
--- a/layout/_partial/sidebar/widgets/ghuser.ejs
+++ b/layout/_partial/widgets/ghuser.ejs
@@ -22,7 +22,7 @@ function layoutDiv() {
     return el;
   }
 
-  el += '<div class="widget-wrap" id="github-user">';
+  el += '<widget class="widget-wrapper ghuser">';
   // body
   el += '<div class="widget-body stellar-ghinfo-api" api="' + theme.api_host.ghapi + '/users/' + item.username + '">';
     if (item.avatar) {
@@ -47,10 +47,10 @@ function layoutDiv() {
     el += '</a>';
     // menu
     if (item.menu) {
-      el += partial('../menu', {where: 'sidebar'});
+      el += partial('../sidebar/menu', {where: 'sidebar'});
     }
   el += '</div>';
-  el += '</div>';
+  el += '</widget>';
   return el;
 }
 %>
diff --git a/layout/_partial/sidebar/widgets/markdown.ejs b/layout/_partial/widgets/markdown.ejs
similarity index 84%
rename from layout/_partial/sidebar/widgets/markdown.ejs
rename to layout/_partial/widgets/markdown.ejs
index df087c1..a243468 100644
--- a/layout/_partial/sidebar/widgets/markdown.ejs
+++ b/layout/_partial/widgets/markdown.ejs
@@ -2,7 +2,7 @@
 function layoutDiv() {
   if (!item.content?.length) return ''
   var el = '';
-  el += '<div class="widget-wrap" id="markdown">';
+  el += '<widget class="widget-wrapper markdown">';
   if (item.title?.length > 0) {
     el += '<div class="widget-header cap theme dis-select">';
     el += '<span class="name">' + item.title + '</span>';
@@ -11,7 +11,7 @@ function layoutDiv() {
   el += '<div class="widget-body fs14">';
   el += markdown(item.content);
   el += '</div>';
-  el += '</div>';
+  el += '</widget>';
   return el;
 }
 %>
diff --git a/layout/_partial/sidebar/widgets/recent.ejs b/layout/_partial/widgets/recent.ejs
similarity index 96%
rename from layout/_partial/sidebar/widgets/recent.ejs
rename to layout/_partial/widgets/recent.ejs
index f3b973f..e370868 100644
--- a/layout/_partial/sidebar/widgets/recent.ejs
+++ b/layout/_partial/widgets/recent.ejs
@@ -1,6 +1,6 @@
 <%
 function layoutDiv() {
-  var el = '<div class="widget-wrap" id="recent">';
+  var el = '<widget class="widget-wrapper recent">';
   // header
   el += '<div class="widget-header cap theme dis-select">';
   el += '<span class="name">' + __("meta.recent_update") + '</span>';
@@ -44,7 +44,7 @@ function layoutDiv() {
     el += '';
   });
   el += '</div>';
-  el += '</div>';
+  el += '</widget>';
   return el;
 }
 %>
diff --git a/layout/_partial/sidebar/widgets/related.ejs b/layout/_partial/widgets/related.ejs
similarity index 93%
rename from layout/_partial/sidebar/widgets/related.ejs
rename to layout/_partial/widgets/related.ejs
index 0e7d2b3..46e93c6 100644
--- a/layout/_partial/sidebar/widgets/related.ejs
+++ b/layout/_partial/widgets/related.ejs
@@ -15,7 +15,7 @@ function layoutDiv() {
   }
   var el = '';
   if (related.length > 0) {
-    el += '<div class="widget-wrap" id="related">';
+    el += '<widget class="widget-wrapper related">';
     el += '<div class="widget-header cap theme dis-select">';
     var title = __('btn.wiki');
     if (proj.tags && proj.tags[0]) {
@@ -34,7 +34,7 @@ function layoutDiv() {
       el += '</a>';
     });
     el += '</div>';
-    el += '</div>';
+    el += '</widget>';
   }
   return el;
 }
diff --git a/layout/_partial/sidebar/widgets/tagcloud.ejs b/layout/_partial/widgets/tagcloud.ejs
similarity index 88%
rename from layout/_partial/sidebar/widgets/tagcloud.ejs
rename to layout/_partial/widgets/tagcloud.ejs
index d00c652..2e9f861 100644
--- a/layout/_partial/sidebar/widgets/tagcloud.ejs
+++ b/layout/_partial/widgets/tagcloud.ejs
@@ -8,7 +8,7 @@ function layoutDiv() {
   delete opts['title'];
   delete opts['layout'];
   opts.class = 'tag ';
-  el += '<div class="widget-wrap" id="tagcloud">';
+  el += '<widget class="widget-wrapper tagcloud">';
     if (item.title) {
       el += '<div class="widget-header cap theme dis-select">';
       el += '<span class="name">' + item.title + '</span>';
@@ -17,7 +17,7 @@ function layoutDiv() {
     el += '<div class="widget-body fs14">';
       el += tagcloud(site.tags, opts);
     el += '</div>';
-  el += '</div>';
+  el += '</widget>';
   return el;
 }
 %>
diff --git a/layout/_partial/sidebar/widgets/timeline.ejs b/layout/_partial/widgets/timeline.ejs
similarity index 89%
rename from layout/_partial/sidebar/widgets/timeline.ejs
rename to layout/_partial/widgets/timeline.ejs
index 08b6019..575bf42 100644
--- a/layout/_partial/sidebar/widgets/timeline.ejs
+++ b/layout/_partial/widgets/timeline.ejs
@@ -4,7 +4,7 @@ function layoutDiv() {
   if (item.api == undefined) {
     return el;
   }
-  el += '<div class="widget-wrap" id="timeline">';
+  el += '<widget class="widget-wrapper timeline">';
     if (item.title) {
       el += '<div class="widget-header cap theme dis-select">';
       el += '<span class="name">' + item.title + '</span>';
@@ -20,7 +20,7 @@ function layoutDiv() {
       el += '>';
       el += '</div>';
     el += '</div>';
-  el += '</div>';
+  el += '</widget>';
   return el;
 }
 %>
diff --git a/layout/_partial/sidebar/widgets/toc.ejs b/layout/_partial/widgets/toc.ejs
similarity index 96%
rename from layout/_partial/sidebar/widgets/toc.ejs
rename to layout/_partial/widgets/toc.ejs
index 3fd1f7a..6125a98 100644
--- a/layout/_partial/sidebar/widgets/toc.ejs
+++ b/layout/_partial/widgets/toc.ejs
@@ -63,7 +63,7 @@ function layoutDiv(fallback) {
 
   var el = '';
   if (type.length > 0) {
-    el += '<div class="widget-wrap ' + type + '" id="toc">';
+    el += '<widget class="widget-wrapper toc ' + type + '" id="toc">';
     if (page.layout !== 'wiki') {
       // post 布局
       el += layoutTocHeader(page.toc_title);
@@ -90,7 +90,7 @@ function layoutDiv(fallback) {
         el += '</div>';
       }
     }
-    el += '</div>';
+    el += '</widget>';
   } else if (item.fallback) {
     el += partial(item.fallback, {item: theme.data.widgets[item.fallback]});
   }
diff --git a/source/css/_layout/index.styl b/source/css/_layout/index.styl
index b29a08b..a75153a 100644
--- a/source/css/_layout/index.styl
+++ b/source/css/_layout/index.styl
@@ -1,4 +1,5 @@
 @import 'partial/*'
 @import 'tag-plugins/*'
 @import 'sidebar/*'
+@import 'widgets/*'
 @import 'pages/*'
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index 196d3b1..f84c6a4 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -8,12 +8,13 @@
     margin: var(--gap-l) var(--gap-l) 0
     margin-top: "calc(2 * %s)" % var(--gap-l)
   @media screen and (min-width: $device-mobile-max)
-    >.widgets:first-child>.widget-wrap:first-child
+    >.widgets:first-child>.widget-wrapper:first-child
       margin-top: "calc(2 * %s)" % var(--gap-l)
   @media screen and (max-width: $device-mobile-max)
     height: 100vh
   
 
+
 .l_left[layout=wiki]
   padding-bottom: 0
   height: 100vh
@@ -100,7 +101,7 @@
         opacity: 1 !important
 
 
-.l_left .widgets .widget-wrap.logo-wrap.wiki
+.l_left .widgets .widget-wrapper.logo-wrap.wiki
   margin-bottom: 1.5rem
   flex-direction: column
   align-items: flex-start
diff --git a/source/css/_layout/sidebar/ghrepo.styl b/source/css/_layout/widgets/ghrepo.styl
similarity index 97%
rename from source/css/_layout/sidebar/ghrepo.styl
rename to source/css/_layout/widgets/ghrepo.styl
index 32fbaf8..c4ac241 100644
--- a/source/css/_layout/sidebar/ghrepo.styl
+++ b/source/css/_layout/widgets/ghrepo.styl
@@ -1,4 +1,4 @@
-.widget-wrap#repo-info
+.widget-wrapper.ghrepo
   .widget-body
     a.repo
       display: block
diff --git a/source/css/_layout/sidebar/ghuser.styl b/source/css/_layout/widgets/ghuser.styl
similarity index 76%
rename from source/css/_layout/sidebar/ghuser.styl
rename to source/css/_layout/widgets/ghuser.styl
index 270b4cc..c1cd706 100644
--- a/source/css/_layout/sidebar/ghuser.styl
+++ b/source/css/_layout/widgets/ghuser.styl
@@ -1,14 +1,14 @@
-.widget-wrap#github-user
+.widget-wrapper.ghuser
   .widget-header+.widget-body
     margin: 0.75rem 0
-.widget-wrap#github-user .widget-body
+.widget-wrapper.ghuser .widget-body
   text-align: center
   background: var(--card)
   border-radius: $border-card
   padding: 1rem
   box-shadow: $boxshadow-card
 
-.widget-wrap#github-user .widget-body .avatar
+.widget-wrapper.ghuser .widget-body .avatar
   display: block
   border-radius: 100%
   margin: 1rem auto 1.25rem auto
@@ -19,17 +19,17 @@
   @media screen and (max-width: $device-tablet)
     max-width: 50%
 
-.widget-wrap#github-user .widget-body .username
+.widget-wrapper.ghuser .widget-body .username
   font-weight: 900
   font-size: $fs-h2
   color: var(--text-p0)
   margin: 0.5rem 0
 
-.widget-wrap#github-user .widget-body .bio
+.widget-wrapper.ghuser .widget-body .bio
   font-size: $fs-13
   margin: 0.5rem 0
 
-.widget-wrap#github-user .widget-body .follow 
+.widget-wrapper.ghuser .widget-body .follow 
   font-weight: 500
   border-radius: 64px
   padding: 0.5rem 1rem
@@ -48,7 +48,7 @@
   &:hover
     background: $color-hover
 
-.widget-wrap#github-user .widget-body .menu 
+.widget-wrapper.ghuser .widget-body .menu 
   margin-bottom: 0
   background: none
   a:hover 
@@ -67,14 +67,14 @@
       border-radius: 4px
       background: $color-theme
 
-.widget-wrap#github-user .widget-body .buttons
+.widget-wrapper.ghuser .widget-body .buttons
   margin: 1rem 0
   align-self: stretch
   display: grid
   grid-gap: 2px
   grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
 
-.widget-wrap#github-user .widget-body .btn
+.widget-wrapper.ghuser .widget-body .btn
   display: flex 
   flex-direction: column
   align-items: center
@@ -87,12 +87,12 @@
     background: var(--block)
 
 
-.widget-wrap#github-user .widget-body .buttons .btn .title
+.widget-wrapper.ghuser .widget-body .buttons .btn .title
   font-size: 1rem
   font-weight: 700
 
 
-.widget-wrap#github-user .widget-body .buttons .btn .desc
+.widget-wrapper.ghuser .widget-body .buttons .btn .desc
   font-size: $fs-12
   color: var(--text-p3)
   font-weight: 500
\ No newline at end of file
diff --git a/source/css/_layout/sidebar/toc_blog.styl b/source/css/_layout/widgets/toc_blog.styl
similarity index 62%
rename from source/css/_layout/sidebar/toc_blog.styl
rename to source/css/_layout/widgets/toc_blog.styl
index c7a8028..d696c65 100644
--- a/source/css/_layout/sidebar/toc_blog.styl
+++ b/source/css/_layout/widgets/toc_blog.styl
@@ -1,3 +1,3 @@
-.widget-wrap.single#toc .doc-tree
+.widget-wrapper.toc.single .doc-tree
   &.active>.toc
     border-left: 2px solid var(--block-hover)
diff --git a/source/css/_layout/sidebar/toc_common.styl b/source/css/_layout/widgets/toc_common.styl
similarity index 93%
rename from source/css/_layout/sidebar/toc_common.styl
rename to source/css/_layout/widgets/toc_common.styl
index de30de4..6e7d03a 100644
--- a/source/css/_layout/sidebar/toc_common.styl
+++ b/source/css/_layout/widgets/toc_common.styl
@@ -1,10 +1,10 @@
-.widget-wrap.single#toc .widget-header
+.widget-wrapper.toc.single .widget-header
   font-weight: 500
   font-size: $fs-12
   >span
     margin: 0.5rem 0
 
-#toc .widget-body
+.toc .widget-body
   margin-top: 0
   ul ul, ul ol
     padding-left: 0
@@ -34,7 +34,7 @@
       padding-left: 2.9rem
 
 
-#toc .toc-item
+.toc .toc-item
   color: var(--text-p2)
   font-size: $fs-12
   padding: 0
@@ -44,7 +44,7 @@
     border-left-color: @color
   .toc-child .toc-item
     padding: 0
-#toc a.toc-link
+.toc a.toc-link
   color: inherit
   display: block
   line-height: 1.2
diff --git a/source/css/_layout/sidebar/toc_wiki.styl b/source/css/_layout/widgets/toc_wiki.styl
similarity index 87%
rename from source/css/_layout/sidebar/toc_wiki.styl
rename to source/css/_layout/widgets/toc_wiki.styl
index d908b98..4bf15b4 100644
--- a/source/css/_layout/sidebar/toc_wiki.styl
+++ b/source/css/_layout/widgets/toc_wiki.styl
@@ -1,14 +1,14 @@
-.widget-wrap#toc
+.widget-wrapper.toc
   .widget-header
     margin-top: 1rem
 
-.widget-wrap.multi#toc .widget-header
+.widget-wrapper.toc.multi .widget-header
   color: var(--text-p1)
   font-size: $fs-14
 
 
 // 其它分页链接
-.widget-wrap.multi#toc .doc-tree
+.widget-wrapper.toc.multi .doc-tree
   border-radius: $border-block
   background: var(--block)
   overflow: hidden
@@ -34,7 +34,7 @@
 
 
 // 当前分页链接
-.widget-wrap.multi#toc .doc-tree.active
+.widget-wrapper.toc.multi .doc-tree.active
   a.doc-tree-link
     background: var(--block)
     font-weight: 700
diff --git a/source/css/_layout/sidebar/widgets.styl b/source/css/_layout/widgets/widgets.styl
similarity index 90%
rename from source/css/_layout/sidebar/widgets.styl
rename to source/css/_layout/widgets/widgets.styl
index 942e0de..2922c9d 100644
--- a/source/css/_layout/sidebar/widgets.styl
+++ b/source/css/_layout/widgets/widgets.styl
@@ -8,7 +8,7 @@
   scrollbar(0, 0)
   z-index: 1
   line-height: 1.2
-  .widget-wrap
+  .widget-wrapper
     margin: 1rem 0 2rem
     .widget-header
       padding-left: var(--gap-l)
@@ -50,12 +50,12 @@
         line-height: 1.5
     .widget-header+.widget-body
       margin-top: 0
-  .widget-wrap+.widget-wrap .widget-header
+  .widget-wrapper+.widget-wrapper .widget-header
     margin-top: 3rem
 
 
 .l_left .widgets
-  .widget-wrap#recent .widget-body
+  .widget-wrapper.recent .widget-body
     display: flex
     flex-direction: column
     align-items: flex-start
@@ -70,7 +70,7 @@
         color: var(--text-p2)
       &:hover
         color: $color-hover
-  .widget-wrap#related .widget-body a
+  .widget-wrapper.related .widget-body a
     margin-top: 0.5rem
     margin-bottom: 1rem
     .title 
@@ -79,7 +79,7 @@
     .excerpt
       -webkit-line-clamp: 3
 
-  .widget-wrap#tagcloud .widget-body
+  .widget-wrapper.tagcloud .widget-body
     margin-top: 0.25rem
     a  
       word-break: break-word
@@ -88,7 +88,7 @@
       &:hover
         color: $color-hover
   
-  .widget-wrap#timeline .widget-body
+  .widget-wrapper.timeline .widget-body
     margin-top: 0.5rem
     .tag-plugin.timeline .timenode
       .header
diff --git a/source/js/main.js b/source/js/main.js
index 22577e0..ba1f503 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -111,12 +111,12 @@ const init = {
           }
         }
         if (topSeg) {
-          $("#toc a.toc-link").removeClass("active")
+          $(".toc#toc a.toc-link").removeClass("active")
           var link = "#" + topSeg.attr("id")
           if (link != '#undefined') {
-            $('#toc a.toc-link[href="' + encodeURI(link) + '"]').addClass("active")
+            $('.toc#toc a.toc-link[href="' + encodeURI(link) + '"]').addClass("active")
           } else {
-            $('#toc a.toc-link:first').addClass("active")
+            $('.toc#toc a.toc-link:first').addClass("active")
           }
         }
       })
@@ -124,7 +124,7 @@ const init = {
   },
   sidebar: () => {
     stellar.jQuery(() => {
-      $("#toc a.toc-link").click(function (e) {
+      $(".toc#toc a.toc-link").click(function (e) {
         l_body.classList.remove("sidebar");
       });
     })