Add related content section to single page (#77)

Set `relatedPosts` to `true` in the config to enable this.

assets/scss/style.scss

@@ -687,6 +687,25 @@ hr.post-end {
   }
 }
 
+.related-posts {
+  padding: .8em;
+  margin-top: 1.5em;
+  font-size: .8rem;
+  border: 3px dashed rgba(255, 255, 255, .2);
+  border-radius: 5px;
+
+  h2{
+    margin: 0;
+    line-height: normal;
+  }
+
+  ul {
+    margin-top: .5em;
+    margin-bottom: 0;
+  }
+}
+
+
 // Media Queries
 //
 @media (min-width: 800px) {

exampleSite/config.toml

@@ -46,6 +46,8 @@ enableEmoji = true  # Shorthand emojis in content files - https://gohugo.io/func
   # Toggling this option needs to rebuild SCSS, requires Hugo extended version
   justifyContent = false  # Set "text-align: justify" to `.content`.
 
+  relatedPosts = false  # Add a related content section to all single posts page
+
   # Add custom css
   # customCSS = ["css/foo.css", "css/bar.css"]
 

i18n/en.toml

@@ -14,6 +14,9 @@ other = "Archives"
 
 # posts/single.html
 #
+[seeAlso]
+other = "See Also"
+
 [wordCount]
 other = "{{ .WordCount }} Words"
 

i18n/zh-hans.toml

@@ -14,6 +14,9 @@ other = "归档"
 
 # posts/single.html
 #
+[seeAlso]
+other = "相关推荐"
+
 [wordCount]
 other = "{{ .WordCount }} 字"
 

layouts/partials/related-posts.html

@@ -0,0 +1,11 @@
+{{- $related := .Site.RegularPages.Related . | first 5 }}
+{{ with $related }}
+<div class="related-posts thin">
+	<h2>{{ i18n "seeAlso" }}</h2>
+	<ul>
+	{{ range . }}
+	<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+	{{ end }}
+	</ul>
+</div>
+{{ end -}}

layouts/posts/single.html

@@ -25,6 +25,9 @@
 			<div class="content">
 				{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
 			</div>
+			{{- if .Site.Params.relatedPosts }}
+			{{- partial "related-posts.html" . -}}
+			{{- end }}
 			<hr class="post-end">
 			<footer class="post-info">
 				{{- with .Params.tags }}

resources/_gen/assets/scss/scss/style.scss_c16d144eee185fbddd582cd5e25a4fae.json

@@ -1 +1 @@
-{"Target":"css/style.min.d979d8f818e47a9821dee69a30ab80ccf745d990f992a4d3f8cb529d03642480.css","MediaType":"text/css","Data":{"Integrity":"sha256-2XnY+Bjkepgh3uaaMKuAzPdF2ZD5kqTT+MtSnQNkJIA="}}
+{"Target":"css/style.min.183d31ccbed0fd59293d435028691de8635f709926a69d5df7c744cc5ebf42a3.css","MediaType":"text/css","Data":{"Integrity":"sha256-GD0xzL7Q/VkpPUNQKGkd6GNfcJkmpp1d98dEzF6/QqM="}}