Truncate pagination links with [...] to avoid long lists

mmistakes · Dec 2, 2015 · 790781b · 790781b
1 parent dfaf869
commit 790781b
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 34 deletions.
diff --git a/_includes/pagination.html b/_includes/pagination.html
@@ -0,0 +1,66 @@
+{% if paginator.total_pages > 1 %}
+<div class="pagination">
+  <ul class="inline-list">
+    {% comment %} Link for previous page {% endcomment %}
+    {% if paginator.previous_page %}
+      {% if paginator.previous_page == 1 %}
+        <li><a href="{{ site.url }}" class="btn">Previous</a></li>
+      {% else %}
+        <li><a href="{{ site.url }}/page{{ paginator.previous_page }}/" class="btn">Previous</a></li>
+      {% endif %}
+    {% endif %}
+
+    {% comment %} First page {% endcomment %}
+    {% if paginator.page == 1 %}
+      <li><strong class="current-page">1</strong></li>
+    {% else %}
+      <li><a href="{{ site.url }}">1</a></li>
+    {% endif %}
+
+    {% assign page_start = 2 %}
+    {% if paginator.page > 4 %}
+      {% assign page_start = paginator.page | minus: 2 %}
+      {% comment %} Ellipsis for truncated links {% endcomment %}
+      <li>…</li>
+    {% endif %}
+
+    {% assign page_end = paginator.total_pages | minus: 1 %}
+    {% assign pages_to_end = paginator.total_pages | minus: paginator.page %}
+    {% if pages_to_end > 4 %}
+      {% assign page_end = paginator.page | plus: 2 %}
+    {% endif %}
+
+    {% for index in (page_start..page_end) %}
+      {% if index == paginator.page %}
+        <li><strong class="current-page">{{index}}</strong></li>
+      {% else %}
+        {% comment %} Distance from current page and this link {% endcomment %}
+        {% assign dist = paginator.page | minus: index %}
+        {% if dist < 0 %}
+          {% comment %} Distance must be a positive value {% endcomment %}
+          {% assign dist = 0 | minus: dist %}
+        {% endif %}
+        <li><a href="{{ site.url }}/page{{ index }}/">{{index}}</a></li>
+      {% endif %}
+    {% endfor %}
+
+    {% comment %} Ellipsis for truncated links {% endcomment %}
+    {% if pages_to_end > 3 %}
+      <li>…</li>
+    {% endif %}
+
+    {% if paginator.page == paginator.total_pages %}
+      <li><strong class="current-page">{{ paginator.page }}</strong></li>
+    {% else %}
+      <li><a href="{{ site.url }}/page{{ paginator.total_pages }}/">{{ paginator.total_pages }}</a></li>
+    {% endif %}
+
+    {% comment %}
+      Link next page
+    {% endcomment %}
+    {% if paginator.next_page %}
+      <li><a href="{{ site.url }}/page{{ paginator.next_page }}/" class="btn">Next</a></li>
+    {% endif %}
+  </ul>
+</div>
+{% endif %}
diff --git a/index.html b/index.html
@@ -39,37 +39,4 @@ <h1 class="entry-title"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" ti
 </article><!-- /.hentry -->
 {% endfor %}
 
-<div class="pagination">
-  {% if paginator.previous_page %}
-    {% if paginator.previous_page == 1 %}
-      <a href="{{ site.url }}" class="btn">Previous</a>
-    {% else %}
-      <a href="{{ site.url }}/page{{ paginator.previous_page }}" class="btn">Previous</a>
-    {% endif %}
-  {% else %}
-    Previous
-  {% endif %}
-  <ul class="inline-list">
-    <li>
-      {% if paginator.page == 1 %}
-        <span class="current-page">1</span>
-      {% else %}
-        <a href="{{ site.url }}">1</a>
-      {% endif %}
-    </li>
-    {% for count in (2..paginator.total_pages) %}
-      <li>
-        {% if count == paginator.page %}
-          <span class="current-page">{{ count }}</span>
-        {% else %}
-          <a href="{{ site.url }}/page{{ count }}">{{ count }}</a>
-        {% endif %}
-      </li>
-    {% endfor %}
-  </ul>
-  {% if paginator.next_page %}
-    <a href="{{ site.url }}/page{{ paginator.next_page }}" class="btn">Next</a>
-  {% else %}
-    Next
-  {% endif %}
-</div><!-- /.pagination -->
+{% include pagination.html %}