Typecho博客引入Pjax无刷新页面的两种方式
使用Pjax可以在不刷新整个页面的情况下加载新的内容，它利用 AJAX（XmlHttpRequest）和 pushState() 来提供网站的交互性和响应速度，从而提升流畅的浏览体验。Pjax和我使用的instant.page类似，都是为了提升用户体验，让页面更顺滑且加快一定的响应速度，两者并不冲突，可以共存。
Typecho中，有很多主题都集成了Pjax无刷新功能，例如迷你日志、handsome主题等。但也有很多主题没有集成这项功能，所以提供两种Pjax部署方式。
Jquery.pjax
传统的Pjax部署方式，应该前后引入Jquery和Pjax库，且版本需要匹配。
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>或者你也可以使用比较稳定的jquery2.1.4和pjax1.9.6版本。主要前后顺序不能出错。
<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {container: '#main',fragment: '#main',timeout: 10000})
</script>这段js部署在 /body 之前。如果需要加载动画，可以访问我提供的参考资料。
Pjax
Pjax是一个独立的 JavaScript 模块，不依赖于像 jQuery 这样的其他库，它完全用原生 JavaScript 编写。并且体积更小，压缩后载入时间会更短。
<script src="//cdn.bosir.cn/js/pjax.min.js"></script>我已经部署到阿里云CDN，有需要的可以直接复制过去。随后引入
<script> var pjax = new Pjax({elements: 'a',selectors: ["#main"],timeout: 10000, push: true, replace: false,maxCacheLength: 20, }); </script>这是根据自己主题修改的，需要更新的部分 #mainbody，如果CSS结构中，没有使用 id 就使用 .mainbody 相反有的话就使用 # 号。
验证方式
以Chrome为例，F12 打开控制台，点击 Network 后，Ctrl+R 刷新，随便点击一个页面，如果出现 xhr 开头的文件，表明成功。 当然更详细的成功部署验证，大家可以自己查阅相关资料。
相关资料:
[1] Gitcode: //gitcode.com/gh_mirrors/pj/pjax?utm_source=artical_gitcode&index=top&type=href
[2] 万维易源: //www.showapi.com/news/article/66d5a0754ddd79f11a002a13
[3] cdnjs: //cdnjs.com/
本文标签「typecho 网站加速 instant.page pjax」
文章使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处。本文最后更新于 2025-01-16 14:03:10 交流邮箱: 9003(at)88.com