Merge pull request #141 from Mitrichius/see-next-section/#44

Mitrichius · web-flow · commit 8e618548dad3 · 2022-02-18T14:44:40.000+03:00
Add See Next section
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ Anubis is a simple minimalist theme for [Hugo blog engine](https://gohugo.io/).
 - ISSO
 - Utteranc.es
 - RSS feeds
+- Related posts (Read Next section)
 - Deploy via Netlify (config included in example site)
 - Hiding posts from the RSS feed
 - Hidden posts (available only by link)
@@ -82,7 +83,8 @@ params:
   dateFormat: "2006-01-02"
   paginationSinglePost: true
   style: light-without-switcher
-  readMore: false
+  readMore: false # show read more button
+  readNextPosts: 5  # show 5 related posts, 0 by default
   disableSummary: false
   copyCodeButton: true # true by default
   rssAsSocialIcon: true
@@ -216,6 +218,9 @@ For production — allow all, for other — disallow all.
 ### Favorite posts
 Add `favorite: true` to post front matter. It adds a "★" icon nearby post's title. 
 
+### Related posts (Read Next section)
+Based on `readNextPosts` config parameter. Check [this article](https://gohugo.io/content-management/related/#configure-related-content) for configuration details.
+
 ### Hiding posts from RSS
 Add `disable_feed: true` to post front matter.
 
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -556,6 +556,16 @@ article figcaption {
     color: var(--link-state-color);
 }
 
+.read-next-title {
+    margin-bottom:  0;
+}
+
+.read-next-posts {
+    margin-top:  5px;
+    list-style-type:"- ";
+    padding-inline-start: 20px;
+}
+
 /* Other pages */
 .terms {
     list-style-type: none;
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -17,6 +17,7 @@ dateFormat = "2006-01-02"
 paginationSinglePost = true
 style = "auto"
 readMore = false
+readNextPosts = 2
 copyCodeButton = true
 rssAsSocialIcon = true
 
diff --git a/exampleSiteMultilingual/config.toml b/exampleSiteMultilingual/config.toml
@@ -18,6 +18,7 @@ dateFormat = "2006-01-02"
 paginationSinglePost = true
 style = "auto"
 readMore = false
+readNextPosts = 2
 copyCodeButton = true
 rssAsSocialIcon = true
 
diff --git a/i18n/de.yaml b/i18n/de.yaml
@@ -42,3 +42,6 @@ darkTheme:
 
 lightTheme:
   other: "Helles Theme"
+
+readNext:
+  other: "Weiter lesen"
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -42,3 +42,6 @@ darkTheme:
 
 lightTheme:
   other: "Light theme"
+
+readNext:
+  other: "Read next"
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
@@ -42,3 +42,6 @@ darkTheme:
 
 lightTheme:
   other: "Thème clair"
+
+readNext:
+  other: "Lire la suite"
diff --git a/i18n/pl.yaml b/i18n/pl.yaml
@@ -42,3 +42,6 @@ darkTheme:
 
 lightTheme:
   other: "Jasny schemat"
+
+readNext:
+  other: "Czytaj dalej"
diff --git a/i18n/pt.yaml b/i18n/pt.yaml
@@ -41,4 +41,7 @@ darkTheme:
   other: "Tema Escuro"
 
 lightTheme:
-  other: "Tema Claro"
+  other: "Tema Claro"
+
+readNext:
+  other: "Leia a seguir"
diff --git a/i18n/ru.yaml b/i18n/ru.yaml
@@ -42,3 +42,6 @@ darkTheme:
 
 lightTheme:
   other: "Светлая тема"
+
+readNext:
+  other: "Читать далее"
diff --git a/i18n/tw.yaml b/i18n/tw.yaml
@@ -42,3 +42,6 @@ darkTheme:
 
 lightTheme:
   other: "亮色主題"
+
+readNext:
+  other: "閱讀下一篇"
diff --git a/i18n/zh-cn.yaml b/i18n/zh-cn.yaml
@@ -41,4 +41,7 @@ darkTheme:
   other: "暗色主题"
 
 lightTheme:
-  other: "亮色主题"
+  other: "亮色主题"
+
+readNext:
+  other: "继续阅读"
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -21,6 +21,18 @@ <h1 class="p-name post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Para
         {{ partial "post-info.html" . }}
     </article>
 
+    {{ if gt .Site.Params.readNextPosts 0 }}
+        {{ $related := .Site.RegularPages.Related . | first .Site.Params.readNextPosts }}
+        {{ with $related }}
+            <h3 class="read-next-title">{{ i18n "readNext" }}</h3>
+            <ul class="read-next-posts">
+                {{ range . }}
+                <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+                {{ end }}
+            </ul>
+        {{ end }}
+    {{ end }}
+
     {{ if and (.Site.Params.paginationSinglePost) (ne .Type "page") }}
         {{ partial "post-pagination.html" . }}
     {{ end }}
