Typecho实现PJAX无刷新访问

  • 在服务器中新建pjax.js文件，用于操作 PJAX 组件。内容暂时留空。

  • 打开网站的footer.php文件， 在文件底部 body 的前面添加下面代码：

    1
    2
    <script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
    <script src="https://tuziang.com/usr/themes/Fantasy/static/pjax.js"></script>

  • 其中第二行需要替换成你自己的路径。

  • selectors中是每次刷新都要改变的元素。

  • 现在开始填写刚才新建的pjax.js文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var pjax = new Pjax({
      // 在页面进行 PJAX 时需要被替换的元素或容器，一条一个 CSS 选择器，数组形式
      selectors: [
        "title",
        "meta[name=description]",
        "main"
      ],
      cacheBust: false
    })

  • 动画一

  • 使用nprogress的加载动画: http://ricostacruz.com/nprogress/

  • 同样在footer.php底部添加两行代码

    1
    2
    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
    <link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" type="text/css">

    接着修改刚才我们自己新建的pjax.js文件，在文件底部添加下面两个函数

    1
    2
    3
    4
    5
    6
    7
    document.addEventListener('pjax:send', function (){
        NProgress.start();
    });

    document.addEventListener('pjax:complete', function (){
        NProgress.done(); ;
    });

  • 动画二

  • 这个动画来自于https://blog.dyboy.cn/program/56.html[利用Pjax实现网页无刷新加载的详细方法 - DYBOY - 专注程序开发与信息安全](https://blog.dyboy.cn/program/56.html “利用Pjax实现网页无刷新加载的详细方法 - DYBOY - 专注程序开发与信息安全”)
    在header.php文件中的 body 前面添加这行代码：

    1
    2
    <!-- pjax 动画 -->
    <div class="loading"> <div id="loader"></div></div>

  • 接着去css文件中，添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /*pjax 动画*/
    .loading{display:none}
    .loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:999999;background-color:rgba(250,250,250,.9)}
    .loading img{width: 280px;height:210px;position: relative;top: 45%;left: 50%;margin-left:-140px;margin-top: -105px;}
    #loader{display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ff5a5a; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;}
    #loader:before{content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #5af33f; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite;}
    #loader:after{content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #6dc9ff; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
    @-webkit-keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
    @keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}

  • 最后修改刚才我们自己新建的pjax.js文件：

    1
    2
    3
    4
    5
    6
    7
    document.addEventListener('pjax:send', function (){
         $(".loading").css("display", "block");
    });

    document.addEventListener('pjax:complete', function (){
        $(".loading").css("display", "none");
    });