实现 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 条评论

  1. Google Chrome 69 Google Chrome 69 Windows 7 Windows 7

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

    1. Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

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

      1. Google Chrome 69 Google Chrome 69 Windows 7 Windows 7

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

    2. Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

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

      1. Google Chrome 69 Google Chrome 69 Windows 7 Windows 7

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

        1. Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

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

          1. Google Chrome 69 Google Chrome 69 Windows 7 Windows 7

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

            1. Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

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

            2. Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

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

          2. Google Chrome 70 Google Chrome 70 Mac OS X 10.14 Mac OS X 10.14

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

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

            1. Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

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

            1. Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

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

          3. Google Chrome 70 Google Chrome 70 Mac OS X 10.14 Mac OS X 10.14

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

            1. Wordpress App 11 Wordpress App 11 iPhone iOS 12.1 iPhone iOS 12.1

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注