diff --git a/layout/common/scripts.jsx b/layout/common/scripts.jsx
index 42fe538e3..a2bd93aa7 100644
--- a/layout/common/scripts.jsx
+++ b/layout/common/scripts.jsx
@@ -35,9 +35,10 @@ module.exports = class extends Component {
             {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/layout/plugin/pjax.jsx b/layout/plugin/pjax.jsx
new file mode 100644
index 000000000..5f81a12f8
--- /dev/null
+++ b/layout/plugin/pjax.jsx
@@ -0,0 +1,23 @@
+const { Component, Fragment } = require('inferno');
+const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
+
+class Pjax extends Component {
+    render() {
+        const { helper } = this.props;
+        const { cdn } = helper;
+
+        return <Fragment>
+            <script src={cdn('pjax', '0.2.8', 'min/pjax.min.js')}></script>
+            <script src={this.props.jsUrl}></script>
+        </Fragment>;
+    }
+}
+
+Pjax.Cacheable = cacheComponent(Pjax, 'plugin.Pjax', props => {
+    const { helper } = props;
+    return {
+        jsUrl: helper.url_for('/js/pjax.js')
+    };
+});
+
+module.exports = Pjax;
diff --git a/source/js/pjax.js b/source/js/pjax.js
new file mode 100644
index 000000000..f622773f7
--- /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());