Show related posts

assets/css/common/post-single.css

@@ -295,6 +295,18 @@
     margin-top: 56px;
 }
 
+.post-footer h3 {
+  margin: 2em 0 1.2em;
+}
+
+.post-footer .related ul  {
+    padding-inline-start: 20px;
+}
+
+.post-footer .related a:hover {
+  box-shadow: 0 1px;
+}
+
 .post-tags li {
     display: inline-block;
     margin-inline-end: 3px;

i18n/en.yaml

@@ -31,3 +31,6 @@
 
 - id: code_copied
   translation: "copied!"
+
+- id: related
+  translation: "See also"

i18n/fr.yaml

@@ -31,3 +31,6 @@
 
 - id: code_copied
   translation: "Copié !"
+
+- id: related
+  translation: "Voir aussi"

layouts/_default/single.html

@@ -36,6 +36,12 @@
   {{- end }}
 
   <footer class="post-footer">
+
+    {{/*  Show related posts  */}}
+    {{- if (.Param "ShowRelatedContent") }}
+      {{- partial "related.html" . }}
+    {{- end }}
+
     {{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
     <ul class="post-tags">
       {{- range ($.GetTerms $tags) }}

layouts/partials/related.html

@@ -0,0 +1,13 @@
+{{ $related := first 5 (where (where .Site.Pages ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
+{{ with $related }}
+  <div class="related">
+    <h3 class="see-also">{{- i18n "related" -}}</h3>
+    <ul>
+      {{ range . }}
+        <li>
+          <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+        </li>
+      {{ end }}
+    </ul>
+  </div>
+{{ end }}