使用 Jekyll-Paginate-v2 为分页添加省略号

如何解决使用 Jekyll-Paginate-v2 为分页添加省略号

我正在使用 Jekyll-Paginate-v2 和他们的 Pagination Trails 为我的博客创建分页。我一切正常，但想添加一些省略号来表示更多页面。当你在第一页时，最后一页应该显示在最后，前面有省略号，经过一定数量的页面后，第一页也应该显示有省略号。如果您到达最后一页，省略号应该会消失。

示例：

< 1 2 3 4 5 6 7 8 8 10 ... 50 >
< 1... 5 6 7 8 9 10 ... 50>

带路径的分页

{% if paginator.total_pages > 1 %}
    <div class="pagination">
        {% if paginator.prevIoUs_page %}
            <a href='{{ paginator.prevIoUs_page_path | prepend: site.baseurl }}' class='prev'>PrevIoUs</a>
        {% endif %}

        {% if paginator.page_trail %}
            {% for trail in paginator.page_trail %}
                <a href="{{ trail.path | prepend: site.baseurl | replace: '//','/' | remove: "index.html" }}" class='{% if page.url == trail.path %}current{% endif %}'>{{ trail.num }}</a>
            {% endfor %}
        {% endif %}

        {% if paginator.next_page %}
            <a href='{{ paginator.next_page_path | prepend: site.baseurl }}' class='next'>Next</a>
        {% endif %}
    </div>
{% endif %}

解决方法

您需要为需要省略号的位置添加一些条件。这是未经测试的，但它可能会让你开始：

<div class="pagination">
  {% if paginator.total_pages > 1 %}
    <ul>
      {% if paginator.previous_page %}
        <li><a href="{{ paginator.previous_page_path | replace: '//','/' }}">&lt;</a></li>
      {% endif %}

      {% for page in (1..paginator.total_pages) %}

        {% assign last_five = forloop.length | minus: 4 %}
        {% assign last_page = forloop.length %}

        {% if forloop.length > 5 %}

          {% if paginator.page <= 5 %}

            {% if forloop.index <= 5 %}
              {% if forloop.first and page == paginator.page %}
                <li class="current-page"><span>{{ page }}</span></li>
              {% elsif forloop.first %}
                <li><a href="{{ page_root }}">1</a></li>
              {% elsif page == paginator.page %}
                <li class="current-page"><span>{{ page }}</span></li>
              {% else %}
                <li><a href="{{ page_path | append: page }}">{{ page }}</a></li>
              {% endif %}
            {% else %}
              {% if paginator.page == 5 %}
                <li><a href="{{ page_path }}6">6</a></li>
              {% endif %}
              <li>…</li>
              <li><a href="{{ page_path | append: last_page }}">{{ last_page }}</a></li>
              {% break %}
            {% endif %}

          {% elsif paginator.page >= last_five %}

            {% if forloop.index >= last_five %}
              {% if forloop.index == last_five %}
                <li><a href="{{ page_root }}">1</a></li>
                <li>…</li>
                {% if page == last_five %}
                  <li><a href="{{ page_path }}{{ page | minus: 1 }}">{{ page | minus: 1 }}</a></li>
                {% endif %}
                {% if page == paginator.page %}
                  <li class="current-page"><span>{{ page }}</span></li>
                {% else %}
                  <li><a href="{{ page_path | append: page }}">{{ page }}</a></li>
                {% endif %}
              {% elsif forloop.last and page == paginator.page %}
                <li class="current-page"><span>{{ page }}</span></li>
              {% elsif page == paginator.page %}
                <li class="current-page"><span>{{ page }}</span></li>
              {% else %}
                <li><a href="{{ page_path | append: page }}">{{ page }}</a></li>
              {% endif %}
            {% endif %}


          {% else %}

            {% if forloop.first %}
              <li><a href="{{ page_root }}">1</a></li>
            {% endif %}
            {% if forloop.index == paginator.page | minus: 2 %}
              <li>…</li>
              <li><a href="{{ page | minus: 2 | prepend: page_path }}">{{ page | minus: 2 }}</a></li>
            {% endif %}
            {% if forloop.index == paginator.page | minus: 1 %}
              <li><a href="{{ page | minus: 1 | prepend: page_path }}">{{ page | minus: 1 }}</a></li>
            {% endif %}
            {% if page == paginator.page %}
              <li class="current-page"><span>{{ page }}</span></li>
            {% endif %}
            {% if forloop.index == paginator.page | plus: 1 %}
              <li><a href="{{ page | plus: 1 | prepend: page_path }}">{{ page | plus: 1 }}</a></li>
            {% endif %}
            {% if forloop.index == paginator.page | plus: 2 %}
              <li><a href="{{ page | plus: 2 | prepend: page_path }}">{{ page | plus: 2 }}</a></li>
              <li>…</li>
            {% endif %}
            {% if forloop.last %}
              <li><a href="{{ page_path | append: forloop.index }}">{{ forloop.index }}</a></li>
            {% endif %}

          {% endif %}

        {% else %}

          {% if page == paginator.page %}
            <li class="current-page"><span>{{ page }}</span></li>
          {% elsif page == 1 %}
            <li><a href="{{ page_root }}">{{ page }}</a></li>
          {% else %}
            <li><a href="{{ page_path | append: page }}">{{ page }}</a></li>
          {% endif %}

        {% endif %}

      {% endfor %}


      {% if paginator.next_page %}
        <li><a href="{{ paginator.next_page_path | replace: '//','/' }}">&gt;</a></li>
      {% endif %}
    </ul>
  {% endif %}
</div>