From 400254dcfa20b93b30ce2b04ba731690836bbf32 Mon Sep 17 00:00:00 2001
From: xaoxuu <me@xaoxuu.com>
Date: Mon, 26 Jul 2021 01:14:37 +0800
Subject: [PATCH] add toc tag

---
 scripts/tags/toc.js                         | 72 +++++++++++++++++++++
 source/css/_layout/tag-plugins/folding.styl |  6 +-
 source/css/_layout/tag-plugins/sites.styl   |  2 +-
 source/css/_layout/tag-plugins/toc.styl     | 38 +++++++++++
 4 files changed, 114 insertions(+), 4 deletions(-)
 create mode 100644 scripts/tags/toc.js
 create mode 100644 source/css/_layout/tag-plugins/toc.styl

diff --git a/scripts/tags/toc.js b/scripts/tags/toc.js
new file mode 100644
index 0000000..37fb42b
--- /dev/null
+++ b/scripts/tags/toc.js
@@ -0,0 +1,72 @@
+/**
+ * toc.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% toc wiki:xxx [open:true] [display:mobile] title %}
+ */
+
+'use strict';
+
+function layoutDocTree(pages) {
+  var el = '';
+  el += '<ul class="toc">';
+  pages.forEach((p, i) => {
+    el += '<li>';
+    el += '<a class="list-link" href="' + p.permalink + '">';
+    el += '<span>' + (p.title || p.seo_title) + '</span>';
+    el += '</a>';
+    el += '</li>';
+  });
+  el += '</ul>';
+  return el;
+}
+
+hexo.extend.tag.register('toc', function(args) {
+  args = hexo.args.map(args, ['wiki', 'open', 'display'], ['title']);
+
+  var el = '';
+  el += '<div class="tag-plugin toc"';
+  el += ' ' + hexo.args.joinTags(args, ['display']).join(' ');
+  if (args.display === 'mobile') {
+    el += ' style="display:none"';
+  }
+  el += '>';
+
+  el += '<details class="toc"';
+  if (args.open !== false) {
+    el += ' open';
+  }
+  el += '>';
+  el += '<summary>';
+  el += args.title || 'TOC';
+  el += '</summary>';
+
+  if (args.wiki) {
+    const proj = hexo.theme.config.wiki.projects[args.wiki];
+    if (proj === undefined) {
+      return '';
+    }
+    if (proj.sections && proj.sections.length > 1) {
+      el += '<div class="body fs14 multi">';
+      proj.sections.forEach((sec, i) => {
+        el += '<section>';
+        el += '<div class="header">';
+        el += sec.title;
+        el += '</div>';
+        el += layoutDocTree(sec.pages);
+        el += '</section>';
+      });
+      el += '</div>';
+    } else {
+      el += '<div class="body fs14">';
+      el += '<div class="body">';
+      el += layoutDocTree(proj.pages);
+      el += '</div>';
+      el += '</div>';
+    }
+  }
+  el += '</details>';
+  // end
+  el += '</div>';
+  return el;
+});
diff --git a/source/css/_layout/tag-plugins/folding.styl b/source/css/_layout/tag-plugins/folding.styl
index 6883349..3d60bea 100644
--- a/source/css/_layout/tag-plugins/folding.styl
+++ b/source/css/_layout/tag-plugins/folding.styl
@@ -1,4 +1,4 @@
-details
+details.folding
   display: block
   padding: 1rem
   margin: 1rem 0
@@ -31,7 +31,7 @@ details
         right: 1rem
 
 
-details[open]
+details.folding[open]
   >summary
     border-bottom: 1px solid var(--theme)
     border-bottom-left-radius: 0
@@ -54,7 +54,7 @@ details[open]
     >:last-child
       margin-bottom: 0
 
-details[child=codeblock]>div.body
+details.folding[child=codeblock]>div.body
   padding: 0
   background: transparent
   .highlight
diff --git a/source/css/_layout/tag-plugins/sites.styl b/source/css/_layout/tag-plugins/sites.styl
index a8f6f2d..effde25 100644
--- a/source/css/_layout/tag-plugins/sites.styl
+++ b/source/css/_layout/tag-plugins/sites.styl
@@ -1,6 +1,6 @@
 .sites-wrap
   .group-header
-    margin: 0 0 1rem
+    margin: 1rem 0
     p
       margin: 0
       font-size: $fs-14
diff --git a/source/css/_layout/tag-plugins/toc.styl b/source/css/_layout/tag-plugins/toc.styl
new file mode 100644
index 0000000..ff3827e
--- /dev/null
+++ b/source/css/_layout/tag-plugins/toc.styl
@@ -0,0 +1,38 @@
+details.toc
+  background: var(--block)
+  border: 1px solid var(--block-border)
+  border-radius: $border-block
+  overflow: hidden
+  color: var(--text-p2)
+  summary
+    cursor: pointer
+    padding: 0 .5rem
+    line-height: 2
+    color: var(--text-p2)
+    font-size: $fs-13
+    font-weight: 500
+    &:hover
+      background: var(--block-hover)
+
+  >div.body
+    margin: var(--gap-p) 1rem 1rem
+
+details.toc[open] >summary
+  border-bottom: 1px solid transparent
+  &:hover
+    border-bottom-color: var(--block-border)
+
+details.toc[open] >div.body
+  section+section
+    margin-top: 1rem
+  section
+    .header
+      line-height: 2
+      font-weight: 500
+    .header+.doc_tree
+      margin-top: 0
+
+
+@media screen and (max-width: $device-tablet)
+  .tag-plugin.toc[display=mobile]
+    display: block !important