[Pjax] Typecho局部加载网页 - 霜冷的秘密基地

[Pjax] Typecho局部加载网页

日常琐碎 0 评

本站于11月20日添加pjax局部加载功能,记录实现过程

介绍

官方介绍:pushState + ajax = pjax 带来最直观的效果是整个网站变成单页应用。这样的效果将会极大的提升用户体验,并且可以减少https的请求的次数和内容。使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax。

实现

footer.php或者header.php文件加入pjax支持库

<script src="https://smilesl.top/uploads/js/jquery.pjax.js"></script>

使用jquery.pjax.js里面的pjax局部加载函数,footer.php文件加入

$(document).pjax(selector, [container], options)

  • selector:给哪些selector绑定pjax事件,一般的为:"a".

    • 当只响应本站的非_blank和标签含no-pjax的url:'a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])'
  • [container] 内容变换容器,是指哪个容器里的内容发生的变换,只刷新其中的内容,如'#pjax-container'
  • options:其他参数,可参照官方文档定制更多功能

    • container 替换的容器的css选择器。填你的替换容器ID即可
    • timeout 超时就会被迫页面就会完全刷新,单位毫秒
    • fragment 这个作为整个pjax框架,必须写上,和[container]一致

js和css失效解决

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

  • 在pjax中上面的函数可以在触发pjax事件时重载function()函数,可以添加入插件函数
  • 或者可以在其里面加入指定css,js

所以我的代码是:

<script type="text/javascript" src="<?php $this->options->themeUrl('js/pjax.js'); ?>"></script>
<script>

// pjax局部加载技术
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
}).on('pjax:complete',
function() {
    //动态加载 CSS 文件,JS 文件
    dynamicLoading.css("<?php $this->options->themeUrl('css/flink.css'); ?>");
    dynamicLoading.css("<?php $this->options->themeUrl('css/codeCss.css'); ?>");
    dynamicLoading.js("<?php $this->options->themeUrl('js/flink.js'); ?>");
    dynamicLoading.js("<?php $this->options->themeUrl('js/prism.js'); ?>");
    dynamicLoading.js("<?php $this->options->themeUrl('js/clipboard.min.js'); ?>");
    dynamicLoading.js("<?php $this->options->themeUrl('js/prism.full.js'); ?>");
    if ($('.ds-thread').length > 0) { if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread'); else $.getScript("https://www.ihewro.com/duoshuo/embedhw4.min.js"); }
});
</script>
Python - 植物大战僵尸辅助程序
快来做第一个评论的人吧~
0:00