diff --git a/layout/common/scripts.jsx b/layout/common/scripts.jsx
index 42fe538e3..0bf1a45ac 100644
--- a/layout/common/scripts.jsx
+++ b/layout/common/scripts.jsx
@@ -1,6 +1,7 @@
 const { Component, Fragment } = require('inferno');
 const { toMomentLocale } = require('hexo/dist/plugins/helper/date');
 const Plugins = require('./plugins');
+const pjaxMinJsPath = require.resolve('pjax/pjax.min.js');
 
 module.exports = class extends Component {
     render() {
@@ -32,12 +33,15 @@ module.exports = class extends Component {
         return <Fragment>
             <script src={cdn('jquery', '3.3.1', 'dist/jquery.min.js')}></script>
             <script src={cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')}></script>
+            {/* <script src={cdn('pjax', '0.2.8', 'min/pjax.min.js')}></script> */}
+            <script src={pjaxMinJsPath}></script>
             {clipboard && <script src={cdn('clipboard', '2.0.4', 'dist/clipboard.min.js')} defer></script>}
             <script dangerouslySetInnerHTML={{ __html: `moment.locale("${language}");` }}></script>
             <script dangerouslySetInnerHTML={{ __html: embeddedConfig }}></script>
-            <script src={url_for('/js/column.js')}></script>
+            <script data-pjax src={url_for('/js/column.js')}></script>
             <Plugins site={site} config={config} page={page} helper={helper} head={false} />
-            <script src={url_for('/js/main.js')} defer></script>
+            <script data-pjax src={url_for('/js/main.js')} defer></script>
+            <script src={url_for('/js/pjax.js')}></script>
         </Fragment>;
     }
 };
diff --git a/layout/plugin/back_to_top.jsx b/layout/plugin/back_to_top.jsx
index c3b6e8d71..4581815cc 100644
--- a/layout/plugin/back_to_top.jsx
+++ b/layout/plugin/back_to_top.jsx
@@ -9,7 +9,7 @@ class BackToTop extends Component {
             <a id="back-to-top" title={title} href="javascript:;">
                 <i class="fas fa-chevron-up"></i>
             </a>
-            <script src={jsUrl} defer></script>
+            <script data-pjax src={jsUrl} defer></script>
         </Fragment>;
 
     }
diff --git a/package.json b/package.json
index c03923ff0..b999c1600 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "inferno": "^8.2.3",
     "inferno-create-element": "^8.2.3",
     "moment": "^2.30.1",
+    "pjax": "^0.2.8",
     "semver": "^7.5.4"
   }
 }
diff --git a/source/js/pjax.js b/source/js/pjax.js
new file mode 100644
index 000000000..2fec27d50
--- /dev/null
+++ b/source/js/pjax.js
@@ -0,0 +1,36 @@
+// eslint-disable-next-line no-unused-vars
+let pjax;
+
+function initPjax() {
+    try {
+        // eslint-disable-next-line no-undef
+        pjax = new Pjax({
+            selectors: [
+                'head title',
+                '.columns',
+                '.navbar-start',
+                '.navbar-end',
+                '.searchbox',
+                '#back-to-top',
+                '[data-pjax]',
+                '.pjax-reload'
+            ]
+        });
+    } catch (e) {
+        console.warn('PJAX error: ' + e);
+    }
+}
+
+// // Listen for start of Pjax
+// document.addEventListener('pjax:send', function() {
+//     return;
+//     // TODO pace start loading animation
+// })
+
+// // Listen for completion of Pjax
+// document.addEventListener('pjax:complete', function() {
+//     return;
+//     // TODO pace stop loading animation
+// })
+
+window.addEventListener('DOMContentLoaded', () => initPjax());
\ No newline at end of file