/ 软件 / 1039浏览

实现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);后原插件仍无法工作,策略是不同时使用…… 😀

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

27

  1. 木瓜园

    翻了几篇 好像没看到应用

    Safari 12 · iPhone iOS 12.1
    1. S

      @木瓜园和两个插件有冲突,估计是js加载问题,暂时下线待查。 🙂

      Wordpress App 11 · iPhone iOS 12.1
    2. S

      @木瓜园已更新。

      Google Chrome 70 · Mac OS X 10.14
  2. 大致

    最简单的做法是不分页啊 😎

    Firefox 63 · Windows 7
    1. S

      @大致文章太长了啊。比如上文中@fooleap提到的那篇。

      Google Chrome 70 · Mac OS X 10.14
  3. fooleap

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

    Google Chrome 69 · Windows 7
    1. S

      @fooleap😥 又给我出难题啦。我有空再研究研究吧。

      Wordpress App 11 · iPhone iOS 12.1
    2. S

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

      Wordpress App 11 · iPhone iOS 12.1
      1. fooleap

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

        Google Chrome 69 · Windows 7
    3. S

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

      Wordpress App 11 · iPhone iOS 12.1
      1. fooleap

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

        Google Chrome 69 · Windows 7
        1. S

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

          Wordpress App 11 · iPhone iOS 12.1
          1. fooleap

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

            Google Chrome 69 · Windows 7
            1. S

              @fooleap你说的是上面的代码还是我最后用的插件?

              Wordpress App 11 · iPhone iOS 12.1
            2. S

              @fooleap对了,这样说来岂非对SEO没影响?隐藏能用也行啊?

              Wordpress App 11 · iPhone iOS 12.1
          2. fooleap

            @S可能就是最后的插件,就是目前本页的效果。

            Google Chrome 70 · Mac OS X 10.14
            1. S

              @fooleap❗ 算了,我打算放弃高级的ajax了,用回原来的简单分页。

              Wordpress App 11 · iPhone iOS 12.1
          3. fooleap

            @S之前的分页是使用什么插件来着?我发现你其实很喜欢折腾的 :mrgreen:

            Google Chrome 70 · Mac OS X 10.14
            1. S

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

              Wordpress App 11 · iPhone iOS 12.1
            2. S

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

              Wordpress App 11 · iPhone iOS 12.1
          4. fooleap

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

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

            Google Chrome 70 · Mac OS X 10.14
            1. S

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

              Wordpress App 11 · iPhone iOS 12.1
          5. fooleap

            @S对,我说的之前,是写这篇文章之前的状态,原来那是自带的啊 ❗

            Google Chrome 70 · Mac OS X 10.14
          6. fooleap

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

            Google Chrome 70 · Mac OS X 10.14
            1. S

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

              Wordpress App 11 · iPhone iOS 12.1
          7. fooleap

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

            Google Chrome 70 · Mac OS X 10.14
            1. S

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

              Wordpress App 11 · iPhone iOS 12.1

回复 fooleap 取消回复

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