Fixes and enhancements. [13]

_config.yml

@@ -138,11 +138,11 @@ toc:
 #creative_commons:
 
 sidebar:
-  # Sidebar Position, available value: left | right
+  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
   position: left
   #position: right
 
-  # Sidebar Display, available value:
+  # Sidebar Display, available value (only for Muse | Mist):
   #  - post    expand on posts automatically. Default.
   #  - always  expand for all pages automatically
   #  - hide    expand only when click on the sidebar toggle icon.
@@ -152,17 +152,16 @@ sidebar:
   #display: hide
   #display: remove
 
-  # Sidebar offset from top menubar in pixels.
+  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
   offset: 12
-  offset_float: 12
 
-  # Back to top in sidebar
+  # Back to top in sidebar (only for Pisces | Gemini).
   b2t: false
 
-  # Scroll percent label in b2t button
+  # Scroll percent label in b2t button.
   scrollpercent: false
 
-  # Enable sidebar on narrow view
+  # Enable sidebar on narrow view (only for Muse | Mist).
   onmobile: false
 
 

layout/_macro/sidebar.swig

@@ -17,125 +17,126 @@
 
       {% if display_toc and toc(page.content).length > 1 %}
         <ul class="sidebar-nav motion-element">
-          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
+          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
             {{ __('sidebar.toc') }}
           </li>
-          <li class="sidebar-nav-overview" data-target="site-overview">
+          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
             {{ __('sidebar.overview') }}
           </li>
         </ul>
       {% endif %}
 
