PJAX

_config.yml

@@ -539,6 +539,10 @@ math:
       copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
       copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css
 
+# Easily enable fast Ajax navigation on your website.
+# Dependencies: https://github.com/theme-next/theme-next-pjax
+pjax: false
+
 # Fancybox. There is support for old version 2 and new version 3.
 # Choose only one variant, do not need to install both.
 # To install 2.x: https://github.com/theme-next/theme-next-fancybox
@@ -1012,6 +1016,12 @@ vendors:
   # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
   fontawesome:
 
+  # Internal version: 0.2.8
+  # See: https://github.com/MoOx/pjax
+  # Example:
+  # pjax: //cdn.jsdelivr.net/npm/pjax@2/pjax.min.js
+  pjax:
+
   # Internal version: 2.1.5 & 3.5.7
   # See: https://fancyapps.com/fancybox
   # Example:

layout/_layout.swig

@@ -33,7 +33,7 @@
     {%- set container_class = container_class + ' sidebar-position-' + theme.sidebar.position %}
   {%- endif %}
 
-  <div class="{{ container_class }} {% block page_class %}{% endblock %}">
+  <div class="{{ container_class }}">
     <div class="headband"></div>
 
     <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
@@ -48,7 +48,7 @@
           {%- if theme.scheme === 'Pisces' || theme.scheme === 'Gemini' %}
             {% include '_partials/header/sub-menu.swig' %}
           {%- endif %}
-          <div id="content" class="content">
+          <div id="content" class="content {% block page_class %}{% endblock %}">
             {% block content %}{% endblock %}
           </div>
           {% include '_partials/comments.swig' %}
@@ -62,7 +62,13 @@
     <footer id="footer" class="footer">
       <div class="footer-inner">
         {{ partial('_partials/footer.swig', {}, {cache: theme.cache.enable}) }}
+        {%- if theme.pjax %}
+          <div id="reboot-analytics">
+        {%- endif %}
         {% include '_partials/analytics/index.swig' %}
+        {%- if theme.pjax %}
+          </div>
+        {%- endif %}
         {% block footer %}{% endblock %}
       </div>
     </footer>
@@ -92,11 +98,37 @@
   {% include '_scripts/exturl.swig' %}
   {% include '_scripts/three.swig' %}
 
+  {%- if theme.pjax %}
+    <div id="reboot-services">
+  {%- endif %}
   {% include '_third-party/index.swig' %}
 
   {%- for inject_item in theme.injects.bodyEnd %}
     {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
   {%- endfor %}
 
+  {%- if theme.pjax %}
+    </div>
+    <script>
+    var pjax = new Pjax({
+      selectors: [
+        'title',
+        'meta[name=description]',
+        '#main'
+      ]
+    });
+    $(document).on('pjax:success', function() {
+      $('#reboot-analytics script').remove().appendTo('#reboot-analytics');
+      $('#reboot-services script').remove().appendTo('#reboot-services');
+      $(document).trigger('ready');
+      // Define Motion Sequence & Bootstrap Motion.
+      CONFIG.motion.enable && NexT.motion.integrator
+        .init()
+        .add(NexT.motion.middleWares.postList)
+        .add(NexT.motion.middleWares.sidebar)
+        .bootstrap();
+    });
+    </script>
+  {%- endif %}
 </body>
 </html>

layout/_scripts/vendors.swig

@@ -2,6 +2,10 @@
 {%- set js_defer_vendors = {} %}
 {%- set js_vendors.jquery = 'jquery/index.js?v=3.4.1' %}
 
+{%- if theme.pjax %}
+  {%- set js_vendors.pjax = 'pjax/pjax.min.js?v=0.2.8' %}
+{%- endif %}
+
 {%- if theme.fancybox %}
   {%- set js_vendors.fancybox = 'fancybox/source/jquery.fancybox.pack.js' %}
 {%- endif %}

source/js/algolia-search.js

@@ -1,6 +1,6 @@
 /* global instantsearch, CONFIG */
 
-$(document).ready(function() {
+$(document).on('ready', function() {
   var algoliaSettings = CONFIG.algolia;
   var isAlgoliaSettingsValid = algoliaSettings.applicationID
                             && algoliaSettings.apiKey

source/js/local-search.js

@@ -2,7 +2,7 @@
 
 'use strict';
 
-$(document).ready(function() {
+$(document).on('ready', function() {
   // Popup Window
   var isfetched = false;
   var datas;