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」版。查看和发表评论请点击:完整版 »