Make sidebar toc & PJAX loading faster (theme-next#1113)

tongluyang · Aug 21, 2019 · 86d1d36 · 86d1d36
1 parent 2dfd0dd
commit 86d1d36
Show file tree

Hide file tree

Showing 22 changed files with 298 additions and 356 deletions.
diff --git a/languages/en.yml b/languages/en.yml
@@ -30,7 +30,6 @@ post:
   read_more: Read more
   untitled: Untitled
   sticky: Sticky
-  toc_empty: This post does not have a Table of Contents
   views: Views
   related_posts: Related Posts
   copy_button: Copy

diff --git a/layout/_layout.swig b/layout/_layout.swig
@@ -13,36 +13,25 @@
   {%- set pjax = ' pjax' %}
 {%- endif %}
 
-{%- set html_class = 'theme-next ' + theme.scheme %}
-{%- if theme.motion.enable %}
-  {%- set html_class = html_class + ' use-motion' %}
-{%- endif %}
-
-<html class="{{ html_class | lower }}" lang="{{ config.language }}">
+<html lang="{{ config.language }}">
 <head>
   {{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
   {% include '_partials/head/head-unique.swig' %}
   {{- next_inject('head') }}
   <title>{% block title %}{% endblock %}</title>
   <meta name="generator" content="Hexo {{ hexo_env('version') }}">
-  {% include '_third-party/analytics/index.swig' %}
+  {{ partial('_third-party/analytics/index.swig', {}, {cache: theme.cache.enable}) }}
   {{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
 </head>
 
 <body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
-  <div class="container">
+  <div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
     <div class="headband"></div>
 
     <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
       <div class="header-inner">{% include '_partials/header/index.swig' %}</div>
     </header>
 
-    {%- if theme.bookmark.enable %}
-      <a class="book-mark-link book-mark-link-fixed" href="#"></a>
-    {%- endif %}
-
-    {{ partial('_partials/github-banner.swig', {}, {cache: theme.cache.enable}) }}
-
     <main id="main" class="main">
       <div class="main-inner">
         <div class="content-wrap">
@@ -68,18 +57,7 @@
       </div>
     </footer>
 
-    {%- if theme.back2top.enable and not theme.back2top.sidebar %}
-      <div class="back-to-top">
-        <i class="fa fa-arrow-up"></i>
-        <span>0%</span>
-      </div>
-    {%- endif %}
-
-    {%- if theme.reading_progress.enable %}
-      <div class="reading-progress-bar"></div>
-    {%- endif %}
-
-    {{ partial('_partials/share.swig', {}, {cache: theme.cache.enable}) }}
+    {{ partial('_partials/widgets.swig', {}, {cache: theme.cache.enable}) }}
   </div>
 
   {{ partial('_scripts/index.swig', {}, {cache: theme.cache.enable}) }}
@@ -99,7 +77,7 @@
 
   {%- if theme.pjax %}
     </div>
-    {% include '_partials/pjax.swig' %}
+    {{ partial('_scripts/pjax.swig', {}, {cache: theme.cache.enable}) }}
   {%- endif %}
 </body>
 </html>
diff --git a/layout/_macro/sidebar.swig b/layout/_macro/sidebar.swig
@@ -11,50 +11,39 @@
     <div class="sidebar-inner">
 
       {%- set display_toc = theme.toc.enable and display_toc %}
-
-      {%- 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">
-            {{ __('sidebar.toc') }}
-          </li>
-          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
-            {{ __('sidebar.overview') }}
-          </li>
-        </ul>
+      {%- if display_toc %}
+        {%- set next_toc_number = page.toc_number | default(theme.toc.number) %}
+        {%- set next_toc_max_depth = page.toc_max_depth | default(theme.toc.max_depth) | default(6) %}
+        {%- set toc = toc(page.content, { "class": "nav", list_number: next_toc_number, max_depth: next_toc_max_depth }) %}
+        {%- set display_toc = toc.length > 1 and display_toc %}
       {%- endif %}
 
-      <div class="site-overview-wrap sidebar-panel{%- if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{%- endif %}">
-        <div class="site-overview">
-
-          {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}
-
-          {{- next_inject('sidebar') }}
+      <ul class="sidebar-nav">
+        <li class="sidebar-nav-toc" data-target="post-toc-wrap">
+          {{ __('sidebar.toc') }}
+        </li>
+        <li class="sidebar-nav-overview" data-target="site-overview-wrap">
+          {{ __('sidebar.overview') }}
+        </li>
+      </ul>
 
-        </div>
-      </div>
-
-      {%- if display_toc and toc(page.content).length > 1 %}
       <!--noindex-->
-        <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
+      <div class="post-toc-wrap sidebar-panel">
+        {%- if display_toc %}
           <div class="post-toc">
+            <div class="post-toc-content">{{ toc }}</div>
+          </div>
+        {%- endif %}
+      </div>
+      <!--/noindex-->
 
-            {%- set next_toc_number = theme.toc.number %}
-            {%- if page.toc_number !== undefined %}
-              {%- set next_toc_number = page.toc_number %}
-            {%- endif %}
-            {%- set next_toc_max_depth = page.toc_max_depth|default(theme.toc.max_depth)|default(6) %}
-            {%- set toc = toc(page.content, { "class": "nav", list_number: next_toc_number, max_depth: next_toc_max_depth }) %}
-
-            {%- if toc.length <= 1 %}
-              <p class="post-toc-empty">{{ __('post.toc_empty') }}</p>
-            {% else %}
-              <div class="post-toc-content">{{ toc }}</div>
-            {%- endif %}
+      <div class="site-overview-wrap sidebar-panel">
+        <div class="site-overview">
+          {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}
 
-          </div>
+          {{- next_inject('sidebar') }}
         </div>
-      <!--/noindex-->
-      {%- endif %}
+      </div>
 
       {%- if theme.back2top.enable and theme.back2top.sidebar %}
         <div class="back-to-top motion-element">

diff --git a/layout/_third-party/analytics/firestore.swig → layout/_partials/analytics/firestore.swig b/layout/_third-party/analytics/firestore.swig → layout/_partials/analytics/firestore.swig
diff --git a/layout/_partials/analytics/index.swig b/layout/_partials/analytics/index.swig
@@ -1,4 +1,6 @@
 {% include 'busuanzi-counter.swig' %}
 {% include 'cnzz-analytics.swig' %}
+{% include 'firestore.swig' %}
+{% include 'lean-analytics.swig' %}
 {% include 'tencent-analytics.swig' %}
 {% include 'tencent-mta.swig' %}
diff --git a/...third-party/analytics/lean-analytics.swig → ...t/_partials/analytics/lean-analytics.swig b/...third-party/analytics/lean-analytics.swig → ...t/_partials/analytics/lean-analytics.swig
diff --git a/layout/_partials/share.swig b/layout/_partials/share.swig
diff --git a/layout/_partials/github-banner.swig → layout/_partials/widgets.swig b/layout/_partials/github-banner.swig → layout/_partials/widgets.swig
@@ -1,3 +1,15 @@
+{%- if theme.back2top.enable and not theme.back2top.sidebar %}
+  <div class="back-to-top">
+    <i class="fa fa-arrow-up"></i>
+    <span>0%</span>
+  </div>
+{%- endif %}
+{%- if theme.reading_progress.enable %}
+  <div class="reading-progress-bar"></div>
+{%- endif %}
+{%- if theme.bookmark.enable %}
+  <a class="book-mark-link book-mark-link-fixed" href="#"></a>
+{%- endif %}
 {%- if theme.github_banner.enable %}
   {%- set github_URL = theme.github_banner.permalink %}
   {%- set github_title = theme.github_banner.title %}
@@ -6,3 +18,8 @@
 
   {{ next_url(github_URL, github_image, {class: 'github-corner', title: github_title, "aria-label": github_title}) }}
 {%- endif %}
+{%- if theme.add_this_id %}
+  <div class="addthis_inline_share_toolbox">
+    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id }}" async="async"></script>
+  </div>
+{%- endif %}
diff --git a/layout/_scripts/pages/post-details.swig b/layout/_scripts/pages/post-details.swig
@@ -1 +1 @@
-{{- next_js('scrollspy.js', 'post-details.js') }}
+{{- next_js('post-details.js') }}
diff --git a/layout/_partials/pjax.swig → layout/_scripts/pjax.swig b/layout/_partials/pjax.swig → layout/_scripts/pjax.swig
@@ -4,19 +4,13 @@ var pjax = new Pjax({
     'head title',
     '#page-configurations',
     '.content-wrap',
-    '.sidebar-inner',
+    '.post-toc-wrap',
     '#pjax'
   ],
-  switches: {
-    '.sidebar-inner': Pjax.switches.innerHTML
-  },
   analytics: false,
   cacheBust: false,
   scrollTo: !CONFIG.bookmark.enable
 });
-window.addEventListener('pjax:send', () => {
-  $('.sidebar-inner').stop().fadeTo('fast', 0);
-});
 window.addEventListener('pjax:success', () => {
   document.querySelectorAll('script[pjax], script#page-configurations, #pjax script').forEach(element => {
     $(element).parent().append($(element).remove());
@@ -28,8 +22,6 @@ window.addEventListener('pjax:success', () => {
       .add(NexT.motion.middleWares.postList)
       .bootstrap();
   }
-  $('.sidebar-inner .motion-element').css('opacity', 1);
-  $('.sidebar-inner').fadeTo('fast', 1);
   NexT.utils.updateSidebarPosition();
 });
 </script>
diff --git a/layout/_third-party/analytics/analytics-with-jquery.swig b/layout/_third-party/analytics/analytics-with-jquery.swig
diff --git a/layout/_third-party/index.swig b/layout/_third-party/index.swig
@@ -1,6 +1,5 @@
 {% include 'baidu-push.swig' %}
 
-{% include 'analytics/analytics-with-jquery.swig' %}
 {% include 'facebook-sdk.swig' %}
 {% include 'rating.swig' %}
 

diff --git a/layout/_third-party/quicklink.swig b/layout/_third-party/quicklink.swig
@@ -12,7 +12,7 @@
       {%- set loadQL = true %}
     {%- endif %}
   {%- endif %}
-  
+
   {%- if loadQL or (page.quicklink or post.quicklink) %}
     <script src="{{ quicklink_uri }}"></script>
     <script>

diff --git a/source/css/_common/components/sidebar/sidebar-toc.styl b/source/css/_common/components/sidebar/sidebar-toc.styl
@@ -1,15 +1,9 @@
-.post-toc-empty {
-  color: $grey-dim;
-  font-size: $font-size-small;
-}
-
 .post-toc-wrap {
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .post-toc {
-  overflow: auto;
-
   ol {
     font-size: $font-size-small;
     list-style: none;

diff --git a/source/css/_common/components/sidebar/sidebar.styl b/source/css/_common/components/sidebar/sidebar.styl
@@ -33,10 +33,6 @@
 }
 
 .site-overview-wrap {
-  overflow: hidden;
-}
-
-.site-overview {
   overflow-x: hidden;
   overflow-y: auto;
 }

diff --git a/source/css/_schemes/Muse/sidebar/_sidebar.styl b/source/css/_schemes/Muse/sidebar/_sidebar.styl
@@ -1,15 +1,19 @@
 if (hexo-config('sidebar.position') == 'right') {
   .sidebar {
-    right: 0;
     left: auto;
+    right: 0;
   }
 
   .sidebar-toggle, .back-to-top {
-    right: $b2t-position-right;
     left: auto;
+    right: $b2t-position-right;
 
     +tablet-mobile() {
       right: $b2t-position-right-mobile;
     }
   }
+
+  .book-mark-link {
+    left: $b2t-position-right;
+  }
 }
diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl
@@ -121,4 +121,13 @@ if (hexo-config('sidebar.position') == 'right') {
     padding-left: 0;
     padding-right: 260px;
   }
+} else {
+  .back-to-top {
+    left: auto;
+    right: $b2t-position-right;
+
+    +tablet-mobile() {
+      right: $b2t-position-right-mobile;
+    }
+  }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{{- next_js('scrollspy.js', 'post-details.js') }}
		{{- next_js('post-details.js') }}