「 typecho主题设置pjax无刷新加载 」
2023-02-19 12:20:33 时间
教程来自友人c
在写作typecho主题的过程中,想给主题追加一个懒加载,其实主题本身够轻量,加不加实际用处不是那么大但还是想加一个,参考于友人c博客
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
这里给出了cdn方式的jquery框架与pjax工具,我在使用过程中是去pjax作者github中下载的master分支,具体差别不大,作者已经很少更新了。
然后以上两行代码放进header也行,放进footer也行,我自己是放进footer的,然后在你的footer里面加入以下代码
<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
container: '#pjax-container',
fragment: '#pjax-container',
timeout: 8000
}).on('pjax:send',
function() {
NProgress.start();
}).on('pjax:complete',
function() {
NProgress.done();
})
</script>
这里上方的Nprogress代码主要是用了一个动画加载库,如果不需要请删除,需要的话可以去百度搜索并引用进来
注意,你需要将你的要进行刷新的区域用一个div标签包裹起来,这里命名为pjax-container,使用id选择器
相关文章
- LLVM 工具系列 - Address Sanitizer 基本原理介绍及案例分析(1)
- LLVM 工具系列 - Address Sanitizer 实现原理(2)
- C++ Postfix Completion VSCode 插件
- 主路由和二级路由设置同一局域网
- umi4 多环境配置改变
- C 语言实现冒泡排序 BubbleSort
- ClickHouse 引擎在行为分析场景下的 JOIN 优化
- C语言中数组长度的计算详解
- 嵌入式:ARM定时器
- 真正“搞”懂HTTP协议07之body的玩法(实践篇)
- Tiktok下载及注册教程
- 信息安全技术 云计算服务安全指南
- 红中私教:使用wamp64配置靶场
- TCP滑动窗口机制(附图例)
- 平台统一监控的介绍和调研
- MyBatis:多对一和一对多
- Cesium for Unreal加载倾斜摄影
- UE4 蓝图查找Actor和Actor标签
- Blender修改视野范围
- UE4 WebUI插件使用指南