Add ellipses to pagination using Jekyll-Paginate-v2

user_1020326 0
Viewed 140

I'm using Jekyll-Paginate-v2 and their Pagination Trails to create pagination for my blog. I have everything working but wanted to add some ellipses to indicate more pages. When you're on the first page, the last page should show at the end with ellipses in front, and after passing a certain number of pages, the first page should show with ellipses as well. If you get to the last page the ellipses should disappear.

Example:

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

Pagination w/ Trails

{% 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 %}
jekyll
2 Answers

You'll need to add some conditionals for where you want those ellipses. This is untested, but it might get you started:

<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>
user_39218150

First I'd like to thank Brad West who provided the base, thank you.

Attention: Tested only on standard github pages dependency, not tested on v2, not tested outside of github pages dependency.

The code below is working perfectly on gitgub pages (Jekyll v3.9.2), so far I have not found bugs.

I could have spent more time and improved the code, but it's already working as it should, so I'm not going to waste any more time on it.

Result: before and after.

before and after

_config.yml
    paginate: 10
    paginate_path: /page/:num/


.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}
.pagination a,
.pagination span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #efefef;
    border-left: 0;
}
.pagination .active {
    background: #f3f3f3;
    pointer-events: none;
}
.pagination .active svg {
    opacity: .3;
}
.pagination a:hover {
    background: #f3f3f3;
    cursor: pointer;
}
.pagination a:first-child,
.pagination span:first-child {
    border-left: 1px solid #efefef;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.pagination a:last-child,
.pagination span:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
{% if paginator.total_pages > 1 %}
    <div class="pagination">
    {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">
        <svg width="8" height="16" viewBox="0 0 8 13">
            <g fill="none" stroke="none" stroke-width="1" fill-rule="evenodd">
                <g transform="translate(1.000000, 1.000000)" stroke="currentColor" stroke-width="2">
                    <polyline transform="translate(3.500000, 5.507797) rotate(90.000000) translate(-3.500000, -5.507797)" points="-1.5 3 3.5155939 8.0155939 8.5 3.0311879"></polyline>
                </g>
            </g>
        </svg>
    </a>
    {% else %}
    <span class="active">
        <svg width="8" height="16" viewBox="0 0 8 13">
            <g fill="none" stroke="none" stroke-width="1" fill-rule="evenodd">
                <g transform="translate(1.000000, 1.000000)" stroke="currentColor" stroke-width="2">
                    <polyline transform="translate(3.500000, 5.507797) rotate(90.000000) translate(-3.500000, -5.507797)" points="-1.5 3 3.5155939 8.0155939 8.5 3.0311879"></polyline>
                </g>
            </g>
        </svg>
    </span>
    {% 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 %}
                    <span class="active">{{ page }}</span>
                {% elsif forloop.first %}
                    <a href="/">1</a>
                {% elsif page == paginator.page %}
                    <span class="active">{{ page }}</span>
                {% else %}
                    <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
                {% endif %}
            {% else %}
                {% if paginator.page == 5 %}
                    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
                {% endif %}
                    <span>...</span>
                    <a href="/page/{{ last_page }}/">{{ last_page }}</a>
                {% break %}
            {% endif %}
        {% elsif paginator.page >= last_five %}
            {% if forloop.index >= last_five %}
                {% if forloop.index == last_five %}
                    <a href="/">1</a>
                    <span>...</span>
                {% if page == last_five %}
                    <a href="/page/{{ page | minus: 1 }}/">{{ page | minus: 1 }}</a>
                {% endif %}
                {% if page == paginator.page %}
                    <span class="active">{{ page }}</span>
                {% else %}
                    <a href="/page/{{ page }}/">{{ page }}</a>
                {% endif %}
                {% elsif forloop.last and page == paginator.page %}
                    <span class="active">{{ page }}</span>
                {% elsif page == paginator.page %}
                    <span class="active">{{ page }}</span>
                {% else %}
                    <a href="/page/{{ page }}/">{{ page }}</a>
                {% endif %}
            {% endif %}
        {% else %}
            {% if forloop.first %}
                <a href="/">1</a>
            {% endif %}
            {% if forloop.index == paginator.page | minus: 2 %}
                <span>...</span>
                <a href="/page/{{ page | minus: 2 }}/">{{ page | minus: 2 }}</a>
            {% endif %}
            {% if forloop.index == paginator.page | minus: 1 %}
                <a href="/page/{{ page | minus: 1 }}/">{{ page | minus: 1 }}</a>
            {% endif %}
            {% if page == paginator.page %}
                <span class="active">{{ page }}</span>
            {% endif %}
            {% if forloop.index == paginator.page | plus: 1 %}
                <a href="/page/{{ page | plus: 1 }}/">{{ page | plus: 1 }}</a>
            {% endif %}
            {% if forloop.index == paginator.page | plus: 2 %}
                <a href="/page/{{ page | plus: 2 }}/">{{ page | plus: 2 }}</a>
                <span>...</span>
            {% endif %}
            {% if forloop.last %}
                <a href="/page/{{ forloop.index }}/">{{ forloop.index }}</a>
            {% endif %}
          {% endif %}
        {% else %}
        {% if page == paginator.page %}
            <span class="active">{{ page }}</span>
        {% elsif page == 1 %}
            <a href="/">{{ page }}</a>
        {% else %}
            <a href="/page/{{ page }}/">{{ page }}</a>
        {% endif %}
        {% endif %}
    {% endfor %}
    {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">
        <svg width="8" height="16" viewBox="0 0 8 13">
            <g fill="none" stroke="none" stroke-width="1" fill-rule="evenodd">
                <g transform="translate(-2.000000, 4.000000)" stroke="currentColor" stroke-width="2">
                    <polyline transform="translate(5.500000, 2.500000) rotate(90.000000) translate(-5.500000, -2.500000)" points="10.5 5 5.5 6.66133815e-16 0.5 5"></polyline>
                </g>
            </g>
        </svg>
    </a>
    {% else %}
    <span class="active">
        <svg width="8" height="16" viewBox="0 0 8 13">
            <g fill="none" stroke="none" stroke-width="1" fill-rule="evenodd">
                <g transform="translate(-2.000000, 4.000000)" stroke="currentColor" stroke-width="2">
                    <polyline transform="translate(5.500000, 2.500000) rotate(90.000000) translate(-5.500000, -2.500000)" points="10.5 5 5.5 6.66133815e-16 0.5 5"></polyline>
                </g>
            </g>
        </svg>
    </span>
    {% endif %}
</div>
{% endif %}

user_95376490
Related