1. 修改.php文件
  • 进入Waxy主题根目录,找到header.phpfooter.php,进行如下修改

修改header.php

<body class="home-template">
    <div id="pjax-container">

修改footer.php

   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
    <script Type="text/javascript">
     (function($){
    var MyApp = {
        initPjax: function(){
            var self = this;
            // 初始化
            $(document).pjax('a[target!="_blank"]', '#pjax-container', {
                fragment: "#pjax-container",
                timeout: 5000
            });
            // pjax请求开始
            $(document).on('pjax:start', function () {

            });
            // PJAX 渲染结束时
            $(document).on('pjax:end', function() {
                comments();
                self.siteBootUp();
                //在「局部刷新」时才会运行
                console.log("局部执行");
                if (typeof Prism !== 'undefined') {
                    var pres = document.getElementsByTagName('pre');
                    for (var i = 0; i < pres.length; i++){
                        if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className = 'line-numbers';}
                Prism.highlightAll(true,null);}
            });
            self.siteBootUp();
        },
        /*
        * Things to be execute when normal page load
        * and pjax page load.
        */
        siteBootUp: function(){
            //「局部刷新」和「页面刷新」都需要运行的代码
            console.log("全局执行");
        }
    };
    window.MyApp = MyApp;
})(jQuery);

//「页面刷新」事件触发运行
$(document).ready(function() {
    MyApp.initPjax();
});
    </script>
  • 成功,可以享受全站无刷新重载了。

  1. 重点来了,目前已知bug:
    YoDuPlayer点击无反应;
    部分图片会以缩略图显示,即使后台关了懒加载也一样。