立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] txgz999@yahoo.com

日志

在文章页上添加加载下一页按钮

热度 2已有 104 次阅读2017-11-20 01:50 AM |个人分类:Discuz

在主题列表页的底部有一个"下一页>>"按钮,点击后会将下一页的内容添加到本页上来。这个按钮可以重复点击,一直到添加所有后续各页的内容。网友ladyff建议将这个功能也加到文章里去。本文就讨论下这个问题。

主题列表页里的"下一页>>"按钮定义在文件 template/default/forum/forumdisplay_list.htm 里: < a class="bm_h" href="javascript:;" rel="$multipage_more" curpage="$page" id="autopbn" totalpage="$maxpage" picstyle="$_G[forum][picstyle]" forumdefstyle="$_G[cookie][forumdefstyle]">{lang next_page_extra}</a> <script type="text/javascript" src="{$_G[setting][jspath]}autoloadpage.js?{VERHASH}"></script> 其功能都定义在文件 static/js/autoloadpage.js 里。在Discuz系统里有多处用AJAX的方式在已经显示在浏览器上的网页里修改或添加内容,但绝大多数时候从服务器得到的内容都是放在xml里的,主题列表页上的这个按钮功能是仅有的用AJAX方式得到下一页的html,再从中提取列表内容部分加到现有列表里来,文件autoloadpage.js虽然文件名看上去有一般性,但事实上仅用于此。

要在文章里实现这个功能,需要做下面四个修改。

1。添加加载下一页按钮上的文字
修改语言包文件 source/language/portal/lang_template.php,在底部加上 'next_page_extra' => '下一页 &raquo;',
2。加上加载下一页按钮的风格
修改风格文件 template/default/common/module.css, 在下面这行 /** misc::invite,group,forum::viewthread,portal::view,home::space **/ 后加上 /* 点击加载下一页按钮样式 */ #autopbn { display: block; margin-bottom: 10px; border: 1px solid rgb(194, 213, 227); border-radius: 3px; text-align: center; } #autopbn:hover { background: #fff; text-decoration: none; }
3。添加加载下一页按钮
修改模板文件 template/default/portal/view.htm, 在下面这句后 <!--{if $multi}--> 加入 <!--{eval $maxpage = sizeof($contents);}--> <!--{eval $multipage_more = helper_page::mpurl($viewurl, '&page=', $page+1);}--> <div> < a class="bm_h" href="javascript:;" rel="$multipage_more" curpage="$page" id="autopbn" totalpage="$maxpage">{lang next_page_extra}</a> <script type="text/javascript" src="{$_G[setting][jspath]}autoloadarticlepage.js?{VERHASH}"></script> </div>
4。添加实现加载下一页按钮功能的javascript文件
添加一个新文件 static/js/autoloadarticlepage.js: (function () { var autopbn = $('autopbn'); var nextpageurl = autopbn.getAttribute('rel').valueOf(); var curpage = parseInt(autopbn.getAttribute('curpage').valueOf()); var totalpage = parseInt(autopbn.getAttribute('totalpage').valueOf()); var autopagenum = 0; var maxpage = (curpage + autopagenum) > totalpage ? totalpage : (curpage + autopagenum); var loadstatus = 0; autopbn.onclick = function () { var oldloadstatus = loadstatus; loadstatus = 2; autopbn.innerHTML = '正在加载, 请稍后...'; getnextpagecontent(); loadstatus = oldloadstatus; }; if (autopagenum > 0) { window.onscroll = function () { var curtop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); if (curtop + document.documentElement.clientHeight + 500 >= document.documentElement.scrollHeight && !loadstatus) { loadstatus = 1; autopbn.innerHTML = '正在加载, 请稍后...'; setTimeout(getnextpagecontent, 1000); } }; } function getnextpagecontent() { if (curpage + 1 > totalpage) { window.onscroll = null; autopbn.style.display = 'none'; return; } if (loadstatus != 2 && curpage + 1 > maxpage) { autopbn.innerHTML = '下一页 &raquo;'; if (curpage + 1 > maxpage) { window.onscroll = null; } return; } curpage++; var url = nextpageurl + '&t=' + parseInt((+new Date() / 1000) / (Math.random() * 1000)); var x = new Ajax('HTML'); x.get(url, function (s) { s = s.replace(/\n|\r/g, ''); if (s.indexOf("id=\"autopbn\"") == -1) { $("autopbn").style.display = "none"; window.onscroll = null; } var next = s.match(/\<td id="article_content"\>(.+?)\<\/td\>/); $('article_content').innerHTML += next[1]; var pageinfo = s.match(/\<div class="pg"\>(.+?)\<\/div\>/); nextpageurl = nextpageurl.replace(/&page=\d+/, '&page=' + (curpage + 1)); var paging = $C('pg'); if(paging && paging.length > 0) { paging[0].innerHTML = pageinfo[1]; } if (curpage + 1 > totalpage) { autopbn.style.display = 'none'; } else { autopbn.innerHTML = '下一页 &raquo;'; } loadstatus = 0; }); } })();

