Hermit Cottage

实现 Ajax 无刷新长文章 nextpage 分页功能

标题起得有些拗口,不过博主们应该都懂啥意思。前一阵 @fooleap 在文章留言中提到:

你这个分页,其实可以采用 Ajax 并 pushState() 更新 history 的方式。刚我想评论的时候想翻前页去看,一切页草稿没了=。=

既然读者有需求,自然应该实现,网上搜了一圈,有很多办法,但都比较复杂,以我这编程水平确实难为了自己,加上没有大腿可以抱,只能先搁置着。昨天 p 图,看着 Adobe Bridge 里几百张照片,妥妥的一篇长文,不可避免的又想起这茬来。找来找去,最后是在 WordPress 插件库里搜到一款 4 年没有更新的插件 “Paged Post Slider”。不过作者声明以后再也不会更新了,有需要可以去 Github 自行下载:

NOTE: This plugin is no longer actively developed or supported. If anyone wants to fork it, check out the [github repository](https://github.com/spencejs/Paged-Post-Slider).

安装成功后测试,确实也能实现功能,但只有基本的 “Previous” 和 “Next” 标签,离我的需求差得比较远。最终以有限的水平修改了插件代码后终于实现了比较理想的 Ajax 无刷新长文章 nextpage 页码分页功能。主要修改之处如下:

1、插件 php 代码中,去掉了 function paged_post_link_pages(),将 $args 功能放到 wp_link_pages 里。

$ppscontent .= wp_link_pages( array('before' => '<div class="fenye">', 'after' =>'', 'next_or_number' => 'next', 'previouspagelink' => '<span>上一页</span>', 'nextpagelink' => ''));
$ppscontent .= wp_link_pages( array('before' => '', 'after' => '', 'next_or_number'=> 'number', 'link_before' =>'<span>', 'link_after'=>'</span>'));
$ppscontent .= wp_link_pages( array('before' => '', 'after' => '</div>', 'next_or_number'=> 'next', 'previouspagelink' => '', 'nextpagelink' => ' <span>下一页</span>'));

2、自己用的 permalink 格式是 https://siteurl/%post_id% 形式,属于非标,会导致一个 bug 产生——无法点选第 1 页。在插件 js 代码中新增如下代码:
else if(address.split("/").length == 4) {
	//Trailing Slash Permalink Structure
	var ajaxNav = function(event) {
		var url = this.href;
		var parts = url.split("/");
		var result = '/' + parts[parts.length-1];
		if(typeof result != 'undefined' && result == 'pagination'){
			var result = '';
		}
		event.preventDefault();
		if(url.split("/").length == 4){
			location.hash = '';
		} else {
			location.hash = result; 
			}
	}
}

3、选页数后,将 scrollTop 设为 250,直接跳到页首文章处而非页面顶部,但增加了一个判断函数,如果是文章第 1 页,则跳到页面顶部。
if (pps_options_object.scroll_up && (hash_value !== '')) {
	$('html, body').animate({
	scrollTop: 250
	}, 500);
};

4、已知问题:与 Enlighter、Syntax Highlighter、MapsMarker 等插件冲突。无解,加入 var query = jQuery.noConflict(true); 后原插件仍无法工作,策略是不同时使用…… :D

5、由上述 “Paged Post Slider” 衍生而来的插件 “jQuery Post Splitter” 可完美解决上述兼容性问题。如喜欢轻量代码的,可考虑上文代码;如有插件冲突的,可考虑安装此插件并自行修订 CSS。

27 条评论

发表评论 →

我看目前的效果,是不是考虑点击加载更多,而不是替换当前页面内容为第二页?
对比之前的分页,这种动态加载不利于 SEO,没法直接访问到第二页,也可以适当扩展实现 :oops:
文章太长主要是图片太多,导致:
1、一次性加载太多图片,费流量。
2、图片把网页撑得太高。
第一个问题,微信公众号文章貌似只是加了图片懒加载,我倒是觉得可以考虑这种做法,可以默认显示前几张。
第二个问题忽略 :razz:

Google Chrome 69 Google Chrome 69 Windows 7 Windows 7

我仔细考虑了一下你的建议,点击加载更多会导致整篇文章的页面更高,而且如何解决在哪里分页的问题?目前没找到说能在 nextpage 标签处可以 load more 的代码呀。

Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

加载更多导致页面更高我决定没什么问题,毕竟访客已经阅读到加载更多那里,继续浏览下去即可。
很无奈 WordPress 的标签我已经忘了 :!:

Google Chrome 69 Google Chrome 69 Windows 7 Windows 7

我其实对目前效果还算满意,但你说的 seo 问题确实没想到。你有什么好的建议吗?

Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

我的想法是保留此前的翻页方式,翻页时动态加载,不刷新页面,或许 PJAX 可以了解一下。

Google Chrome 69 Google Chrome 69 Windows 7 Windows 7

Pjax 我也看了。从头码代码我有困难,目前还是想找个插件修修补补。有好推荐吗?

Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

:shock: 你目前貌似只是分段默认隐藏后面的,按钮控制隐藏和显示,并没有使用 Ajax 相关操作。

Google Chrome 69 Google Chrome 69 Windows 7 Windows 7

哪里是我喜欢折腾,不是你要求高吗? :twisted: 现在用的是 “jQuery Post Splitter”。你帮我看一下呢。我只要好用+不影响计数+不影响 SEO 就行。

Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

之前用的是:「WordPress 插件库里搜到一款 4 年没有更新的插件 “Paged Post Slider”」,Master 的下载地址在上文提到的 Gitbub 链接,我自己做了一定修改。

Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

之前的分页挺好的,一篇文章好几个链接,也可以直接访问到第二页的内容。不知道是利于还是不利于 SEO。
缺点是上次我第一次没经验,点页码评论内容就没了。
目前这样搜索引擎一般会抓整篇文章的内容,缺点是长篇图文所有图片一次性加载。

最后我觉得还是自己爽就好。

Google Chrome 70 Google Chrome 70 Mac OS X 10.14 Mac OS X 10.14

你说的是我没用 ajax 之前的代码吗?没用插件,是 wp 自带的 wp_link_pages()。我马上关掉现在的插件你体验一下感觉好不好。

Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

应该是你自己感觉好不好,而不是我感觉好不好啊,我的感觉很奇葩的

Google Chrome 70 Google Chrome 70 Mac OS X 10.14 Mac OS X 10.14

好吧,实话说我觉得如果有一款插件能让我最小代价部署+加载极快+不冲突+翻页不影响计数和 SEO,我挺愿意用的……

Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

Paged Post Slider 实现 AJAX 后,本来应该在文章内容加载后的执行 JS,在翻页后没有正常加载,该有的效果也就没有出来。
因那些 JS 你好些用的还是插件,改起来也就比较麻烦,鱼和熊掌不可兼得,说的大概就是这个吧。

Google Chrome 70 Google Chrome 70 Mac OS X 10.14 Mac OS X 10.14

那我暂且用回默认函数,毕竟也有其优势。你之前的 “需求” 我暂时不解决了。 :lol:

Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

发表评论