Mr.Tlyer’s Blog

Typecho博客实现pjax

改造过程
pjax是一个jQuery插件，它使用ajax和pushState通过真正的永久链接，页面标题和后退按钮提供快速浏览体验。 pjax的工作方式是通过ajax从服务器获取HTML，然后用加载的HTML替换页面上容器元素的内容。 然后，它使用pushState更新浏览器中的当前URL。

关闭反垃圾保护
替换Security.php 103行

$params['_'] = $this->getToken(preg_replace('/\?_pjax=#main/', '', $this->request->getRequestUrl()));

修改indxe.php文件
16行：

<div class="container post-page main-content mb-0">

修改为：

<div id="main" class="container post-page main-content mb-0">

修改post.php文件

17行：

<div class="container post-page main-content mb-0">

修改为：

<div id="main" class="container post-page main-content mb-0">

修改page-archive.php文件

14行：

<div class="container post-page main-content mb-0">

修改为：

<div id="main" class="container post-page main-content mb-0">

修改archive.php文件

8行：

<div class="container post-page main-content mb-0">

修改为：

<div id="main" class="container post-page main-content mb-0">

修改page-data.php文件

14行：

<div class="container post-page main-content mb-0">

修改为：

<div id="main" class="container post-page main-content mb-0">

修改page.php文件

9行：

<div class="container post-page main-content mb-0">

修改为：

<div id="main" class="container post-page main-content mb-0">

修改page-links.php文件

37行：

<div class="container post-page main-content mb-0">

修改为：

<div id="main" class="container post-page main-content mb-0">

修改page-tag.php文件

14行：

<div class="container post-page main-content mb-0">

修改为：

<div id="main" class="container post-page main-content mb-0">

修改sidebar.php文件

<div id="main" class="col-md-12 col-lg-4 col-sm-12 sidebar">

外观新增head 区域输出的 HTML

<script type="text/javascript" src="https://ntnas.top:82/typecho/usr/plugins/jquery.min.js"></script>

<script type="text/javascript" src="https://ntnas.top:82/typecho/usr/plugins/jquery.pjax.min.js"></script>

外观新增CSS

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

外观添加body 底部输出的 HTML：

<script type="text/javascript" src="https://ntnas.top:82/typecho/usr/plugins/codecopy.js"></script>

<script type="text/javascript" src="https://ntnas.top:82/typecho/usr/plugins/nprogress.js"></script>

<script type="text/javascript" src="https://ntnas.top:82/typecho/usr/plugins/jquery.lazyload.min.js"></script>

<script type="text/javascript">

  $("img.lazyload").lazyload();

</script>

<script>

function loadscript(url, callback){

    var script = document.createElement("script")

    script.type = "text/javascript";

    if (script.readyState) {

        script.onreadystatechange = function () {

            if (script.readyState == "loaded" || script.readyState == "complete") {

                script.onreadystatechange = null;

                callback();

            }

        };

    } else {

        script.onload = function () {

            callback();

        };

    }

    script.src = url;

    document.getElementsByTagName("head")[0].appendChild(script);

}

$(document).pjax('a[href^="https://ntnas.top:82/typecho/"]:not(a[target="_blank"], a[no-pjax])', {

  container: '#main',

  fragment: '#main',

  timeout: 6000

})

$(document).on('pjax:start',function(){NProgress.start();});

$(document).on('pjax:end',function()

{loadscript("https://ntnas.top:82/typecho/usr/plugins/highlight.js", function () {

    hljs.initHighlighting();

});//高亮代码回调

$.getScript("https://ntnas.top:82/typecho/usr/plugins/codecopy.js");//高亮代码复制回调

$("img.lazyload").lazyload();//lazyload回调函数

loadDPlayer();//Dplayer回调

NProgress.done();});

</script>

参考方法链接：

https://www.ihewro.com/archives/354/
https://zizdog.com/
https://github.com/rstacruz/nprogress
https://moeshin.com/archives/typecho_pjax_comments.html
https://llf0703.com/p/pjax.html
https://github.com/defunkt/jquery-pjax

PS:产生的BUG：分页浏览、emoji失效，还有待改进。

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »