[opt] toc collapse config

_data/widgets.yml

@@ -34,6 +34,7 @@ recent:
   layout: recent
   rss: # /atom.xml # npm i hexo-generator-feed
   limit: 5 # Count of posts
+
 # TOC (valid only in layout:post/wiki)
 toc:
   layout: toc
@@ -41,6 +42,8 @@ toc:
   min_depth: 2
   max_depth: 5
   fallback: recent # Use a backup widget when toc does not exist.
+  collapse: false # true / false / auto
+
 # github user info
 ghuser:
   layout: ghuser

layout/_partial/widgets/toc.ejs

@@ -66,7 +66,7 @@ function layoutDiv(fallback) {
 
   var el = '';
   if (type.length > 0) {
-    el += '<widget class="widget-wrapper toc ' + type + '" id="data-toc">';
+    el += `<widget class="widget-wrapper toc ${type}" id="data-toc" collapse="${item.collapse}">`;
     if (page.layout !== 'wiki') {
       // post 布局
       el += layoutTocHeader(page.toc_title);

source/css/_layout/widgets/toc_common.styl

@@ -69,14 +69,28 @@
     color: $color-theme !important
     &:before
       visibility: visible
+  
+// 始终折叠
+.widget-wrapper.toc[collapse='true']
+  .toc-item a.toc-link+ol
+    display: none
+  // 激活上级目录时显示子目录
+  .toc a.toc-link.active+ol
+    display: block
 
+// 自动折叠
+.widget-wrapper.toc[collapse='auto']
+  .toc-item a.toc-link+ol
+    display: none
+  // 激活上级目录时显示子目录
+  .toc a.toc-link.active+ol
+    display: block
+  // 鼠标放上去时显示子目录
+  &:hover a.toc-link+ol
+    display: block
 
-// 激活上级目录时显示子目录
-.toc-item a.toc-link+ol
-  display: none
-.toc a.toc-link.active+ol
-  display: block
-ol:has(> .toc-item a.active)
-  display: block
-.doc-tree:hover a.toc-link+ol
+// 子目录激活时显示
+.widget-wrapper.toc[collapse='true'] ol:has(> .toc-item a.active)
   display: block
+.widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active)
+  display: block