pagination - 液体と算術

Question

私はいくつかのページネーションに取り組んでおり、液体に 5 ページのみを表示するように指示する方法があるかどうか疑問に思っています。私が探している出力は

<< 最初 5 6 7 8 9 最後 >>

私が現在実装しているロジックは機能しますが、30 ページすべてが表示されています。

{% for count in (2..paginator.total_pages) %}
    {% if count == paginator.page %}
        <span class="current">{{ count }}</span>
    {% else %}
        <a href="/page/{{ count }}/" class="pagenavi-page" title="{{ count }}">{{ count }}</a>
    {% endif %}
{% endfor %}

2 と paginator.total_pages を動的にできるようにしたいのですが、試してみました

{% for count in ((paginator.page - 2)..(paginator.page + 2)) %} 

ただし、このコードは実際には計算を行いません。paginator.page = 5 の場合、ループは 5..5 であり、期待される結果が得られません。負の数に当たらず、期待どおりに機能するようにロジックを理解することはできますが、これで数式を行うにはどうすればよいですか?

Answer 1

フィルターを使用して演算を実行し、タグpaginator.total_pagesを使用して結果を変数に取り込む必要があります。capture開始ページと終了ページをfor取得したら、通常どおりにループを記述できます。

{% capture page_start %}{{ paginator.page | minus: 2 }}{% endcapture %}
{% capture page_end %}{{ paginator.page | plus: 2 }}{% endcapture %}

{% for count in (page_start..page_end) %}
     {% comment %} ... do your thing ... {% endcomment %}
{% endfor %}

Answer 2

Web サイトに Bootstrap 3.0.3 を使用しています。ページネーションには次のコードを使用します。探しているのと同じ効果があります。上に投稿したコードはあなたが探しているものですが、ブートストラップのページネーション コードをここに投稿します。

{% if paginator.total_pages != 1 %} 
{% if paginator.total_pages < 7 %}
        <div class="page-body col-md-12">
          <ul class="pagination pagination-centered">
            {% if paginator.total_pages >= 10 %} 
            {% if paginator.previous_page %}
                <li>
                  <a href="{{ site.url }}/">&laquo;&laquo;</a>
                </li>
            {% else %}
              <li class="disabled">
                <a>&laquo;&laquo;</a>
              </li>
            {% endif %}
            {% endif %}
            {% if paginator.previous_page %}
              {% if paginator.previous_page == 1 %}
                <li>
                  <a href="{{ site.url }}/">&laquo;</a>
                </li>
              {% else %}
                <li>
                  <a href="{{ site.url }}/page{{paginator.previous_page}}">&laquo;</a>
                </li>
              {% endif %}
            {% else %}
              <li class="disabled">
                <a>&laquo;</a>
              </li>
            {% endif %}
            {% if paginator.page == 1 %}
              <li class="active">
                <a>1</a>
              </li>
            {% else %}
              <li>
                <a href="{{ site.url }}/">1</a>
              </li>
            {% endif %}
            {% for count in (2..paginator.total_pages) %}
              {% if count == paginator.page %}
                <li class="active">
                  <a>{{count}}</a>
                </li>
              {% else %}
                <li>
                  <a href="{{ site.url }}/page{{count}}">{{count}}</a>
                </li>
              {% endif %}
            {% endfor %}
            {% if paginator.next_page %}
              <li>
                <a href="{{ site.url }}/page{{paginator.next_page}}">&raquo;</a>
              </li>
            {% else %}
              <li class="disabled">
                <a>&raquo;</a>
              </li>
            {% endif %}
            {% if paginator.total_pages >= 10 %} 
            {% if paginator.next_page %}
              <li>
                <a href="{{ site.url }}/page{{paginator.total_pages}}">&raquo;&raquo;</a>
              </li>
            {% else %}
              <li class="disabled">
                <a>&raquo;&raquo;</a>
              </li>
            {% endif %}
            {% endif %}
          </ul>
        </div>
{% else %}

