Add post paginate navigation

zivong · Jul 16, 2020 · 061f114 · 061f114
1 parent 1e07ff0
commit 061f114
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -64,6 +64,20 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
         </ul>
       </div>
     {% endif %}
+
+    <nav class="post-pagination" role="navigation">
+      {% if page.previous %}
+        <a class="post-previous" href="{{ page.previous.url | relative_url }}">
+          <i class="fas fa-arrow-left"></i> {{ page.previous.title | markdownify | strip_html }}
+        </a>
+      {% endif %}
+
+      {% if page.next %}
+        <a class="post-next" href="{{ page.next.url | relative_url }}">
+          {{ page.next.title | markdownify | strip_html }} <i class="fas fa-arrow-right"></i>
+        </a>
+      {% endif %}
+    </nav>
   </footer>
 
   {% if page.comments != false and jekyll.environment == "production" %}

diff --git a/_sass/hamilton/layout.scss b/_sass/hamilton/layout.scss
@@ -401,6 +401,20 @@ ul.post-categories {
   }
 }
 
+.post-pagination {
+  @include relative-font-size(0.8);
+  display: flex;
+  justify-content: space-between;
+  padding-top: $spacing-unit / 2;
+  padding-bottom: $spacing-unit / 2;
+  border-top: 1px solid;
+
+  .post-previous
+  .post-next {
+    display: block;
+  }
+}
+
 
 // About font sizes for h1-h6, refer to https://stackoverflow.com/a/6140504/13261366
 .post-title,