Add Pagination to Articles

cogs-web-development-and-hosting · Jun 26, 2019 · b556230 · b556230
1 parent dfacef9
commit b556230
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/_config.yml b/_config.yml
@@ -36,6 +36,10 @@ author:
 # vimeo         : your_username
 # youtube       : your_channel_name
 
+# Pagination
+paginate: 6
+paginate_path: "/articles/page-:num/"
+
 # Collections
 collections:
   projects:

diff --git a/_includes/articles.html b/_includes/articles.html
@@ -1,6 +1,6 @@
 <div class="card-group mt-2">
 
-  {% for post in site.posts %}
+  {% for post in paginator.posts %}
 
     {% comment %} Default Styles {% endcomment %}
     {% assign card_style = '' %}
@@ -54,4 +54,23 @@ <h3 class="card-title">{{ post.title }}</h3>
 
   {% endfor %}
 
+  <!-- Pagination links -->
+	<div class="mx-auto my-3">
+
+		{% if paginator.previous_page %}
+			<a href="{{ paginator.previous_page_path | relative_url }}" class="badge badge-primary"><</a>
+		{% else %}
+			<span class="badge badge-light text-muted"><</span>
+		{% endif %}
+
+		<small class="mx-2"> Page <b>{{ paginator.page }}</b> of {{ paginator.total_pages }} </small>
+
+		{% if paginator.next_page %}
+			<a href="{{ paginator.next_page_path | relative_url }}" class="badge badge-primary">></a>
+		{% else %}
+			<span class="badge badge-light text-muted">></span>
+		{% endif %}
+
+  </div>
+
 </div>
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -11,7 +11,9 @@
       {% assign pages = site.html_pages | sort: 'weight' %}
       {% for site_page in pages %}
         {% if site_page.title %}
+        {% unless site_page.url contains 'page' %}
           <a class="nav-item nav-link {% if page.url contains site_page.url %} active {% endif %}" href="{% if site_page.external_url %} {{ site_page.external_url }} {% else %} {{ site_page.url | relative_url }} {% endif %}">{{ site_page.title }}</a>
+        {% endunless %}
         {% endif %}
       {% endfor %}
     </div>

diff --git a/pages/articles.html → articles/index.html b/pages/articles.html → articles/index.html
@@ -1,7 +1,6 @@
 ---
 layout: default
 title: Articles
-permalink: /articles/
 weight: 2
 ---