pjax 是如何工作的？ {#pjax-是如何工作的？}

pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。

同时支持了缓存和本地存储，下次访问的时候直接读取本地数据，无需在次访问。

并且展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。

访问地址：pjax

使用方法 {#使用方法}

Pjax能够实现页面的局部刷新而非整体重载资源，在一定程度上能够减少网站反复加载重复资源，从而优化访问体验。

博主目前使用的是Butterfly主题，而最新版Butterfly主题已经将该教程方案集成在主题中。只需在主题配置文件中搜索pjax，将其enable参数设置为true即可开启。
重载第三方js
在魔改主题时，肯定会不可避免的添加一系列第三方js，此时就会遇到切换页面后，由于通过 Pjax切换的页面并没有完全刷新，浏览器不会将网页从头执行一遍，因此有些JS将不会生效。
得益于Butterfly已经将解决方案集成在[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug文件下。

|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 | document.querySelectorAll('script[data-pjax]').forEach(item => { const newScript = document.createElement('script') const content = item.text || item.textContent || item.innerHTML || "" Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value)) newScript.appendChild(document.createTextNode(content)) item.parentNode.replaceChild(newScript, item) }) |

这个函数会对在script标签中添加了data-pjax属性的的js，在页面切换后执行重载，达到局部刷新的效果。
所以我们要做的事情十分简单，给这些js引入的位置添加data-pjax属性即可。

|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | inject: head: # 首页电子钟 - <link rel="stylesheet" href="/clock/css/clock.css"/> bottom: # 首页电子钟 - <script src="/clock/js/vue.min.js"></script> - - <script src="/clock/js/clock.js"></script> + - <script data-pjax src="/clock/js/clock.js"></script> |