From 5b9d0acf93d4c6f5f3d6c23e0645bdec37846a38 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Fri, 11 Nov 2022 19:52:39 +0800
Subject: [PATCH] Support multiple sidebar-inner

---
 layout/_macro/sidebar.njk                  | 19 +++++++++++++++++++
 layout/_partials/sidebar/site-overview.njk | 17 -----------------
 source/css/_schemes/Pisces/_sidebar.styl   |  8 ++++----
 source/css/noscript.styl                   |  1 +
 source/js/motion.js                        | 16 ++++++++++------
 5 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/layout/_macro/sidebar.njk b/layout/_macro/sidebar.njk
index d892e08d62..6a1fd92aa5 100644
--- a/layout/_macro/sidebar.njk
+++ b/layout/_macro/sidebar.njk
@@ -38,5 +38,24 @@
         </div>
       {%- endif %}
     </div>
+
+    {# Blogroll #}
+    {%- if theme.links %}
+    <div class="sidebar-inner sidebar-blogroll">
+      <div class="links-of-blogroll site-overview-item animated">
+        <div class="links-of-blogroll-title">
+          {%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{% endif %}
+          {{ theme.links_settings.title }}
+        </div>
+        <ul class="links-of-blogroll-list">
+          {%- for blogrollText, blogrollURL in theme.links %}
+            <li class="links-of-blogroll-item">
+              {{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
+            </li>
+          {%- endfor %}
+        </ul>
+      </div>
+    </div>
+    {%- endif %}
   </aside>
 {% endmacro %}
diff --git a/layout/_partials/sidebar/site-overview.njk b/layout/_partials/sidebar/site-overview.njk
index 857c4c6d76..c22dd0b1ef 100644
--- a/layout/_partials/sidebar/site-overview.njk
+++ b/layout/_partials/sidebar/site-overview.njk
@@ -79,20 +79,3 @@
     {{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }}
   </div>
 {%- endif %}
-
-{# Blogroll #}
-{%- if theme.links %}
-  <div class="links-of-blogroll site-overview-item animated">
-    <div class="links-of-blogroll-title">
-      {%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{% endif %}
-      {{ theme.links_settings.title }}
-    </div>
-    <ul class="links-of-blogroll-list">
-      {%- for blogrollText, blogrollURL in theme.links %}
-        <li class="links-of-blogroll-item">
-          {{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
-        </li>
-      {%- endfor %}
-    </ul>
-  </div>
-{%- endif %}
diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
index 9197923a6e..07ef7991fb 100644
--- a/source/css/_schemes/Pisces/_sidebar.styl
+++ b/source/css/_schemes/Pisces/_sidebar.styl
@@ -7,10 +7,6 @@
   +tablet-mobile() {
     display: none;
   }
-
-  if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) {
-    visibility: hidden;
-  }
 }
 
 .sidebar-inner {
@@ -20,6 +16,10 @@
   box-sizing: border-box;
   color: var(--text-color);
   margin-top: $sidebar-offset;
+
+  if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) {
+    visibility: hidden;
+  }
 }
 
 .site-state-item {
diff --git a/source/css/noscript.styl b/source/css/noscript.styl
index 0230c805fd..8e37a25017 100644
--- a/source/css/noscript.styl
+++ b/source/css/noscript.styl
@@ -2,6 +2,7 @@ body { margin-top: 2rem; }
 
 .use-motion .menu-item,
 .use-motion .sidebar,
+.use-motion .sidebar-inner,
 .use-motion .post-block,
 .use-motion .pagination,
 .use-motion .comments,
diff --git a/source/js/motion.js b/source/js/motion.js
index 3192ec56dd..b01b082d30 100644
--- a/source/js/motion.js
+++ b/source/js/motion.js
@@ -104,16 +104,20 @@ NexT.motion.middleWares = {
   },
 
   sidebar: function() {
-    const sidebar = document.querySelector('.sidebar');
+    const sequence = [];
+    const sidebar = document.querySelectorAll('.sidebar-inner');
     const sidebarTransition = CONFIG.motion.transition.sidebar;
     // Only for Pisces | Gemini.
     if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
-      return [{
-        targets : sidebar,
-        complete: () => sidebar.classList.add('animated', sidebarTransition)
-      }];
+      sidebar.forEach(targets => {
+        sequence.push({
+          targets,
+          complete: () => targets.classList.add('animated', sidebarTransition),
+          deltaT  : '-=100'
+        });
+      });
     }
-    return [];
+    return sequence;
   },
 
   footer: function() {