【问题标题】:Liquid and Arithmetic液体和算术
【发布时间】:2012-12-24 20:51:22
【问题描述】:

我正在处理一些分页,我想知道是否有办法告诉液体只显示 5 页。我正在寻找的输出是

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 并且不提供预期的结果。我可以弄清楚逻辑,使其不会达到负数并按预期工作,但是我该如何做数学方程式呢?

【问题讨论】:

    标签: pagination jekyll liquid


    【解决方案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 %}
    

    【讨论】:

    • 感谢您的回答,这是有道理的。但是,在尝试设置循环时,我确实发现自己遇到了另一个错误。我确实需要能够检查 page_end 是否大于总页数。 {% if page_end > paginator.total_pages %} {% assign page_end = paginator.total_pages %} {% endif %} 上面的代码给了我以下错误 Liquid Exception: comparison of String with 37 failed in index.html 有没有办法在 Liquid 中执行此操作?
    • 我想通了,只需要在 Jekyll 中扩展 pagination.rb 并添加 pager_start 和 pager_end 变量和计算
    • 对于寻求更现代、与 GitHub Pages 兼容且不涉及 Ruby 编程的方法的 Google 员工,请查看 this。披露:我写了答案。
    【解决方案2】:

    我正在用 Jekyll 建立一个博客,我也遇到过类似的情况。根据我在Liquid wiki 中发现的内容,可以使用limitoffset 迭代给定集合的子集。

    以下示例反映了您的特殊情况,应该在每个页面中都能正常工作,从第一页到最后一页:

    {% capture start %}{{ paginator.page | minus: 3 }}{% endcapture %}
    
    {% for i in (1..paginator.total_pages) limit: 5 offset: start %}
        ...
    {% endfor %}
    

    【讨论】:

      【解决方案3】:

      我正在为我的网站使用 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 %}
      

      【讨论】:

        【解决方案4】:

        试试这个

        {% 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 %}
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2011-06-12
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-08-22
          • 2011-11-07
          相关资源
          最近更新 更多