You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Timber V2分页自定义显示页数问题求助

解决Timber 2自定义分页显示规则的方案

Timber 2默认分页会生成9个页码条目,要实现你需要的自定义显示效果,可以通过以下两种方式解决:

方案一:使用PHP过滤器修改分页页码数组

在主题的functions.php中添加以下代码,通过timber/pagination/pages过滤器替换默认的页码数组,生成符合你需求的结构:

add_filter('timber/pagination/pages', function($pages, $pagination) {
    $current = $pagination->current();
    $total = $pagination->total();
    $new_pages = [];

    // 处理第1页的显示逻辑
    if ($current === 1) {
        // 添加1、2、3三个页码
        for ($i = 1; $i <= 3; $i++) {
            if ($i > $total) break;
            $new_pages[] = [
                'title' => $i,
                'link' => $pagination->get_page_link($i),
                'class' => $i === $current ? 'active' : ''
            ];
        }
        // 总页数大于3时,添加省略号和最后一页
        if ($total > 3) {
            $new_pages[] = [
                'title' => '...',
                'link' => false,
                'class' => 'pagination__ellipsis'
            ];
            $new_pages[] = [
                'title' => $total,
                'link' => $pagination->get_page_link($total),
                'class' => ''
            ];
        }
    } else {
        // 处理非第1页的显示逻辑(比如当前页为7)
        // 添加第一页
        $new_pages[] = [
            'title' => 1,
            'link' => $pagination->get_page_link(1),
            'class' => 1 === $current ? 'active' : ''
        ];
        // 当前页大于4时,添加省略号
        if ($current > 4) {
            $new_pages[] = [
                'title' => '...',
                'link' => false,
                'class' => 'pagination__ellipsis'
            ];
        }
        // 添加当前页前后2页的范围
        $start = max(2, $current - 2);
        $end = min($total - 1, $current + 2);
        for ($i = $start; $i <= $end; $i++) {
            $new_pages[] = [
                'title' => $i,
                'link' => $pagination->get_page_link($i),
                'class' => $i === $current ? 'active' : ''
            ];
        }
        // 当前页小于总页数-3时,添加省略号
        if ($current < $total - 3) {
            $new_pages[] = [
                'title' => '...',
                'link' => false,
                'class' => 'pagination__ellipsis'
            ];
        }
        // 添加最后一页
        if ($total > 1) {
            $new_pages[] = [
                'title' => $total,
                'link' => $pagination->get_page_link($total),
                'class' => $total === $current ? 'active' : ''
            ];
        }
    }

    return $new_pages;
}, 10, 2);

添加这段代码后,你原来的Twig分页模板不需要修改,直接使用posts.pagination.pages循环即可,过滤器会自动替换成自定义的页码数组。

方案二:在Twig模板中手动构建分页结构

如果你不想修改PHP代码,可以直接在Twig模板里写逻辑,生成符合需求的分页元素,替换原来的循环部分:

{% if posts.pagination.pages is not empty %}
    <nav class="pagination" role="navigation" aria-label="pagination">
        <ol class="pagination__items">
            {% if posts.pagination.prev %}
                <li class="pagination__previous pagination__link">
                    <a href="{{ posts.pagination.prev.link }}">&laquo; {{ __( 'Vorige', 'my-site' ) }}</a>
                </li>
            {% endif %}

            {% set current = posts.pagination.current %}
            {% set total = posts.pagination.total %}

            {# 第1页的显示逻辑 #}
            {% if current == 1 %}
                {% for i in 1..3 %}
                    {% if i > total %}
                        {% break %}
                    {% endif %}
                    <li class="pagination__link {{ i == current ? 'active' : '' }}">
                        {% if i != current %}
                            <a href="{{ posts.pagination.get_page_link(i) }}">
                                <span class="visually-hidden">{{ __( 'Pagina', 'my-site' ) }}</span> {{ i }}
                            </a>
                        {% else %}
                            <span>
                                <span class="visually-hidden">{{ __( 'Pagina', 'my-site' ) }}</span> {{ i }}
                            </span>
                        {% endif %}
                    </li>
                {% endfor %}
                {% if total > 3 %}
                    <li class="pagination__link pagination__ellipsis">
                        <span>...</span>
                    </li>
                    <li class="pagination__link">
                        <a href="{{ posts.pagination.get_page_link(total) }}">
                            <span class="visually-hidden">{{ __( 'Pagina', 'my-site' ) }}</span> {{ total }}
                        </a>
                    </li>
                {% endif %}
            {% else %}
                {# 非第1页的显示逻辑 #}
                <li class="pagination__link">
                    <a href="{{ posts.pagination.get_page_link(1) }}">
                        <span class="visually-hidden">{{ __( 'Pagina', 'my-site' ) }}</span> 1
                    </a>
                </li>
                {% if current > 4 %}
                    <li class="pagination__link pagination__ellipsis">
                        <span>...</span>
                    </li>
                {% endif %}
                {% set start = max(2, current - 2) %}
                {% set end = min(total - 1, current + 2) %}
                {% for i in start..end %}
                    <li class="pagination__link {{ i == current ? 'active' : '' }}">
                        {% if i != current %}
                            <a href="{{ posts.pagination.get_page_link(i) }}">
                                <span class="visually-hidden">{{ __( 'Pagina', 'my-site' ) }}</span> {{ i }}
                            </a>
                        {% else %}
                            <span>
                                <span class="visually-hidden">{{ __( 'Pagina', 'my-site' ) }}</span> {{ i }}
                            </span>
                        {% endif %}
                    </li>
                {% endfor %}
                {% if current < total - 3 %}
                    <li class="pagination__link pagination__ellipsis">
                        <span>...</span>
                    </li>
                {% endif %}
                <li class="pagination__link">
                    <a href="{{ posts.pagination.get_page_link(total) }}">
                        <span class="visually-hidden">{{ __( 'Pagina', 'my-site' ) }}</span> {{ total }}
                    </a>
                </li>
            {% endif %}

            {% if posts.pagination.next %}
                <li class="pagination__next pagination__link">
                    <a href="{{ posts.pagination.next.link }}">{{ __('Volgende', 'my-site') }}&raquo;</a>
                </li>
            {% endif %}
        </ol>
    </nav>
{% endif %}

两种方案都能实现你需要的分页显示效果:

  • 第1页显示:1 | 2 | 3 | ... | 300 | Next >
  • 第7页显示:< Back | 1 | ... | 5 | 6 | 7 | 8 | 9 | ... | 300 | Next >

内容的提问来源于stack exchange,提问作者Mark Jansen

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.14 00:55:16