学习
实践
活动
专区
工具
TVP
写文章
专栏首页Akilarの糖果屋Butterfly的Pjax适配方案

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选择器。

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

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://akilar.top复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Sidebar Artitalk

    本项目是对冰卡诺老师写的教程:基于Butterfly主题的侧边栏说说进行重构,新增pjax适配和artitalk_v3.2.1及以上版本的适配。后续也会继续在本...

    Akilar
  • Add Blog Animation -- Wowjs

    新建[Blogroot]\themes\butterfly\source\js\wow_init.js,配置特性动画的默认项。

    Akilar
  • Categories Magnet

    本项目是对冰卡诺老师写的教程:基于Butterfly主题的分类磁贴2.0版进行重构,去除了所有繁杂的引入js的过程,所以也就无需引入jquery和vue,也完美...

    Akilar
  • Slider Bar

    本项目是对冰卡诺老师写的教程:基于Butterfly主题的轮播手动置顶文章进行重构,精简了部分样式。适配pjax。

    Akilar
  • Butterfly主题的PWA实现方案

    PWA的全称是Progressive Web Apps,译为渐进式网络应用程序。装配了PWA以后,用户可以将网站作为WEB APP安装到自己的设备上,以原生应用...

    Akilar
  • Botui Talk Robot

    botui.js 是一个简单的聊天机器人框架,使用它可以完成简易的脚本对话式交流。缺点是只能在自己设定的逻辑内进行有限问答,而不是像真正的 AI 那样智能会话。...

    Akilar
  • SAO UI Plan -- SAO Utils Web 1.0

    由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

    Akilar
  • Butterfly comment board beautify

    我一想,对吼,我咋个就没想到呢,传统的hexo博客大多采用在文末放置评论区的方式,这样如果是在阅读长文的时候,突然有个问题了,然后想在评论区提问或者在评论区找答...

    Akilar
  • Gitcalendar

    由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

    Akilar
  • Hexo用wowjs给博客添加动画效果

    本篇仅使用butterfly_v3.6.0 +的主题版本,如果是在这之前的版本,请移步下方教程链接。

    花猪
  • Bilibili Dynamic Banner

    由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。本帖基于Butterfly_v3.5.1版本进行配置,...

    Akilar
  • SAO UI Plan -- SAO Utils WEB 2.0

    由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

    Akilar
  • Hexo博客静态资源加速

    jsdelivr是一个免费的CDN服务,可以利用它配合github来为页面静态资源提供加速,有效提升资源加载速度。

    Akilar
  • Hexo-Butterfly主题魔改

    本文章首发于语雀! 通过各种高科技功能同步到Hajeekn 的博客 由于每个人的博客目录都不相同,这里博客目录使用%brt%代替 本文章除 Pace wowjs...

    Hajeekn
  • 快速将Butterfly主题的CDN从jsDelivr切换至自建反向代理源

    最新版的Butterfly取消了原来设置在_config.yml里的默认CDN,导致不能快速替换掉现在极不稳定的jsDelivr CDN。本文的默认Butter...

    pai233
  • 源计划-方舟:首页轮播图

    本篇讨论的轮播图的配置项可能与hexo-butterfly-swiper插件的配置项有冲突,如果您曾经安装过该插件或者该插件的衍生插件(例如anzhiyu、an...

    Akilar
  • Hexo增添水波荡漾效果

    在\themes\butterfly\source\js目录下创建一个ripples.js文件,并将如下代码写入该文件

    花猪
  • Footer Timer

    Butterfly主题v3.4.0及其以后版本基本已经实现完全去jquery化,而本帖有使用到jquery,不想再次引入js的可以考虑使用站内的原生JS计时器。

    Akilar
  • 首页置顶公告栏轮播

    在\themes\butterfly\layout\includes\page目录下新建notice.pug模板:

    花猪

扫码关注腾讯云开发者

领取腾讯云代金券