{% assign page_start = paginator.page | minus: 2 %}
{% assign page_end = paginator.page | plus: 2 %}
{% if page_end > paginator.total_pages %}
{% assign page_end = paginator.total_pages %}
{% assign page_start = paginator.page | minus: 4 %}
{% endif %}
{% if page_start < 2 %}
{% assign page_end = paginator.page | plus: 3 %}
{% assign page_start = paginator.page | minus: 1 %}
{% endif %}
{% if page_start == 0 %}
{% assign page_end = paginator.page | plus: 4 %}
{% assign page_start = paginator.page %}
{% endif %}

<div class="page-body col-md-12">
    <ul class="pagination pagination-centered">
    {% if paginator.total_pages > 5 %} 
    {% if paginator.previous_page %}
        <li>
          <a href="{{ site.url }}/">&laquo;&laquo;</a>
        </li>
    {% else %}
      <li class="disabled">
        <a>&laquo;&laquo;</a>
      </li>
    {% endif %}
    {% endif %}
    {% if paginator.previous_page %}
      {% if paginator.previous_page == 1 %}
        <li>
          <a href="/">&laquo;</a>
        </li>
      {% else %}
        <li>
          <a href="/page{{paginator.previous_page}}">&laquo;</a>
        </li>
      {% endif %}
    {% else %}
      <li class="disabled">
        <a href="#">&laquo;</a>
      </li>
    {% endif %}
    {% if page_start == 1 %}
    {% assign page_end = paginator.page | plus: 4 %}
    {% assign page_start = 2 %}
    {% if paginator.page == 1 %}
      <li class="active">
        <a href="#">1</a>
      </li>
    {% else %}
      <li>
        <a href="/">1</a>
      </li>
    {% endif %}
    {% endif %}
    {% for count in (page_start..page_end) %}
      {% if count == paginator.page %}
        <li class="active">
          <a href="#">{{count}}</a>
        </li>
      {% else %}
        <li>
          <a href="/page{{count}}">{{count}}</a>
        </li>
      {% endif %}
    {% endfor %}
    {% if paginator.next_page %}
      <li>
        <a href="/page{{paginator.next_page}}">&raquo;</a>
      </li>
    {% else %}
      <li class="disabled">
        <a href="#">&raquo;</a>
      </li>
    {% endif %}
    {% if paginator.total_pages > 5 %} 
    {% if paginator.next_page %}
      <li>
        <a href="{{ site.url }}/page{{paginator.total_pages}}">&raquo;&raquo;</a>
      </li>
    {% else %}
      <li class="disabled">
        <a>&raquo;&raquo;</a>
      </li>
    {% endif %}
    {% endif %}
  </ul>
</div>
{% endif %}
{% endif %}

Answer 3

代わりにこれを試してください

{% if paginator.total_pages < 7 %}
{% if paginator.page == 1 %}
        <span class="current bold">1</span>
{% else %}
        <a href="{{ site.url }}/">1</a>
{% endif %}
{% for count in (2..paginator.total_pages) %}
    {% if count == paginator.page %}
        <span class="current bold">{{ count }}</span>
    {% else %}
        <a href="/page{{ count }}/" class="pagenavi-page" title="{{ count }}">{{ count }}</a>
    {% endif %}
{% endfor %}
{% else %}
{% assign page_start = paginator.page | minus: 2 %}
{% assign page_end = paginator.page | plus: 2 %}
{% if page_end > paginator.total_pages %}
{% assign page_end = paginator.total_pages %}
{% assign page_start = paginator.page | minus: 4 %}
{% endif %}
{% if page_start < 2 %}
{% assign page_end = paginator.page | plus: 3 %}
{% assign page_start = paginator.page | minus: 1 %}
{% endif %}
{% if page_start == 0 %}
{% assign page_end = paginator.page | plus: 4 %}
{% assign page_start = paginator.page %}
{% endif %}
{% if page_start == 1 %}
{% assign page_end = paginator.page | plus: 4 %}
{% assign page_start = 2 %}
{% if paginator.page == 1 %}
        <span class="current bold">1</span>
{% else %}
        <a href="{{ site.url }}/">1</a>
{% endif %}
{% endif %}
{% for count in (page_start..page_end) %}
    {% if count == paginator.page %}
        <span class="current bold">{{ count }}</span>
    {% else %}
        <a href="/page{{ count }}/" class="pagenavi-page" title="{{ count }}">{{ count }}</a>
    {% endif %}
{% endfor %} 
{% endif %}