经常在我的QQ群里有朋友问我怎样实现一篇很长的文章分页的效果,我也多次给出了解决的思路,但是还是有些新手不是很了解具体怎么写,今天我来写这篇日志,给需要的朋友作参考用。


我们知道在很多在线编辑器里都有插入分页的功能,像在KindEditor中点击插入分页编辑器会在光标的地方插入如下的代码:

<hr style="page-break-after:always;" class="ke-pagebreak" />

而UEditor则会在光标处加入:

_ueditor_page_break_tag_

_ueditor_page和_break_tag_之间是没有空格的,由于本网站也是用的ueditor使用的分页符是break_tag,所以上面加了空格避免影响

下面我以KindEditor为例,贴上我的代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<?php
$content=<<<str
        <p>上海顶想信息科技有限公司(TOPThink Inc.)是国内领先的WEB应用和服务提供商致力于WEB应用平台、产品和应用的研发和服务,为企事业单位提供基于WEB的应用开发快速解决方案和产品。公司成立于2008年9月,是一家拥有自主知识产权的高新企业。</p>
        <hr />
        <p>公司长期专注于WEB应用框架、应用平台和企业解决方案的研究,公司的核心技术框架ThinkPHP由创始人刘晨于2006年创立,经过6年多的精心打造和发展,具有广泛的用户基础和良好的业内口碑,已经成长为国内领先和最具影响力的WEB应用开发框架,国外同比也具有相当大的优势。其应用领域分布于各个行业,在门户、社区和电子商务领域有着非常良好支持以及拓展,大小案例不下千家,在安全、效率、负载上都有很大优势,已经成为WEB应用的快速开发解决方案和最佳实践!</p>
                <hr />
        <p>
        公司总部位于上海,由从事互联网和用户体验研究达10年的资深专家领军,拥有一批专业的策划、设计和技术团队以及广泛的社区技术力量。公司长期以来凭借业内的影响力、良好的客户和合作关系,邀请了众多安全和项目专家作为顾问,有力得保证了客户项目的开发和实施。公司还拥有一支资深用户体验和设计研究队伍,针对不同用户量身定做用户体验流程,有着良好的产品设计和设计概念。<br/>2009年获得上海市重大文艺创作项目选题推荐。</p>
str;
                      
$content = preg_replace("'<hr(.*)\/>'iUs", "<hr>", $content);
$content = explode("<hr>", $content);
$count = count($content);
$p = empty($_GET['page']) ? 1 : (int) $_GET[page];
$p = $p == 0 ? 1 : $p;
$p = $p > $count ? $count : $p;
$p--;
$content = $content[$p];
$p++;
if ($count > 1) {
    $page = '<a class="first" href="?page=1">首页</a>';
    for ($i = 1; $i <= $count; $i++) {
        $page.=$i == $p ? '【<a class="on" style="color:red;" href="javascript:void(0)">' . $i . '</a>】' : '【<a href="?page=' . $i . '">' . $i . '</a>】';
    }
    $page.='<a class="end" href="?page=' . $count . '">尾页</a>';
                      
}
echo "<h1>上海顶想信息科技有限公司</h1>";
echo $content;
                      
echo "<div>{$page}</div>";
                      
?>
</body>
</html>

按照上面的代码你就可以实现文章分页了,效果如下图:

wKioL1NxqrOAhAIIAAPebmdyTBY787.jpg

如果你用的是UEditor编辑器分页符默认是:_ueditor_page _break_tag_ (你可以在ueditor.config.js中修改pageBreakTag的设定)则可以将上面的代码稍作修改即可:

$content = preg_replace("'<hr(.*)\/>'iUs", "<hr>", $content);
$content = explode("<hr>", $content);

改为:

$content = explode("_ueditor_page _break_tag_", $content);

这样就可以了,当然你可以自定义任何分页符