April 28
Typecho如何实现pjax
当前网上关于typecho实现pjax的文章层出不穷,这里出一版简单版本。当前主题与pjax存在一些冲突,正在调整中,相信后续就可以用上pjax了。
1、引入js并配置相关参数
在footer.php的</body>
前面添加
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
container: '#container',
fragment: '#container',
timeout: 8000
}).on('pjax:send',
function() {
NProgress.start();//加载动画效果开始
}).on('pjax:complete',
function() {
loadMeting(); //Meting播放器
imageeffct();//灯箱函数重载
NProgress.done();//加载动画效果结束
setupContents();//某个函数重载
lue();//lue函数重载
reHighlightCodeBlock();//代码高亮函数重载
Prism.highlightAll(); //Prism代码高亮
hljs.initHighlightingOnLoad(); //highlight代码高亮
});
</script>
2、添加内容变换容器
在header.php的<body>
之后添加
<div id="container">
在footer.php的<?php $this->footer(); ?>
之前添加
</div>
说明:Typecho的插件是把需要添加在页面的HTML代码插入到这里:<?php $this->footer(); ?>,
所以为了不让音乐播放器被添加到#container的div中,
我将 <?php $this->footer(); ?>
放在了id为container的div之后。
作者:https://devoted2.site/748.html
:D 少女祈祷中...