ThinkPHP 內容頁分頁實現：基於分頁符的動態分割方案

ThinkPHP 內容頁分頁實現：基於分頁符的動態分割方案

在 CMS 系統中，長文章常需分頁顯示。本文介紹基於編輯器分頁符的內容分割與分頁導航生成方案，適用於 ThinkPHP 等 MVC 框架專案。

核心思路

1. 編輯器插入分頁符：如 UEditor 的 `

   ---

   ` 或自定義標記 `_ueditor_page_break_tag_`
2. 後端讀取時分割：按分頁符將內容分割為陣列
3. URL 參數控制當前頁：如 `?p=2` 顯示第 2 頁內容
4. 動態生成分頁導航：根據總頁數與當前頁輸出連結

完整實現代碼

<?php
// 控制器或模板中的邏輯
// 1. 獲取文章內容 (假設 $dy['art_content'] 為資料庫字段)
$content = $dy['art_content'];

// 2. 按分頁符分割 (UEditor 預設分頁符)
$pages = explode('_ueditor_page_break_tag_', $content);
$totalPages = count($pages);

// 3. 獲取當前頁碼
$currentPage = isset($_GET['p']) ? max(1, intval($_GET['p'])) : 1;
if ($currentPage > $totalPages) $currentPage = $totalPages;

// 4. 構建分頁 URL (保留其他查詢參數)
$url = $_SERVER['REQUEST_URI'];
$parse = parse_url($url);
$query = $parse['query'] ?? '';
parse_str($query, $params);
unset($params['p']); // 移除舊的頁碼參數
$baseUrl = $parse['path'] . ($params ? '?' . http_build_query($params) : '');

// 5. 生成分頁導航 HTML
$pagination = '';
if ($totalPages > 1) {
    for ($i = 1; $i <= $totalPages; $i++) {
        if ($i == $currentPage) {
            $pagination .= '<span class="current">[' . $i . ']</span>';
        } else {
            $separator = ($params ? '&' : '?');
            $pagination .= '<a href="' . $baseUrl . $separator . 'p=' . $i . '">[' . $i . ']</a>';
        }
    }
}

// 6. 輸出當前頁內容 (陣列索引從 0 開始)
echo $pages[$currentPage - 1];

// 7. 輸出分頁導航
if ($pagination) {
    echo '<div class="pagination">' . $pagination . '</div>';
}
?>

ThinkPHP 整合要點

1. 模板中使用 (Volley/Smarty/原生 PHP)

{* 模板文件 *}
<div class="article-content">
    {$currentContent|raw}
</div>

<div class="pagination">
    {$pagination|raw}
</div>

2. 控制器邏輯封裝

<?php
class ArticleController extends Controller
{
    public function detail($id)
    {
        $article = M('Article')->find($id);
        if (!$article) $this->error('文章不存在');

        // 分頁處理
        $result = $this->paginateContent($article['content']);

        $this->assign('currentContent', $result['content']);
        $this->assign('pagination', $result['pagination']);
        $this->display();
    }

    private function paginateContent($content, $pageParam = 'p')
    {
        $pages = explode('_ueditor_page_break_tag_', $content);
        $total = count($pages);
        $page = max(1, min(intval(I($pageParam)), $total));

        // 構建保留參數的 URL
        $params = $_GET;
        unset($params[$pageParam]);
        $baseUrl = U('', $params); // ThinkPHP U 函數生成 URL

        $pagination = '';
        if ($total > 1) {
            for ($i = 1; $i <= $total; $i++) {
                $url = $baseUrl . ($params ? '&' : '?') . $pageParam . '=' . $i;
                $pagination .= ($i == $page)
                    ? '<span class="current">[' . $i . ']</span>'
                    : '<a href="' . $url . '">[' . $i . ']</a>';
            }
        }

        return [
            'content'    => $pages[$page - 1],
            'pagination' => $pagination,
            'total'      => $total,
            'current'    => $page,
        ];
    }
}
?>

靜態化/URL 路由配置

若專案啟用 URL 靜態化，需在路由配置中加入頁碼參數：

'URL_ROUTE_RULES' => [
    // 原規則
    'article/:id' => 'Article/detail',
    // 新增支援分頁
    'article/:id/p/:page' => 'Article/detail',
],

或配置靜態緩存規則：

'HTML_FILE_SUFFIX' => '.html',
'HTML_URL_SUFFIX'  => '_p{:page}.html', // 生成 article_123_p2.html

編輯器分頁符對照表

進階優化建議

• 緩存分割結果：文章內容不常變更，可將分割後的陣列緩存至 Redis/File，避免重複 explode
• SEO 優化：為分頁頁面添加 ``、`rel="canonical"` 指向第一頁
• 無限滾動載入：移動端可改用 AJAX 載入下一頁，append 到容器
• 分頁符標準化：後台儲存時統一轉換為單一標記，前端解析更穩健

完整 CSS 樣式參考

.pagination { text-align: center; margin: 20px 0; }
.pagination a, .pagination span {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
    color: #337ab7;
}
.pagination a:hover { background: #eee; }
.pagination .current {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
    cursor: default;
}

此方案無需引入重型分頁類庫，代碼輕量、邏輯清晰，易於根據專案需求客製化。