Add links to next/previous article on article page

pelicanconf.py

@@ -15,7 +15,7 @@ else:
     THEME = 'themes/rusted'
 
 PLUGIN_PATHS = ["plugins"]
-PLUGINS = ['assets']
+PLUGINS = ['assets', 'neighbors']
 
 TIMEZONE = 'America/New_York'
 

plugins/neighbors/__init__.py

@@ -0,0 +1 @@
+from .neighbors import *

plugins/neighbors/neighbors.py

@@ -0,0 +1,68 @@
+# -*- coding: utf-8 -*-
+"""
+Neighbor Articles Plugin for Pelican
+====================================
+
+This plugin adds ``next_article`` (newer) and ``prev_article`` (older)
+variables to the article's context.
+
+Adapted from: https://github.com/getpelican/pelican-plugins/blob/master/neighbors/neighbors.py
+"""
+from collections import namedtuple
+
+from pelican import signals
+
+Neighbors = namedtuple('Neighbors', ['next', 'current', 'previous'])
+
+
+def iter_neighbors(seq):
+    """Yields Neighbors for every article."""
+    iterator = iter(seq)
+    nxt = None
+    current = next(iterator)
+    for previous in iterator:
+        yield Neighbors(next=nxt, current=current, previous=previous)
+        nxt, current = current, previous
+    yield Neighbors(next=nxt, current=current, previous=None)
+
+
+def get_translation(article, preferred_language):
+    if not article:
+        return None
+    for translation in article.translations:
+        if translation.lang == preferred_language:
+            return translation
+    return article
+
+
+def set_neighbors(articles, next_name, prev_name):
+    for neighbor in iter_neighbors(articles):
+        setattr(neighbor.current, next_name, neighbor.next)
+        setattr(neighbor.current, prev_name, neighbor.previous)
+        for translation in neighbor.current.translations:
+            setattr(
+                translation,
+                next_name,
+                get_translation(neighbor.next, translation.lang),
+            )
+            setattr(
+                translation,
+                prev_name,
+                get_translation(neighbor.previous, translation.lang),
+            )
+
+
+def neighbors(generator):
+    set_neighbors(generator.articles, 'next_article', 'prev_article')
+
+    for category, articles in generator.categories:
+        articles.sort(key=lambda x: x.date, reverse=True)
+        set_neighbors(
+            articles,
+            'next_article_in_category',
+            'prev_article_in_category',
+        )
+
+
+def register():
+    signals.article_generator_finalized.connect(neighbors)

themes/rusted/static/css/_layout.scss

@@ -130,6 +130,59 @@ body > footer {
     }
 }
 
+.post-neighbors {
+    font-size: 16px;
+    margin-top: 15px;
+    &::after {
+        content: " ";
+        display: block;
+        clear: both;
+    }
+    $arrow-margin: 6px;
+
+    .neighbor {
+        display: inline-flex;
+        align-items: center;
+        line-height: 1.25;
+        color: $grey-colour-dark;
+        &:hover {
+            text-decoration: none;
+            .neighbor-title {
+                text-decoration: underline;
+            }
+        }
+
+        &.prev-article {
+            float: left;
+            .neighbor-arrow {
+                margin-right: $arrow-margin;
+            }
+        }
+        &.next-article {
+            float: right;
+            text-align: right;
+            .neighbor-arrow {
+                margin-left: $arrow-margin;
+            }
+        }
+
+        .neighbor-arrow {
+            font-size: 24px;
+            display: inline-block;
+        }
+        .neighbor-content {
+            display: inline-block;
+
+            .neighbor-label {
+                display: block;
+            }
+            .neighbor-title {
+                color: $brand-color;
+            }
+        }
+    }
+}
+
 blockquote p {
   white-space: pre-line;
 }

themes/rusted/templates/article.html

@@ -26,6 +26,7 @@
     {{ article.content }}
   </article>
 
+  {% include 'neighbors.html' %}
 </div>
 
 <div class="row text-center">

themes/rusted/templates/neighbors.html

@@ -0,0 +1,23 @@
+{% if article.next_article or article.prev_article %}
+<nav class="post-neighbors">
+  {% if article.prev_article %}
+  <a  class="neighbor prev-article" href="{{ SITEURL }}/{{ article.prev_article.url }}">
+    <span class="neighbor-arrow">«</span>
+    <span class="neighbor-content">
+      <span class="neighbor-label">Previous:</span>
+      <span class="neighbor-title">{{ article.prev_article.title }}</span>
+    </span>
+  </a>
+  {% endif %}
+
+  {% if article.next_article %}
+  <a class="neighbor next-article" href="{{ SITEURL }}/{{ article.next_article.url }}">
+    <span class="neighbor-content">
+      <span class="neighbor-label">Next:</span>
+      <span class="neighbor-title">{{ article.next_article.title }}</span>
+    </span>
+    <span class="neighbor-arrow">»</span>
+  </a>
+  {% endif %}
+</nav>
+{% endif %}