pagination with jekyll-paginate-v2

Author: gasparnagy

Gemfile

@@ -9,6 +9,7 @@ gem "minima", "~> 2.5"
 
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.17"
+  gem "jekyll-paginate-v2", "~> 3.0"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -64,6 +64,8 @@ GEM
       webrick (~> 1.7)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
+    jekyll-paginate-v2 (3.0.0)
+      jekyll (>= 3.0, < 5.0)
     jekyll-sass-converter (3.1.0)
       sass-embedded (~> 1.75)
     jekyll-seo-tag (2.8.0)
@@ -138,6 +140,7 @@ DEPENDENCIES
   http_parser.rb (~> 0.6.0)
   jekyll (~> 4.4.1)
   jekyll-feed (~> 0.17)
+  jekyll-paginate-v2 (~> 3.0)
   minima (~> 2.5)
   tzinfo (>= 1, < 3)
   tzinfo-data

_config.yml

@@ -25,6 +25,7 @@ google_analytics: GT-K4CTF7X
 theme: minima
 plugins:
   - jekyll-feed
+  - jekyll-paginate-v2
 
 include: ['_pages']
 permalink: pretty
@@ -35,6 +36,17 @@ defaults:
     values:
       permalink: /:categories/:year/:month/:title/
 
+# See https://github.com/sverrirs/jekyll-paginate-v2/blob/master/README-GENERATOR.md
+pagination:
+  enabled: true
+  debug: true
+  per_page: 2
+  # The permalink structure for the paginated pages (this can be any level deep)
+  permalink: '/page/:num/' # Pages are index.html inside this folder (default)
+  #permalink: '/page/:num.html' # Pages are simple html files 
+  #permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.
+
+
 exclude:
   - README.md
   - LICENSE

_pages/news.html

@@ -2,30 +2,39 @@
 layout: page
 title: "News"
 permalink: /news/
+pagination: 
+  enabled: true
+  category: News
+  sort_reverse: true
+  permalink: '/:num/'
 ---
 
 <h2 class="wp-block-heading">Check out our recent news &amp; insights</h2>
 
 <div class="wp-block-query is-layout-flow wp-block-query-is-layout-flow">
   <ul
     class="columns-3 wp-block-post-template is-layout-grid wp-container-core-post-template-is-layout-1 wp-block-post-template-is-layout-grid">
-    {% for post in site.categories.News %}
+    {% for post in paginator.posts %}
     <li
       class="wp-block-post post-350 post type-post status-publish format-standard has-post-thumbnail hentry category-news">
 
       <div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-7 wp-block-group-is-layout-flow"
         style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px">
+        {% if post.featured_image %}
         <figure style="height:200px; margin-bottom:var(--wp--preset--spacing--small);"
-          class="wp-block-post-featured-image"><a
-            href="{{ post.url | relative_url }}" target="_self"
-            style="height:200px"><img fetchpriority="high" decoding="async" width="1530" height="520"
+          class="wp-block-post-featured-image"><a href="{{ post.url | relative_url }}" target="_self"
+            style="height:200px"><img 
               src="{{ post.featured_image | prepend: '/assets/images/' | relative_url }}"
               class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
-              alt="SpecFlow end-of-life has been announced" style="border-radius:5px;height:200px;object-fit:cover;"
-              sizes="(max-width: 1530px) 100vw, 1530px"></a></figure>
+              alt="{{ post.title }}" style="border-radius:5px;height:200px;object-fit:cover;"></a>
+        </figure>
+        {% else %}
+        <div class="missing-image"></div>
+        {% endif %}
 
         <div class="taxonomy-category has-link-color wp-elements-82b5603708064b06546400967d8e01c5 wp-block-post-terms">
-          <a href="{{ site.url }}/news/" rel="tag">News</a></div>
+          <a href="{{ site.url }}/{{ post.categories | first | downcase }}/" rel="tag">{{post.categories | first}}</a>
+        </div>
 
         <h5 style="margin-bottom:var(--wp--preset--spacing--x-small);" class="wp-block-post-title"><a
             href="{{ post.url | relative_url }}" target="_self">{{ post.title }}</a></h5>
@@ -36,13 +45,31 @@ <h5 style="margin-bottom:var(--wp--preset--spacing--x-small);" class="wp-block-p
           <div class="wp-block-post-author-name has-x-small-font-size">{{ post.author }}</div>
 
           <hr
-											class="wp-block-separator has-text-color has-highlight-color has-alpha-channel-opacity has-highlight-background-color has-background is-style-default wp-container-content-3">
+            class="wp-block-separator has-text-color has-highlight-color has-alpha-channel-opacity has-highlight-background-color has-background is-style-default wp-container-content-3">
 
           <div class="wp-block-post-date">{{ post.date | date: "%B %-d, %Y" }}</div>
         </div>
       </div>
 
     </li>
     {% endfor %}
-    </ul>
+  </ul>
 </div>
+
+
+{% if paginator.total_pages > 1 %}
+<ul>
+  {% if paginator.previous_page %}
+  <li>
+    <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}">&larr; Newer</a>
+  </li>
+  {% endif %}
+  {% if paginator.next_page %}
+  <li>
+    <a href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older &rarr;</a>
+  </li>
+  {% endif %}
+</ul>
+{% endif %}
+
+<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>