Support multiple sidebar-inner

next-theme · Nov 11, 2022 · 5b9d0ac · 5b9d0ac
1 parent 9a94710
commit 5b9d0ac
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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() {