Typecho开启全站Pjax
原文地址:Typecho开启全站Pjax
前言
因为上次更新后加入民音乐插件,但是有个问题就是在页面跳转的时候由于页面已经刷新了,所以音乐就不会继续播放了,就想着去引入Pjax来解决这个问题,同时引入pjax后比较直观的改变就是整个网站变成单页应用,在一定程度上会提高用户体验且已经加载过的表态资源不会再重复加载,站点的响应速度会有进一步的改善
什么是Pjax?
pushState + ajax = pjax,利用 HTML5
的 pushState()
和 replaceState()
新特性和 ajax
结合实现。pushState()
和 replaceState()
用来操作 State(状态)对象,即可添加和修改历史记录,进而更新 url 和提供前进、后退操作 ajax 实现数据的异步加载进而局部刷新,下面是官方的介绍
Pjax可以利用github上面的一个开源项目defunkt/jquery-pjax来快速帮我们实现
使用
js文件引入
前提是引入jquery,然后引入jquery-pjax,我这里是通过CDN的方式去引入,大家也可以下载下来后上传到自己的cdn或网站上
<!-- jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- jquery-pjax -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
调用方式
我们先来看看调用方式
$(document).pjax(selector, [container], options)
参数说明
参数名 | 说明 |
---|---|
selector |
给哪些selector绑定pjax事件,一般的为a标签 , 如果要去掉一些外连的URL, 这里的selector可以为a[href^="你的URL"]
|
container | 内容变换容器的selector,是指哪个容器里的内容发生的变换,如: ‘#app-main’,在页面跳转时只刷新这个部分 |
options | 传入一个对象,常用属性如下: |
options-container | 内容变换容器的selector |
options-timeout | 超时就会被迫页面就会完全刷新,单位毫秒 |
options-fragment | 这个作为整个pjax框架,必须写上 |
例如在freewind主题中是这么使用的
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"],a[no-pjax]), a[href^="?"]',{container: '#app-main',fragment: '#app-main',timeout: 8000}
)
解释
<?php Helper::options()->siteUrl()?>
是typecho的自带函数,调用本站的首页地址,就是说本站地址开头且属性不包含target="_blank"
和no-pjax
或 以?
开头的a标签
都会进行pjax刷新,以?
开头是有些地方传参时可能直接省略的站点url
#app-main
是局部刷新的容器的selector,大家根据自己的主题自行修改
加载动画
pjax为我们提供了两个回调事件
pjax:send:pjax加载之前
pjax:complete:pjax加载成功之后
所以我们可以在pjax加载之前开启动画,加载成功之后结束动画,我这里用的是nprogress这个进度条动画
所以我们的代码就成了如下
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"],a[no-pjax]), a[href^="?"]',{container: '#app-main',fragment: '#app-main',timeout: 8000}
).on('pjax:send', function () {NProgress.start();//加载动画效果开始}).on('pjax:complete', function () {NProgress.done();//加载动画效果结束
});
js插件不生效
pjax采用的是异步请求资源,也就是每次请求数据不是重新获取整个页面的数据而是只会获取#pjax-container
容器里面的数据。所以如果js
脚本在容器外的话就不会被加载执行了,所以我们可以定义一个reload
函数在pjax结束时进行回调,以freewind
主题为例,最终代码如下:
function reload() {// 初始化freewind题window.freewind = new Freewind($("#is-page").data('page').trim() === 'page')if (window.freewind.page) {//如果是文章详情面window.freewind.registerPage()}//自定义挂载点,部分插件可能需要初始化,可以写在这里<?php Typecho_Plugin::factory('freewind')->pjaxload(); ?>window.freewind.topInit()window.freewind.registerHandler()
}
//第一次进行页面进行初始化
reload();
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"],a[no-pjax]), a[href^="?"]',{container: '#app-main',fragment: '#app-main',timeout: 8000}
).on('pjax:send', function () {NProgress.start();//加载动画效果开始}).on('pjax:complete', function () {reload();//pjax加载结束完重新初始化NProgress.done();//加载动画效果结束
});
结束
至此,typecho
开启pjax结束,大家还不快去试试,有什么不懂的地方可以在下方评论,我看到后会帮大家解答
参考
typecho博客实现pjax - 友人C
给 Typecho博客 配置PJAX无刷新访问的 教程
Typecho开启全站Pjax相关推荐
- typecho模板ajax,Typecho实现全站式Ajax的方法
我相信不懂jQuery和Ajax的朋友看到这篇文应该会挺高兴的,因为目前网络上关于Typecho的Ajax关键字全是willin kan做的AjaxComments插件.如果你对Typecho的全站化 ...
- 借助腾讯云CDN开启全站https及问题解决分享
借助腾讯云CDN开启全站https及问题解决分享 参考文章: (1)借助腾讯云CDN开启全站https及问题解决分享 (2)https://www.cnblogs.com/purpleraintear ...
- 10分钟免费开启全站https
title: 10分钟开启全站https date: 2018-05-25 16:03:31 tags: https ubuntu 持续了1个多月的备案,今天收到短信终于下来了. 上篇水文,大概的记录 ...
- typecho 隐藏index.php,Typecho开启伪静态并隐藏index.php
Typecho开启伪静态并隐藏index.php 灵曦 • 2019 年 07 月 21 日 前言 Typecho后台设置永久链接后,会在域名后加上index.php,贼不好看 那么我们如何做到这样的 ...
- php 预缓存,WordPress太耗资源?WP Super Cache详细设置教程 为WordPress开启全站预缓存...
WP Super Cache是蜗牛一直使用的缓存插件,从2012年使用WordPress建站以来就一直使用此款插件,蜗牛789在如何使用WP Super Cache缓存插件为WordPress站点加速 ...
- 一行代码实现全站pjax无刷新加载
之前也没有研究过pjax,但是没事走访别人博客时看到不少经过pjax的网站,响应速度很快,今天一篇<一行代码实现全站pjax无刷新加载>测试后发发现效果确实不错,但是由于我是老的媒体范板子 ...
- PHP全站pjax影响收录,WordPress实现全站PJAX
什么是PJAX pjax = pushState + ajax pjax是一个Query插件,它通过ajax和pushState技术提供了极速的(无刷新ajax加载)浏览体验,并且保持了真实的地址.网 ...
- cloudflare免费证书_通过Cloudflare开启全站https
Cloudflare 添加域名后,会自动生成通用证书,快速开启全站HTTPS,服务端不用做任何修改,还可以选择多种开启模式 一.注册Cloudflare账号 直接打开网站:https://www.cl ...
- 明月浩空播放器php源码,【模板分享】明月浩空的Colorful响应式全站Pjax模板
特色功能: 1.真的是全Emlog中真正做到全站Pjax+Ajax的模板了(试试别人所谓Pjax全站的搜索,评论等) 2.外观自响应所有设备(iPhone6+Plus+Ipad+PC真机测试,非网页预 ...
最新文章
- java定义set_java – “方法流()未定义类型Set”
- python高阶函数filter_python 高阶函数之filter
- yarn资源管理调度平台
- 关于长寿_FreeCodeCamp可以帮助您更长寿
- 写出表格的结构html,一个面试题,根据json结构生成html表格
- ghostwin10系统后不小心重新分区了,其它分区的资料如何找回
- seg代码配置的踩坑记录
- vue打包后CSS中引用的背景图片不显示问题
- log4J配置及在web.xml文件中的配置
- googletest,笔记20190821
- 18. 避免使用vectorbool
- c语言 头文件卫士详解,C 语言条件编译与防止头文件重复
- win10安装影子系统,导致电脑无限蓝屏,解决总结
- 雷达 航迹跟踪 matlab,一种基于MATLAB建模的雷达航迹显示求解方法与流程
- Protobuf协议格式详解
- win10电脑wifi服务器未响应,Win10系统点击无线图标没反应的解决方法
- 水平放滑轮组计算机械效率,初中物理中考常用公式-总结-2
- 适合新手的mac电脑使用技巧 苹果电脑的快捷键和使用技巧
- Centos添加开机启动项【Systemctl方式】
- android 盒子排名,2021电视盒子排名:业内公认最好用的五大电视盒子