Display sidebar on mobile for Pisces and Gemini (#710)

Co-authored-by: Mimi <1119186082@qq.com>

_config.yml

@@ -117,16 +117,18 @@ menu_settings:
 # ---------------------------------------------------------------
 
 sidebar:
-  # Sidebar Position.
+  # Sidebar position. Available values: left | right
   position: left
-  #position: right
 
-  # Manual define the sidebar width. If commented, will be default for:
+  # Sidebar width.
-  # Muse | Mist: 320
+  # Applicable to Muse | Mist and mobile of Pisces | Gemini.
-  # Pisces | Gemini: 240
+  width_expanded: 320
-  #width: 300
+  # Applicable to desktop of Pisces | Gemini.
+  width_dual_column: 240
 
-  # Sidebar Display (only for Muse | Mist), available values:
+  # Sidebar display.
+  # Applicable to Muse | Mist and mobile of Pisces | Gemini.
+  # Available values:
   #  - post    expand on posts automatically. Default.
   #  - always  expand for all pages automatically.
   #  - hide    expand only when click on the sidebar toggle icon.

layout/_partials/widgets.njk

@@ -1,6 +1,6 @@
 {# Widgets with fixed position #}
 
-{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist') %}
+{%- if theme.sidebar.display !== 'remove' %}
   <div class="toggle sidebar-toggle" role="button">
     <span class="toggle-line"></span>
     <span class="toggle-line"></span>

layout/_scripts/index.njk

@@ -11,6 +11,10 @@
   {{- next_js('schemes/muse.js') }}
 {%- endif %}
 
+{%- if theme.sidebar.display !== 'remove' %}
+  {{- next_js('sidebar.js') }}
+{%- endif %}
+
 {{- next_js('next-boot.js') }}
 {%- if theme.bookmark.enable %}
   {{- next_js('bookmark.js') }}

scripts/filters/minify.js

@@ -44,6 +44,10 @@ hexo.extend.filter.register('after_generate', () => {
     hexo.route.remove('js/schemes/muse.js');
   }
 
+  if (theme.sidebar.display === 'remove') {
+    hexo.route.remove('js/sidebar.js');
+  }
+
   // Third Party Scripts
   // Analytics
   if (!theme.baidu_analytics) {

source/css/_common/outline/sidebar/index.styl

@@ -1,3 +1,112 @@
++sidebar() {
+  if ($sidebar-toggle-alignment == 'right') {
+    .sidebar {
+      right: 0 - $sidebar-width-expanded;
+
+      .sidebar-active & {
+        right: 0;
+      }
+    }
+  } else {
+    .sidebar {
+      left: 0 - $sidebar-width-expanded;
+
+      .sidebar-active & {
+        left: 0;
+      }
+    }
+  }
+
+  .sidebar {
+    background: $black-deep;
+    bottom: 0;
+    if (not hexo-config('back2top.sidebar')) {
+      box-shadow: inset 0 2px 6px black;
+    }
+    max-height: 100vh;
+    overflow-y: auto;
+    position: fixed;
+    top: 0;
+    transition: all $transition-ease-out;
+    width: $sidebar-width-expanded;
+    z-index: $zindex-2;
+
+    a {
+      border-bottom-color: $black-light;
+      color: $grey-dark;
+
+      &:hover {
+        border-bottom-color: $gainsboro;
+        color: $gainsboro;
+      }
+    }
+  }
+
+  .links-of-author {
+    &:not(:first-child) {
+      margin-top: 15px;
+    }
+
+    a {
+      border-bottom-color: $black-light;
+      display: inline-block;
+      margin-bottom: 10px;
+      margin-right: 10px;
+      vertical-align: middle;
+
+      if (hexo-config('social_icons.transition')) {
+        transition: all $transition-ease;
+      }
+
+      &::before {
+        background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
+        display: inline-block;
+        margin-right: 3px;
+        transform: translateY(-2px);
+        round-icon(4px);
+      }
+    }
+  }
+
+  .links-of-blogroll-item {
+    if (hexo-config('links_settings.layout') == 'inline') {
+      display: inline-block;
+    }
+    padding: 2px 10px;
+
+    a {
+      box-sizing: border-box;
+      display: inline-block;
+      max-width: 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .popular-posts .popular-posts-item .popular-posts-link:hover {
+    background: none;
+  }
+
+  .sidebar-dimmer {
+    background: black;
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    transition: visibility .4s, opacity .4s;
+    visibility: hidden;
+    width: 100%;
+    z-index: $zindex-1;
+
+    .sidebar-active & {
+      opacity: .7;
+      visibility: visible;
+    }
+  }
+}
+
 .sidebar-inner {
   color: $grey-dark;
   padding: $sidebar-padding 10px;

source/css/_common/outline/sidebar/sidebar-toggle.styl

@@ -12,10 +12,10 @@
 
 @media (any-hover: hover) {
   body:not(.sidebar-active) .sidebar-toggle:hover {
-    toggle-arrow(hexo-config('sidebar.position'));
+    toggle-arrow($sidebar-toggle-alignment);
   }
 }
 
 .sidebar-active .sidebar-toggle {
-  toggle-close(hexo-config('sidebar.position'));
+  toggle-close($sidebar-toggle-alignment);
 }

source/css/_common/scaffolding/toggles.styl

@@ -22,9 +22,9 @@
 }
 
 .toggle.toggle-arrow {
-  toggle-arrow(hexo-config('sidebar.position'));
+  toggle-arrow($sidebar-toggle-alignment);
 }
 
 .toggle.toggle-close {
-  toggle-close(hexo-config('sidebar.position'));
+  toggle-close($sidebar-toggle-alignment);
 }

source/css/_mixins.styl

@@ -52,6 +52,16 @@ desktop-largest() {
   }
 }
 
+sidebar() {
+  if (($scheme == 'Muse') or ($scheme == 'Mist')) {
+    {block}
+  } else {
+    +tablet-mobile() {
+      {block}
+    }
+  }
+}
+
 random-color($min, $max) {
   return floor(math(0, 'random') * ($max - $min + 1) + $min);
 }
@@ -124,16 +134,9 @@ main-container() {
   }
 }
 
-sidebar-toggle-alignment($reverse) {
-  $condition = hexo-config('sidebar.position') == 'right';
-  if (($scheme == 'Muse') or ($scheme == 'Mist')) {
-    $condition = $condition == $reverse;
-  }
-  return $condition ? ('left' 'right') : ('right' 'left');
-}
-
 sidebar-toggle-position($reverse) {
-  $alignment = sidebar-toggle-alignment($reverse)[0];
+  $condition = ($sidebar-toggle-alignment == 'right') == $reverse;
+  $alignment = $condition ? 'left' : 'right';
   {$alignment}: $b2t-position-right;
   +tablet-mobile() {
     {$alignment}: $b2t-position-right-mobile;

source/css/_schemes/Muse/_sidebar.styl

@@ -1,134 +1,23 @@
-if (hexo-config('sidebar.position') == 'right') {
-  .sidebar-active {
-    // Note: $sidebar-desktop + $content-desktop-large should be less than desktop-large threshold
-    // Otherwise a horizontal scrollbar will appear
-    +desktop-large() {
-      padding-right: $sidebar-desktop;
-
-      .footer-fixed {
-        right: $sidebar-desktop;
-      }
-    }
-  }
-
-  .sidebar {
-    right: 0 - $sidebar-desktop;
-
-    .sidebar-active & {
-      right: 0;
-    }
-  }
-} else {
-  .sidebar-active {
-    +desktop-large() {
-      padding-left: $sidebar-desktop;
-
-      .footer-fixed {
-        left: $sidebar-desktop;
-      }
-    }
-  }
-
-  .sidebar {
-    left: 0 - $sidebar-desktop;
-
-    .sidebar-active & {
-      left: 0;
-    }
-  }
-}
-
-.sidebar {
-  background: $black-deep;
-  bottom: 0;
-  if (not hexo-config('back2top.sidebar')) {
-    box-shadow: inset 0 2px 6px black;
-  }
-  max-height: 100vh;
-  overflow-y: auto;
-  position: fixed;
-  top: 0;
-  transition: all $transition-ease-out;
-  width: $sidebar-desktop;
-  z-index: $zindex-2;
-
-  a {
-    border-bottom-color: $black-light;
-    color: $grey-dark;
-
-    &:hover {
-      border-bottom-color: $gainsboro;
-      color: $gainsboro;
-    }
-  }
-}
-
-.links-of-author {
-  &:not(:first-child) {
-    margin-top: 15px;
-  }
-
-  a {
-    border-bottom-color: $black-light;
-    display: inline-block;
-    margin-bottom: 10px;
-    margin-right: 10px;
-    vertical-align: middle;
-
-    if (hexo-config('social_icons.transition')) {
-      transition: all $transition-ease;
-    }
-
-    &::before {
-      background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
-      display: inline-block;
-      margin-right: 3px;
-      transform: translateY(-2px);
-      round-icon(4px);
-    }
-  }
-}
-
-.links-of-blogroll-item {
-  if (hexo-config('links_settings.layout') == 'inline') {
-    display: inline-block;
-  }
-  padding: 2px 10px;
-
-  a {
-    box-sizing: border-box;
-    display: inline-block;
-    max-width: 280px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.popular-posts .popular-posts-item .popular-posts-link:hover {
-  background: none;
-}
-
-.sidebar-dimmer {
-  background: black;
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: fixed;
-  top: 0;
-  transition: visibility .4s, opacity .4s;
-  visibility: hidden;
-  width: 100%;
-  z-index: $zindex-1;
-
-  .sidebar-active & {
-    opacity: .7;
-    visibility: visible;
-  }
-}
-
 +desktop-large() {
   .sidebar-dimmer {
     display: none;
   }
+
+  .sidebar-active {
+    // Note: $sidebar-width-expanded + $content-desktop-large should be less than desktop-large threshold
+    // Otherwise a horizontal scrollbar will appear
+    if ($sidebar-toggle-alignment == 'right') {
+      padding-right: $sidebar-width-expanded;
+
+      .footer-fixed {
+        right: $sidebar-width-expanded;
+      }
+    } else {
+      padding-left: $sidebar-width-expanded;
+
+      .footer-fixed {
+        left: $sidebar-width-expanded;
+      }
+    }
+  }
 }

source/css/_schemes/Pisces/_header.styl

@@ -1,5 +1,5 @@
 .column {
-  width: $sidebar-desktop;
+  width: $sidebar-width-dual-column;
 
   +tablet-mobile() {
     width: auto;

source/css/_schemes/Pisces/_layout.styl

@@ -14,7 +14,7 @@ header.header {
   justify-content: space-between;
   main-container();
 
-  if (hexo-config('sidebar.position') == 'right') {
+  if ($sidebar-toggle-alignment == 'right') {
     flex-direction: row-reverse;
   }
 
@@ -36,10 +36,10 @@ header.header {
 }
 
 .footer-inner {
-  if (hexo-config('sidebar.position') == 'right') {
+  if ($sidebar-toggle-alignment == 'right') {
-    padding-right: $sidebar-desktop + $sidebar-offset;
+    padding-right: $sidebar-width-dual-column + $sidebar-offset;
   } else {
-    padding-left: $sidebar-desktop + $sidebar-offset;
+    padding-left: $sidebar-width-dual-column + $sidebar-offset;
   }
 
   +tablet-mobile() {

source/css/_schemes/Pisces/_sidebar.styl

@@ -1,4 +1,5 @@
-.sidebar {
++desktop() {
+  .sidebar {
     // https://caniuse.com/css-sticky
     position: -webkit-sticky;
     position: sticky;
@@ -7,9 +8,13 @@
     +tablet-mobile() {
       display: none;
     }
-}
+  }
 
-.sidebar-inner {
+  .sidebar-toggle {
+    display: none;
+  }
+
+  .sidebar-inner {
     background: var(--content-bg-color);
     border-radius: $border-radius;
     box-shadow: $box-shadow;
@@ -21,13 +26,13 @@
     if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) {
       visibility: hidden;
     }
-}
+  }
 
-.site-state-item {
+  .site-state-item {
     padding: 0 10px;
-}
+  }
 
-.sidebar .sidebar-button {
+  .sidebar .sidebar-button {
     border-bottom: 1px dotted $grey-light;
     border-top: 1px dotted $grey-light;
 
@@ -43,13 +48,13 @@
         color: darken($orange, 20%);
       }
     }
-}
+  }
 
-.links-of-author {
+  .links-of-author {
     flex-wrap();
-}
+  }
 
-.links-of-author-item {
+  .links-of-author-item {
     sidebar-inline-links-item();
 
     if (not hexo-config('social_icons.icons_only')) {
@@ -65,17 +70,17 @@
         background: var(--body-bg-color);
       }
     }
-}
+  }
 
-.links-of-blogroll-item {
+  .links-of-blogroll-item {
     if (hexo-config('links_settings.layout') == 'inline') {
       display: inline-block;
       max-width: 100%;
       sidebar-inline-links-item();
     }
-}
+  }
 
-if (hexo-config('back2top.sidebar')) {
+  if (hexo-config('back2top.sidebar')) {
     // Only when back2top.sidebar is true, apply the following styles
     .back-to-top {
       background: var(--body-bg-color);
@@ -85,4 +90,5 @@ if (hexo-config('back2top.sidebar')) {
         margin-top: 16px;
       }
     }
+  }
 }

source/css/_variables/Muse.styl

@@ -1,9 +1,6 @@
 // Variables of Muse scheme
 // ==================================================
 
-$sidebar-width           = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320;
-$sidebar-desktop         = unit($sidebar-width, 'px');
-
 $content-padding-bottom     = 60px;
 $posts-first-padding        = 70px;
 $posts-first-padding-mobile = 35px;

source/css/_variables/Pisces.styl

@@ -5,8 +5,8 @@
 // --------------------------------------------------
 $body-bg-color                = #f5f7f9;
 
-$sidebar-width                = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240;
+$sidebar-width                = hexo-config('sidebar.width_dual_column') is a 'unit' ? hexo-config('sidebar.width_dual_column') : 240;
-$sidebar-desktop              = unit($sidebar-width, 'px');
+$sidebar-width-dual-column    = unit($sidebar-width, 'px');
 $content-wrap                 = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px');
 
 $content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px');

source/css/_variables/base.styl

@@ -242,6 +242,8 @@ $tag-cloud-end-dark   = #eee;
 // Variables for sidebar section elements.
 // --------------------------------------------------
 
+$sidebar-width                        = hexo-config('sidebar.width_expanded') is a 'unit' ? hexo-config('sidebar.width_expanded') : 320;
+$sidebar-width-expanded               = unit($sidebar-width, 'px');
 $sidebar-padding                      = hexo-config('sidebar.padding') is a 'unit' ? unit(hexo-config('sidebar.padding'), px) : 18px;
 $sidebar-offset                       = hexo-config('sidebar.offset') is a 'unit' ? unit(hexo-config('sidebar.offset'), px) : 12px;
 $sidebar-nav-color                    = $grey-dim;
@@ -281,6 +283,7 @@ $b2t-bg-color                 = $black-deep;
 $sidebar-toggle-inner-size    = 16px;
 $sidebar-toggle-padding       = 5px;
 $sidebar-toggle-size          = $sidebar-toggle-inner-size + $sidebar-toggle-padding * 2;
+$sidebar-toggle-alignment     = hexo-config('sidebar.position') == 'left' ? 'left' : 'right';
 
 //  .post-expand .post-eof
 //  In Muse scheme, margin above and below the post separator

source/js/schemes/muse.js

@@ -1,53 +1,5 @@
-/* global CONFIG */
-
 document.addEventListener('DOMContentLoaded', () => {
 
-  const isRight = CONFIG.sidebar.position === 'right';
-
-  const sidebarToggleMotion = {
-    mouse: {},
-    init : function() {
-      window.addEventListener('mousedown', this.mousedownHandler.bind(this));
-      window.addEventListener('mouseup', this.mouseupHandler.bind(this));
-      document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
-      document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
-      window.addEventListener('sidebar:show', this.showSidebar);
-      window.addEventListener('sidebar:hide', this.hideSidebar);
-    },
-    mousedownHandler: function(event) {
-      this.mouse.X = event.pageX;
-      this.mouse.Y = event.pageY;
-    },
-    mouseupHandler: function(event) {
-      const deltaX = event.pageX - this.mouse.X;
-      const deltaY = event.pageY - this.mouse.Y;
-      const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main');
-      // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.
-      if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {
-        this.hideSidebar();
-      }
-    },
-    clickHandler: function() {
-      document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();
-    },
-    showSidebar: function() {
-      document.body.classList.add('sidebar-active');
-      const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft';
-      document.querySelectorAll('.sidebar .animated').forEach((element, index) => {
-        element.style.animationDelay = (100 * index) + 'ms';
-        element.classList.remove(animateAction);
-        setTimeout(() => {
-          // Trigger a DOM reflow
-          element.classList.add(animateAction);
-        });
-      });
-    },
-    hideSidebar: function() {
-      document.body.classList.remove('sidebar-active');
-    }
-  };
-  if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init();
-
   function updateFooterPosition() {
     const footer = document.querySelector('.footer');
     const containerHeight = document.querySelector('.main').offsetHeight + footer.offsetHeight;

source/js/sidebar.js

@@ -0,0 +1,50 @@
+/* global CONFIG */
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  const isRight = CONFIG.sidebar.position === 'right';
+
+  const sidebarToggleMotion = {
+    mouse: {},
+    init : function() {
+      window.addEventListener('mousedown', this.mousedownHandler.bind(this));
+      window.addEventListener('mouseup', this.mouseupHandler.bind(this));
+      document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
+      document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
+      window.addEventListener('sidebar:show', this.showSidebar);
+      window.addEventListener('sidebar:hide', this.hideSidebar);
+    },
+    mousedownHandler: function(event) {
+      this.mouse.X = event.pageX;
+      this.mouse.Y = event.pageY;
+    },
+    mouseupHandler: function(event) {
+      const deltaX = event.pageX - this.mouse.X;
+      const deltaY = event.pageY - this.mouse.Y;
+      const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main');
+      // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.
+      if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {
+        this.hideSidebar();
+      }
+    },
+    clickHandler: function() {
+      document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();
+    },
+    showSidebar: function() {
+      document.body.classList.add('sidebar-active');
+      const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft';
+      document.querySelectorAll('.sidebar .animated').forEach((element, index) => {
+        element.style.animationDelay = (100 * index) + 'ms';
+        element.classList.remove(animateAction);
+        setTimeout(() => {
+          // Trigger a DOM reflow
+          element.classList.add(animateAction);
+        });
+      });
+    },
+    hideSidebar: function() {
+      document.body.classList.remove('sidebar-active');
+    }
+  };
+  sidebarToggleMotion.init();
+});