Ver Fonte

Add blog post navigation

Track3 há 6 anos atrás
pai
commit
540377d62f
2 ficheiros alterados com 33 adições e 0 exclusões
  1. 21 0
      assets/scss/style.scss
  2. 12 0
      layouts/posts/single.html

+ 21 - 0
assets/scss/style.scss

@@ -479,6 +479,27 @@ figure.right {
   }
 }
 
+.post-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1.5em;
+  font-size: 1.2em;
+
+  a {
+    flex-basis: 50%;
+    flex-grow: 1;
+    border-bottom: transparent;
+  }
+
+  .prev-post {text-align: left; padding-right: 5px;}
+  .next-post {text-align: right; padding-left: 5px;}
+
+  .post-nav-label {
+    font-size: .8em;
+    opacity: .8;
+  }
+}
+
 // Comments
 //
 #comments-loader {

+ 12 - 0
layouts/posts/single.html

@@ -29,6 +29,18 @@
 				<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>{{ dateFormat .Site.Params.dateformFull .Date.Local }}</p>
 			</footer>
 		</article>
+		<div class="post-nav thin">
+			{{- with .PrevInSection }}
+			<a class="prev-post" href="{{ .Permalink }}">
+				<span class="post-nav-label"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>&nbsp;Prev</span><br><span>{{ .Title }}</span>
+			</a>
+			{{- end }}
+			{{- with .NextInSection }}
+			<a class="next-post" href="{{ .Permalink }}">
+				<span class="post-nav-label">Next&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span><br><span>{{ .Title }}</span>
+			</a>
+			{{- end }}
+		</div>
 		{{ partial "comments.html" . }}
 	</main>
 {{ end }}