Add previous and next links to blog posts

dguo · Jun 25, 2018 · 5e8f017 · 5e8f017
1 parent 7a9d601
commit 5e8f017
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -8,9 +8,25 @@ <h1>{{ .Title }}</h1>
 
     {{ partial "anchor.html" .Content }}
 
-    <hr class="comments-separator">
+    <hr class="separator">
+
+    <div class="clearfix">
+        {{ with .PrevInSection }}
+            <span class="previous-link">
+                <a href="{{ .Permalink }}">← {{ .Title }}</a>
+            </span>
+        {{ end }}
+
+        {{ with .NextInSection }}
+            <span class="next-link">
+                <a href="{{ .Permalink }}">{{ .Title }} →</a>
+            </span>
+        {{ end }}
+    </div>
+
+    <hr class="separator">
 
     {{ template "_internal/disqus.html" . }}
 
-    <div class="comments-separator">
+    <div class="separator">
 {{ end }}
diff --git a/static/css/general.css b/static/css/general.css
@@ -84,12 +84,12 @@ hr {
   border: 1px solid #eee;
 }
 
-hr.comments-separator {
-  margin-bottom: 50px;
+hr.separator {
+  margin-bottom: 25px;
 }
 
-.comments-separator {
-  margin-top: 40px;
+.separator {
+  margin-top: 25px;
 }
 
 footer {

diff --git a/static/css/post.css b/static/css/post.css
@@ -7,3 +7,15 @@ h1 {
   font-size: 0.9em;
   margin-bottom: 2em;
 }
+
+.previous-link {
+  float: left;
+  text-align: left;
+  width: 48%;
+}
+
+.next-link {
+  float: right;
+  text-align: right;
+  width: 48%;
+}