typecho使用Pjax小结

2018-11-23 / JavaScript / Hoe

记我在制作PureLoveForTypecho主题时, 使用Pjax遇到的一些问题

Pjax用法

引入类库后在主题footer.php里添加以下代码即可

$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000,
});

记坑

1.发现Pjax版本需要与Jquery版本保持某个契合度: 大概是pjax 1.9.x版本应配合jq 2.x版本; pjax2.0.x以上的版本使用jq 3.x 才能使用, 否则bug bug~

2.标签要闭合: 如果页面上html标签没有写完整, 也会导致pjax无法生效如<body>没有闭合

3.pjax完成后需要重载其他类库, 如代码高亮

4.评论区错误: 点击回复按钮JS报错后, 无法将评论框定位到回复区(但是刷新一下页面, 就会恢复正常)

Uncaught ReferenceError: TypechoComment is not defined at HTMLAnchorElement.onclick

引起这个原因是: window.TypechoComment对象是typecho在head标签里调用$this->header()方法为我们生成的, Pjax加载后window.TypechoComment没有被重新载入进来. 且window.TypechoComment里的respondId 没有被重新生成.

解决方案:
在Pjax的替换#pjax-container时, 重新载入window.TypechoComment对象:

<div id="pjax-container">
    <!--commentReply=1 表示仅输出 window.TypechoComment 对象-->
    <?php $this->header('commentReply=1&description=0&keywords=0&generator=0&template=0&pingback=0&xmlrpc=0&wlw=0&rss2=0&rss1=0&antiSpam=0&atom'); ?>
</div>

5.听说要关闭反垃圾保护, 这个我没有验证过.

已有 35 条评论

火喵酱 2022-07-03 11:48 回复

解决方法非常好用，感谢感谢！
袁某人 2022-01-07 15:33 回复

非常感谢啊，没想到4年前的文章能帮到我，官方文档简直就是一坨
1. 火喵酱 2022-07-03 11:53 回复
  
  官方文档还误导人，坑死我了
2. Hoe 2022-01-07 15:36 回复
  
  很高兴能帮到你😁
扣扣聊天 2021-04-09 21:59 回复

测试评论功能😀
木灵鱼儿 2020-04-21 23:16 回复

有用，找了半天这个东西，插眼，以后说不定还能再来
1. Hoe 2020-04-22 13:59 回复
  
  😀常来常来
C-R 2020-04-02 01:15 回复

自己写了个主题，今天尝试加Pjax，用的也是JQuery Pjax，先是原本用JQuery控制的点击效果挂了，换成js函数解决了，然后发现评论也挂了，关了反垃圾保护就好了，但提交评论和搜索会整页重新加载😂
1. Hoe 2020-04-02 09:15 回复
  
  搜索实现 Pajx 可以参考我写的代码😁，评论我没有做 Pjax 效果
xiaobo 2020-03-26 19:38 回复

大佬，问一下就是该主题使用Pjax是还要改你的到层代码的嘛，用的一个插件刷新不了就是切换页面就失效了，😬
1. Hoe 2020-03-26 20:16 回复
  
  不用修改任何配置就可以使用Pjax。看看控制台有没有报错信息
  1. xiaobo 2020-03-29 12:08 回复
    
    没有。就是问一下大佬，我安了个播放的按纽，然后我看了下footer.php，正常情况应该是我点开文章内容页，然后不中断，或者进入其他页面不中断，我是需要改哪里吗，恳请麻烦大佬指点一下😬
    
    Hoe 2020-03-29 16:53 回复
    
    加我QQ或微信
    
    Hoe 2020-03-29 12:12 回复
    
    你可以尝试在 js/purelove.js 的 pjaxComplete() 方法内调用你播放的方法
    
    xiaobo 2020-03-29 16:51
    
    调用了我的播放和停止的方法，但是还是只有点击回到首页不会中断，点击分类或者进入其他文章页面都是会中断。。🙃晕了，
帅 2020-01-16 15:17 回复

大佬，那个归档的时间轴怎么实现的，是插件吗？
1. Hoe 2020-01-16 15:18 回复
  
  实现归档页面很简单，请参考：
  https://gitee.com/HoeXhe/PureLoveForTypecho/wikis/%E5%A6%82%E4%BD%95%E6%98%BE%E7%A4%BA%E5%BD%92%E6%A1%A3%E9%A1%B5%E9%9D%A2
nice 2019-02-18 16:27 回复

写的啥呀看不明白😂
枫叶 2019-01-24 14:34 回复

不太喜欢用Pjax，感觉这个玩意儿得专业人才整得完美，不然总觉得怪怪的。
1. Hoe 2019-01-25 08:17 回复
  
  Pjax可以让用户体验变得更友好
云天 2019-01-16 06:30 回复

https://qqdie.com/archives/typecho-recovery-visible-ok.html
博主这个希望可以添加进新版
不过大佬可以先告诉我ajax.php添加什么吗
1. Hoe 2019-01-16 09:27 回复
  
  抱歉, 我没明白你的意思
  1. 云天 2019-01-16 09:32 回复
    
    就是这个回复可见希望可以添加到下一个版本
    还有就是他们说ajax不加载这个的话
    就在pjax中重新加载这个$( ".class的名字").fancybox();
    大佬的模板应该在ajax里添加什么代码
    
    Hoe 2019-01-16 10:07 回复
    
    回复可见我没有研究过, 不知道怎么实现
    你的背影非常赞!
    
    Hoe 2019-01-16 09:42 回复
    
    pjaxComplete()是Pjax完成后执行的方法😀
    
    云天 2019-01-16 09:52
    
    好吧虽然没明白什么意思
    我就是想问下博主的模板怎么实现回复可见
    还有我觉得我找的这个背景比较好看
    适合这个模板博主觉得怎么样

Pjax用法

记坑

我来吐槽

已有 35 条评论