分页无法与Twig一起正常使用

时间:2019-02-12 17:01:17

标签: wordpress pagination twig timber

我在Timber插件中的WordPress内部使用了Twig,我基本上遵循了它们用于分页here的布局。

显示一切正常,但似乎参数在这一点上无法正常工作:

 firebase.database().ref('messages/' + key)
          .orderByChild('timestamp').limitToLast(1)
          .on('child_added', snapshot => {
            // this is the event handler which is executing
            // when the "child_added" event is triggered
            const { text, timestamp, user } = snapshot.val();
            const { name } = user;

            chatData.push({ key, members: displayNameArray, text, timestamp, name })
            dispatch({
              type: GET_CHAT_DATA,
              payload: chatData
            })
          })
      })

无论我为这些参数设置什么,它都会输出 every 页面;因此,如果我有10页,它将打印出所有10页号码;我不想要这个,我试图将其限制为5。

这是怎么了?

1 个答案:

答案 0 :(得分:3)

您不需要使用默认的pagination模板,可以完全自定义

{% set pages_to_show = 5 %}
{% set current = posts.pagination.current %}
{% set max = current + (pages_to_show - 1) %}
{% if max > posts.pagination.total %}
    {% set current = posts.pagination.total - (pages_to_show - 1)  %}
    {% set max = posts.pagination.total %}
{% endif %}


<div class="tool-pagination">
    {% if posts.pagination.prev %}
        <a href="{{posts.pagination.prev.link}}" class="prev {{posts.pagination.prev.link|length ? '' : 'invisible'}}">Prev</a>
    {% endif %}    
    <ul class="pages">
        {% for i in current..max %}
            <li>
                {% if posts.pagination.pages[i].link %}
                    <a href="{{posts.pagination.pages[i].link}}" class="{{posts.pagination.pages[i].class}}">{{posts.pagination.pages[i].title}}</a>
                {% else %}
                    <span class="{{posts.pagination.pages[i].class}}">{{posts.pagination.pages[i].title}}</span>
                {% endif %}
            </li>
        {% endfor %}
        {% if posts.pagination.next %}
            <a href="{{posts.pagination.next.link}}" class="next {{posts.pagination.next.link|length ? '' : 'invisible'}}">Next</a>
        {% endif %}     
    </ul>
</div>

lightweight demo


这不是您如何解决此问题的一个小例子