Butterfly的Pjax适配方案

参考教程

集成 Pjax 实现网站无刷新加载

https://liuyib.github.io/2019/09/24/use-pjax-to-your-site/

优化步骤

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

博主目前使用的是Butterfly主题，而最新版Butterfly主题已经将该教程方案集成在主题中。只需在主题配置文件中搜索pjax，将其enable参数设置为true即可开启。

重载第三方js

• Butterfly_v3.0.0-3.3.0
• Butterfly_v3.4.0

$('script[data-pjax]').each(function () {
  $(this).parent().append($(this).remove())
})

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)
})

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>

如果不是在主题配置文件的inject中引入，而是通过在特定页面写入,可能不方便在标签处直接添加data-pjax属性,参考教程中有给出解决方案。 可以修改[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug的内容。给他多加一个选择器。（实质其实就是第4步的变种，可以跳过第3步直接参考第4步）

新版方案

在butterfly主题中，有按照第4步中所述，在pjax选择器中添加了.js-pjax的类名，也就是说，只要是在类名为js-pjax元素包裹下的内容就会执行局部重载。

网页写法

pug写法

markdown写法,同html写法，此处加上标签是为了告诉渲染引擎这段不需要渲染。

集成在插件中的js

可以考虑使用最新版Butterfly主题自带的pjax屏蔽设置(不推荐)。

但是这样子一来，如果有添加Aplayer的全局音乐或其他全局配置的话，会在切换到屏蔽了Pjax的页面时被强制刷新，不符合流畅的用户体验。那就只能修改源码了。

那么给它们添加pjax,就需要在pjax选择器中添加这几个id，找到[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug中的pjaxSelectors。添加需要局部刷新的标签类。写法类似css选择器。

pjax、pwa、gulp堪称BUG御三家，请在使用前做好心理准备。啊咧咧，温馨提示放最后会不会有点戏耍读者的意思。