PJAX support

_config.yml

@@ -538,6 +538,11 @@ 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
+# For moreinformation: https://github.com/MoOx/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
@@ -1020,6 +1025,11 @@ vendors:
   # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
   fontawesome:
 
+  # Internal version: 0.2.8
+  # Example:
+  # pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
+  pjax:
+
   # Internal version: 2.1.5 & 3.5.7
   # Example:
   # fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js

layout/_layout.swig

@@ -9,6 +9,10 @@
 {%- set author = __('author') !== 'author' && __('author') || config.author %}
 {%- set description = __('description') !== 'description' && __('description') || config.description %}
 
+{%- if theme.pjax %}
+  {%- set pjax = ' pjax' %}
+{%- endif %}
+
 {%- set html_class = 'theme-next ' + theme.scheme %}
 {%- if theme.motion.enable %}
   {%- set html_class = html_class + ' use-motion' %}
@@ -33,7 +37,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 +52,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' %}
@@ -85,17 +89,29 @@
   {%- set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
   {% include scheme_script %}
 
-  {% block script_extra %}{% endblock %}
-
   {% include '_scripts/next-boot.swig' %}
   {% include '_scripts/exturl.swig' %}
   {% include '_scripts/three.swig' %}
 
   {% include '_third-party/index.swig' %}
 
+  {%- if theme.pjax %}
+    <div id="pjax">
+  {%- endif %}
+
+  {% include '_third-party/math/index.swig' %}
+  {% include '_third-party/quicklink.swig' %}
+  {% include '_third-party/vkontakte-api.swig' %}
+
+  {% block script_extra %}{% endblock %}
+
   {%- for inject_item in theme.injects.bodyEnd %}
     {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
   {%- endfor %}
 
+  {%- if theme.pjax %}
+    </div>
+    {% include '_partials/pjax.swig' %}
+  {%- endif %}
 </body>
 </html>

layout/_macro/menu/menu-item.swig

@@ -5,7 +5,7 @@
   {%- if itemURL.indexOf('http') != 0 %}
     {%- set itemURL = itemURL | replace('//', '/', 'g') %}
   {%- endif %}
-  <li class="menu-item menu-item-{{ itemName | replace(' ', '-', 'g') }}{{ item_active(itemURL, 'menu-item-active') }}">
+  <li class="menu-item menu-item-{{ itemName | replace(' ', '-', 'g') }}">
 
     {%- set menuText = __('menu.' + name) | replace('menu.', '') %}
     {%- if theme.menu_settings.icons %}

layout/_partials/analytics/busuanzi-counter.swig

@@ -1,6 +1,6 @@
 {%- if theme.busuanzi_count.enable %}
 <div class="busuanzi-count">
-  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
+  <script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 
   {%- if theme.busuanzi_count.total_visitors %}
     <span class="post-meta-item-icon">

layout/_partials/analytics/cnzz-analytics.swig

@@ -1,5 +1,5 @@
 {%- if theme.cnzz_siteid %}
   <div style="display: none;">
-    <script src="//s95.cnzz.com/z_stat.php?id={{ theme.cnzz_siteid }}&web_id={{ theme.cnzz_siteid }}"></script>
+    <script{{ pjax }} src="//s95.cnzz.com/z_stat.php?id={{ theme.cnzz_siteid }}&web_id={{ theme.cnzz_siteid }}"></script>
   </div>
 {%- endif %}

layout/_partials/analytics/tencent-analytics.swig

@@ -1,5 +1,5 @@
 {%- if theme.tencent_analytics %}
-  <script>
+  <script{{ pjax }}>
     (function() {
       var hm = document.createElement("script");
       hm.src = "//tajs.qq.com/stats?sId={{ theme.tencent_analytics }}";

layout/_partials/analytics/tencent-mta.swig

@@ -1,5 +1,5 @@
 {%- if theme.tencent_mta %}
-  <script>
+  <script{{ pjax }}>
     var _mtac = {};
     (function() {
       var mta = document.createElement("script");

layout/_partials/head/head-unique.swig

@@ -14,8 +14,13 @@
 {%- endif %}
 
 {# Exports some front-matter variables to Front-End #}
-<script id="page.configurations">
+<script id="page-configurations">
+  // https://hexo.io/docs/variables.html
   CONFIG.page = {
     sidebar: {{ page.sidebar | json_encode }},
+    isHome: {{ is_home() }},
+    isPost: {{ is_post() }},
+    isPage: {{ is_page() }},
+    isArchive: {{ is_archive() }}
   };
 </script>

layout/_partials/head/head.swig

@@ -93,10 +93,10 @@
 {%- endif %}
 
 {# Export some HEXO Configurations to Front-End #}
-<script id="hexo.configurations">
+<script id="hexo-configurations">
   var NexT = window.NexT || {};
   var CONFIG = {
-    root: '{{ theme.root }}',
+    root: '{{ config.root }}',
     scheme: '{{ theme.scheme }}',
     version: '{{ version }}',
     sidebar: {{ theme.sidebar | json_encode }},
@@ -115,10 +115,7 @@
       labels: {{ theme.algolia_search.labels | json_encode }}
     },
     localsearch: {{ theme.local_search | json_encode }},
-    search: {
-      root: '{{ config.root }}',
-      path: '{{ config.search.path }}'
-    },
+    path: '{{ config.search.path }}',
     tabs: {{ theme.tabs.enable }},
     motion: {{ theme.motion | json_encode }},
     translation: {

layout/_partials/pjax.swig

@@ -0,0 +1,36 @@
+<script>
+var pjax = new Pjax({
+  selectors: [
+    'title',
+    '#page-configurations',
+    '.content-wrap',
+    '.sidebar-inner',
+    '#pjax'
+  ],
+  switches: {
+    '.sidebar-inner': Pjax.switches.innerHTML
+  },
+  analytics: false,
+  cacheBust: false,
+  scrollTo: !CONFIG.save_scroll
+});
+$(document).on('pjax:send', function() {
+  $('.sidebar-inner').stop().fadeTo('fast', 0);
+  CONFIG.save_scroll && clearInterval(NexT.utils.saveScrollTimer);
+});
+$(document).on('pjax:success', function() {
+  $('script[pjax], script#page-configurations, #pjax script').each(function(i, o) {
+    $(o).parent().append($(o).remove());
+  });
+  // Define Motion Sequence & Bootstrap Motion.
+  if (CONFIG.motion.enable) {
+    NexT.motion.integrator
+      .init()
+      .add(NexT.motion.middleWares.postList)
+      .bootstrap();
+  }
+  $('.sidebar-inner .motion-element').css('opacity', 1);
+  $('.sidebar-inner').fadeTo('fast', 1);
+  NexT.utils.updateSidebarPosition();
+});
+</script>