-      <section class="site-overview sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
-        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
-          {% if theme.avatar %}
-            <img class="site-author-image" itemprop="image"
-              src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
-              alt="{{ theme.author }}" />
-          {% endif %}
-            <p class="site-author-name" itemprop="name">{{ theme.author }}</p>
-            <p class="site-description motion-element" itemprop="description">{#
-          #}{% if theme.seo %}{#
-            #}{{ theme.signature }}{#
-          #}{% else %}{#
-            #}{{ theme.description }}{#
-          #}{% endif %}{#
-          #}</p>
-        </div>
+      <section class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
+        <div class="site-overview">
+          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+            {% if theme.avatar %}
+              <img class="site-author-image" itemprop="image"
+                src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
+                alt="{{ theme.author }}" />
+            {% endif %}
+              <p class="site-author-name" itemprop="name">{{ theme.author }}</p>
+              <p class="site-description motion-element" itemprop="description">{#
+            #}{% if theme.seo %}{#
+              #}{{ theme.signature }}{#
+            #}{% else %}{#
+              #}{{ theme.description }}{#
+            #}{% endif %}{#
+            #}</p>
+          </div>
 
-        <nav class="site-state motion-element">
+          <nav class="site-state motion-element">
+
+            {% if config.archive_dir != '/' and site.posts.length > 0 %}
+              <div class="site-state-item site-state-posts">
+              {% if theme.menu.archives %}
+                <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
+              {% else %}
+                <a href="{{ url_for(config.archive_dir) }}">
+              {% endif %}
+                  <span class="site-state-item-count">{{ site.posts.length }}</span>
+                  <span class="site-state-item-name">{{ __('state.posts') }}</span>
+                </a>
+              </div>
+            {% endif %}
 
-          {% if config.archive_dir != '/' and site.posts.length > 0 %}
-            <div class="site-state-item site-state-posts">
-            {% if theme.menu.archives %}
-              <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
-            {% else %}
-              <a href="{{ url_for(config.archive_dir) }}">
+            {% if site.categories.length > 0 %}
+              {% set categoriesPageQuery = site.pages.find({type: 'categories'}, {lean: true}) %}
+              {% set hasCategoriesPage = categoriesPageQuery.length > 0 %}
+              <div class="site-state-item site-state-categories">
+                {% if hasCategoriesPage %}<a href="{{ url_for(categoriesPageQuery[0].path) }}">{% endif %}
+                  <span class="site-state-item-count">{{ site.categories.length }}</span>
+                  <span class="site-state-item-name">{{ __('state.categories') }}</span>
+                {% if hasCategoriesPage %}</a>{% endif %}
+              </div>
+            {% endif %}
+
+            {% if site.tags.length > 0 %}
+              {% set tagsPageQuery = site.pages.find({type: 'tags'}, {lean: true}) %}
+              {% set hasTagsPage = tagsPageQuery.length > 0 %}
+              <div class="site-state-item site-state-tags">
+                {% if hasTagsPage %}<a href="{{ url_for(tagsPageQuery[0].path) }}">{% endif %}
+                  <span class="site-state-item-count">{{ site.tags.length }}</span>
+                  <span class="site-state-item-name">{{ __('state.tags') }}</span>
+                {% if hasTagsPage %}</a>{% endif %}
+              </div>
             {% endif %}
-                <span class="site-state-item-count">{{ site.posts.length }}</span>
-                <span class="site-state-item-name">{{ __('state.posts') }}</span>
+
+          </nav>
+
+          {% if theme.rss %}
+            <div class="feed-link motion-element">
+              <a href="{{ url_for(theme.rss) }}" rel="alternate">
+                <i class="fa fa-rss"></i>
+                RSS
               </a>
             </div>
           {% endif %}
 
-          {% if site.categories.length > 0 %}
-            {% set categoriesPageQuery = site.pages.find({type: 'categories'}, {lean: true}) %}
-            {% set hasCategoriesPage = categoriesPageQuery.length > 0 %}
-            <div class="site-state-item site-state-categories">
-              {% if hasCategoriesPage %}<a href="{{ url_for(categoriesPageQuery[0].path) }}">{% endif %}
-                <span class="site-state-item-count">{{ site.categories.length }}</span>
-                <span class="site-state-item-name">{{ __('state.categories') }}</span>
-              {% if hasCategoriesPage %}</a>{% endif %}
+          <div class="links-of-author motion-element">
+            {% if theme.social %}
+              {% for name, link in theme.social %}
+                <span class="links-of-author-item">
+                  <a href="{{ link.split('||')[0] | trim }}" target="_blank" title="{{ name }}">
+                    {% if theme.social_icons.enable %}
+                      <i class="fa fa-fw fa-{{ link.split('||')[1] | trim | default('globe') }}"></i>{#
+                  #}{% endif %}{#
+                    #}{% if not theme.social_icons.icons_only %}{#
+                      #}{{ name }}{#
+                    #}{% endif %}{#
+                #}</a>
+                </span>
+              {% endfor %}
+            {% endif %}
+          </div>
+
+          {% set cc = {'by': 1, 'by-nc': 1, 'by-nc-nd': 1, 'by-nc-sa': 1, 'by-nd': 1, 'by-sa': 1, 'zero': 1} %}
+          {% if theme.creative_commons in cc %}
+            <div class="cc-license motion-element" itemprop="license">
+              <a href="https://creativecommons.org/{% if theme.creative_commons === 'zero' %}publicdomain/zero/1.0{% else %}licenses/{{ theme.creative_commons }}/4.0{% endif %}/" class="cc-opacity" target="_blank">
+                <img src="{{ url_for(theme.images) }}/cc-{{ theme.creative_commons }}.svg" alt="Creative Commons" />
+              </a>
             </div>
           {% endif %}
 
-          {% if site.tags.length > 0 %}
-            {% set tagsPageQuery = site.pages.find({type: 'tags'}, {lean: true}) %}
-            {% set hasTagsPage = tagsPageQuery.length > 0 %}
-            <div class="site-state-item site-state-tags">
-              {% if hasTagsPage %}<a href="{{ url_for(tagsPageQuery[0].path) }}">{% endif %}
-                <span class="site-state-item-count">{{ site.tags.length }}</span>
-                <span class="site-state-item-name">{{ __('state.tags') }}</span>
-              {% if hasTagsPage %}</a>{% endif %}
+          {# Blogroll #}
+          {% if theme.links %}
+            <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
+              <div class="links-of-blogroll-title">
+                <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
+                {{ theme.links_title }}
+              </div>
+              <ul class="links-of-blogroll-list">
+                {% for name, link in theme.links %}
+                  <li class="links-of-blogroll-item">
+                    <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
+                  </li>
+                {% endfor %}
+              </ul>
             </div>
           {% endif %}
 
-        </nav>
-
-        {% if theme.rss %}
-          <div class="feed-link motion-element">
-            <a href="{{ url_for(theme.rss) }}" rel="alternate">
-              <i class="fa fa-rss"></i>
-              RSS
-            </a>
-          </div>
-        {% endif %}
-
-        <div class="links-of-author motion-element">
-          {% if theme.social %}
-            {% for name, link in theme.social %}
-              <span class="links-of-author-item">
-                <a href="{{ link.split('||')[0] | trim }}" target="_blank" title="{{ name }}">
-                  {% if theme.social_icons.enable %}
-                    <i class="fa fa-fw fa-{{ link.split('||')[1] | trim | default('globe') }}"></i>{#
-                #}{% endif %}{#
-                  #}{% if not theme.social_icons.icons_only %}{#
-                    #}{{ name }}{#
-                  #}{% endif %}{#
-              #}</a>
-              </span>
-            {% endfor %}
-          {% endif %}
+          {% include '../_custom/sidebar.swig' %}
         </div>
-
-        {% set cc = {'by': 1, 'by-nc': 1, 'by-nc-nd': 1, 'by-nc-sa': 1, 'by-nd': 1, 'by-sa': 1, 'zero': 1} %}
-        {% if theme.creative_commons in cc %}
-          <div class="cc-license motion-element" itemprop="license">
-            <a href="https://creativecommons.org/{% if theme.creative_commons === 'zero' %}publicdomain/zero/1.0{% else %}licenses/{{ theme.creative_commons }}/4.0{% endif %}/" class="cc-opacity" target="_blank">
-              <img src="{{ url_for(theme.images) }}/cc-{{ theme.creative_commons }}.svg" alt="Creative Commons" />
-            </a>
-          </div>
-        {% endif %}
-
-        {# Blogroll #}
-        {% if theme.links %}
-          <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
-            <div class="links-of-blogroll-title">
-              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
-              {{ theme.links_title }}
-            </div>
-            <ul class="links-of-blogroll-list">
-              {% for name, link in theme.links %}
-                <li class="links-of-blogroll-item">
-                  <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
-                </li>
-              {% endfor %}
-            </ul>
-          </div>
-        {% endif %}
-
-        {% include '../_custom/sidebar.swig' %}
-
       </section>
 
       {% if display_toc and toc(page.content).length > 1 %}

source/css/_common/components/back-to-top-sidebar.styl

@@ -1,6 +1,6 @@
 .back-to-top {
   display: none;
-  margin: 15px -10px -20px;
+  margin: 20px -10px -20px;
   background: $body-bg-color;
   font-size: $b2t-font-size;
   opacity: $b2t-opacity;

source/css/_common/components/sidebar/sidebar.styl

@@ -32,6 +32,15 @@
   text-align: center;
 }
 
+.site-overview-wrap {
+  overflow: hidden;
+}
+
+.site-overview {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 @import "sidebar-toggle";
 @import "sidebar-author";
 @import "site-state";

source/css/_schemes/Pisces/_sidebar.styl

@@ -12,6 +12,7 @@
 
 
 .sidebar-inner {
+//padding: 20px 10px 0;
   box-sizing: border-box;
   width: 240px;
   color: $text-color;
@@ -21,8 +22,13 @@
 
   &.affix {
     position: fixed;
-    top: $sidebar-offset-float;
+    top: $sidebar-offset;
   }
+
+  &.affix-bottom {
+    position: absolute;
+  }
+
 }
 
 .site-overview {

source/css/_variables/Pisces.styl

@@ -21,7 +21,7 @@ $subtitle-color                   = $gray-lighter
 
 // Sidebar
 // --------------------------------------------------
-$sidebar-offset-float             = unit(hexo-config('sidebar.offset_float'), px) if hexo-config('sidebar.offset_float') is a 'unit'
+$sidebar-offset             = unit(hexo-config('sidebar.offset'), px) if hexo-config('sidebar.offset') is a 'unit'
 
 $sidebar-nav-hover-color          = $orange
 $sidebar-highlight                = $orange

source/js/src/motion.js

@@ -173,11 +173,12 @@ $(document).ready(function () {
       this.sidebarEl.removeClass('sidebar-active');
       this.sidebarEl.trigger('sidebar.isHiding');
 
-      //在 post 页面下按下隐藏 sidebar 时如果当前选中的是“站点概览”，将 toc 去除 motion 效果
-      //防止再次打开时会出现在“站点概览”下的 bug
+      // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
       if (!!$('.post-toc-wrap')) {
-        if ($('.site-overview').css('display') === 'block') {
+        if ($('.site-overview-wrap').css('display') === 'block') {
           $('.post-toc-wrap').removeClass('motion-element');
+        } else {
+          $('.post-toc-wrap').addClass('motion-element');
         }
       }
     }