11/23/2017 补充:阅读全文按钮
在分页的文章里可以加一个阅读全文按钮,点击后显示全文。按钮的文字和风格可以类似上文中的1)和2)添加。下面着重讨论类似于文中的3)和4)的修改。这样一个功能有多种办法可以实现。
第一种办法:只修改客户端运行的文件。在客户端将分页的文章逐页获取一一添加到网页上去。这需要在上文中3)所指出的地方加上 < a class="bm_h" href="javascript:;" rel="$viewurl" id="allpbn" totalpage="$maxpage">{lang all_pages}</a> 类似于上文中的4),再加入一个内容如下的新文件 autoloadarticle.js: (function () { var allpbn = $('allpbn'); var totalpage = parseInt(allpbn.getAttribute('totalpage').valueOf()); var viewurl = allpbn.getAttribute('rel').valueOf(); var pagecontent = []; var pagestatus = []; // 0 loading, 1 loaded, 2 added allpbn.onclick = function () { allpbn.innerHTML = '正在加载, 请稍后...'; var paging = $C('pg'); if (paging && paging.length > 0) { paging[0].innerHTML = ''; } for (var i = 0; i < totalpage; i++) { getpagecontent(i); } showpages(); }; function showpages() { var i = 0; for (i = 0; i < totalpage; i++) { if (pagestatus[i] == 0) break; else if (pagestatus[i] == 1) { if (i == 0) $('article_content').innerHTML = ''; $('article_content').innerHTML += pagecontent[i]; pagestatus[i] = 2; break; } } if (i < totalpage) setTimeout(showpages, 100); else allpbn.style.display = "none";; } function getpagecontent(curpage) { pagestatus[curpage] = 0; var pageurl = viewurl + '&page=' + (curpage + 1) + '&t=' + parseInt((+new Date() / 1000) / (Math.random() * 1000)); var x = new Ajax('HTML'); x.get(pageurl, function (s) { s = s.replace(/\n|\r/g, ''); var next = s.match(/\<td id="article_content"\>(.+?)\<\/td\>/); pagestatus[curpage] = 1; pagecontent[curpage] = next[1]; }); } })(); 第二种办法:在服务器端支持一次获取全文。阅读文章的请求是由文件 source/module/portal/portal_view.php 来处理的,它只支持获取一页,所以对它要略做修改,使之能用来获取全文。首先我们要约定显示全文所用的路径。下面是Discuz分页文章的路经的例子:
    portal.php?mod=view&aid=1&page=2 :显示第二页
    portal.php?mod=view&aid=1&page=1 :显示第一页
    portal.php?mod=view&aid=1 :显示第一页
也就是它是用page=N来代表显示第N爷的,而且默认是第一页。所以我们约定用page=all来代表显示全文。在这个约定下,需要对文件 portal_view.php 做下述修改:
$page = intval($_GET['page']); if($page<1) $page = 1; 改为 if($_GET['page'] == 'all') { $page = 'all'; } else { $page = intval($_GET['page']); if($page<1) $page = 1; }$content = C::t('portal_article_content')->fetch_by_aid_page($aid, $page); 改为 if ($page == 'all') { $pcs = C::t('portal_article_content')->fetch_all($aid); $content = $pcs[0]; for ($i = 1; $i < count($pcs); $i++) { $content['content'] .= $pcs[$i]['content']; } } else { $content = C::t('portal_article_content')->fetch_by_aid_page($aid, $page); }$multi = multi($article['contents'], 1, $page, $viewurl); 改为 if ($page != 'all') $multi = multi($article['contents'], 1, $page, $viewurl); 做了上述修改后,服务器端就支持了一次获取文章全文。在客户端可以加下面这样一个阅读全文按钮,点击后网页就显示文章全文了: < a class="bm_h" href="$viewurl&page=all" id="allpbn" target="_self">{lang all_pages}</a> 如果我们希望点击阅读全文按钮后,不更新整个网页,而只将文章全文显示在网页里,我们可以这样来做:首先添加阅读全文按钮: < a class="bm_h" href="javascript:;" rel="$viewurl" id="allpbn">{lang all_pages}</a> <script type="text/javascript" src="{$_G[setting][jspath]}autoloadarticle.js?{VERHASH}"></script> 再加入一个内容如下的新文件 autoloadarticle.js: (function () { var allpbn = $('allpbn'); var viewurl = allpbn.getAttribute('rel').valueOf(); allpbn.onclick = function () { allpbn.innerHTML = '正在加载, 请稍后...'; var paging = $C('pg'); if (paging && paging.length > 0) { paging[0].innerHTML = ''; } var url = viewurl + '&page=all&t=' + parseInt((+new Date() / 1000) / (Math.random() * 1000)); var x = new Ajax('HTML'); x.get(url, function (s) { s = s.replace(/\n|\r/g, ''); $('article_content').innerHTML = s.match(/\<td id="article_content"\>(.+?)\<\/td\>/); }); }; })();

注:本文中的代码里的<符号后和a相连时加了一个不应该有的空格,以避免Discuz在保存日志时自动改变日志内容。

发表评论 评论 (8 个评论)

回复 ladyff 2017-12-3 09:38 PM
牛肉炖土豆: 这个应该是属于阅读全文,而不是把所有分页都显示,问问题要表达清楚的,
阅读全文跟列表翻页是两个概念!
你说的这个网站http://mobile.zol.com.cn/666/6669521 ...
对的,你的描述是正确的。
这个怪我表达不清楚。

需要的是 添加一个按钮,然后点击后可以把全文显示在一个页面中。

而不是,点击了会把文章的所有分页的这个数字显示出来
回复 ladyff 2017-12-3 09:35 PM
天香公主: ladyff估计是既要使用Discuz提供的文章分页功能,又想支持显示全文。

其实我不喜欢这个文章分页功能,我常在美国中文网上看新闻,一篇不长的新闻莫名其妙的被小 ...
是的,很多没有必要分页的反而分页,很烦
回复 天香公主 2017-11-23 03:12 PM
牛肉炖土豆: 这个应该是属于阅读全文,而不是把所有分页都显示,问问题要表达清楚的,
阅读全文跟列表翻页是两个概念!
你说的这个网站http://mobile.zol.com.cn/666/6669521 ...
ladyff估计是既要使用Discuz提供的文章分页功能,又想支持显示全文。

其实我不喜欢这个文章分页功能,我常在美国中文网上看新闻,一篇不长的新闻莫名其妙的被小编分成了多页,不得不多次点击这个按钮才能读完,费事费力。这和主题列表页的情形不同,论坛里的内容由网民添加,管理员不控制数目,所以有分页的需要。而文章是管理员添加的,他可以决定内容长度。也许这个功能的目的主要不是便利读者。
回复 天香公主 2017-11-23 02:48 PM
ladyff: 个人更喜欢保留原有样式不变,就多一个“显示全文”按钮。感觉是js直接ajax读取全文更好点

类似于http://mobile.zol.com.cn/666/6669521.html ...
我在文末加了个补充讨论阅读全文,把我说的两种办法都试了试,供你参考,其中第二种办法在客户端有两种使用途径。

看了你给的链接, 它的做法是点击按钮后更新整个网页来显示全文,相当于我的第二种方法里的第一种使用途径,它没用到Ajax。你看来是希望用Ajax来更新全文,那就是我的第二种办法里的第二种使用途径了。
回复 牛肉炖土豆 2017-11-23 09:13 AM
ladyff: 个人更喜欢保留原有样式不变,就多一个“显示全文”按钮。感觉是js直接ajax读取全文更好点

类似于http://mobile.zol.com.cn/666/6669521.html ...
这个应该是属于阅读全文,而不是把所有分页都显示,问问题要表达清楚的,
阅读全文跟列表翻页是两个概念!
你说的这个网站http://mobile.zol.com.cn/666/6669521.html
是把一个文章分页显示了而已,并不是所有文章的列表,通俗的讲是把一个文章内容,由于内容字数过多,在发帖的时候插入分页符号而已。discuz默认就有这功能,如果不用自带功能,也可以用JQ来实现阅读全文,把多余的隐藏起来。
回复 ladyff 2017-11-23 08:42 AM
天香公主: 可以在客户端做,类似于我新加的那个js文件里的内容,把每一页一一取来显示出来;也可以在服务器端做,现在portal_view.php只支持取一页的内容,可以改一下使之 ...
个人更喜欢保留原有样式不变,就多一个“显示全文”按钮。感觉是js直接ajax读取全文更好点

类似于http://mobile.zol.com.cn/666/6669521.html
回复 天香公主 2017-11-21 10:22 PM
ladyff: 感谢这篇文章。
系统是自带翻页功能,但是不是ajax的。能不能更进一步,增加一个 显示全部?点击后会自动把所有分页一次性显示出来呢 ...
可以在客户端做,类似于我新加的那个js文件里的内容,把每一页一一取来显示出来;也可以在服务器端做,现在portal_view.php只支持取一页的内容,可以改一下使之支持取得所有页的内容,你喜欢哪种办法呢?
回复 ladyff 2017-11-21 07:39 PM
感谢这篇文章。
系统是自带翻页功能,但是不是ajax的。能不能更进一步,增加一个 显示全部?点击后会自动把所有分页一次性显示出来呢

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-12-16 09:03 AM , Processed in 0.060813 second(s), 19 queries.

返回顶部