fix: paginate recent posts and use params.mainSections

README.md

@@ -1,12 +1,15 @@
 # Ezhil
+
 Clean and minimal personal blog and portfolio theme for Hugo.
 
-# Demo
+## Demo
+
 [View demo](https://ezhil-hugo.netlify.com/)
 
 ![Screenshot](images/screenshot.png "Ezhil")
 
-# Features
+## Features
+
 * Clean and minimal
 * Responsive
 * Supports tags
@@ -17,7 +20,8 @@ Clean and minimal personal blog and portfolio theme for Hugo.
 * Disqus comments
 * Hugo RSS feeds
 
-# Installation
+## Installation
+
 From your Hugo site run the following.
 
 ```sh
@@ -27,7 +31,8 @@ git clone https://github.com/vividvilla/ezhil.git
 
 For more information read the [official setup guide](https://gohugo.io/overview/installing/) of Hugo.
 
-# Configuration
+## Configuration
+
 ```toml
 baseURL = "http://example.org/"
 languageCode = "en-us"
@@ -44,17 +49,18 @@ googleAnalytics = "UA-123-45"
 # Your Disqus sortname.
 disqusShortname = "localhost"
 
+# Number of posts to show in recent posts list (Optional). Defaults to 10.
+paginate = 10
+
 [params]
-	# Blog subtitle which appears below blog title. Supports markdown.
+    # Blog subtitle which appears below blog title. Supports markdown.
-	subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
+    subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
-	# Number of posts to show in recent posts list (Optional). Defaults to 10.
+    # Content types which are included in home page recent posts list.
-	recentPostsCount = 10
+    mainSections = ["posts"]
-	# Content types which are excluded from recent posts and archive page (Optional). Defaults to ["page"]
+    # Content types which are excludes Disqus comments.
-	excludedTypes = ["page"]
+    disableDisqusTypes = ["page"]
-	# Content types which are excludes Disqus comments (Optional). Defaults to ["page"]
+    # If social media links are enabled then enable this to fetch icons from CDN instead of hosted on your site.
-	disableDisqusTypes = ["page"]
+    featherIconsCDN = true
-	# If social media links are enabled then enable this to fetch icons from CDN instead of hosted on your site.
-	featherIconsCDN = true
 
 # Main menu which appears below site header.
 [[menu.main]]
@@ -94,10 +100,11 @@ url = "https://twitter.com/gohugoio"
    tag = "tags"
 ```
 
-# Content type
+## Content type
-You can specify content type with field `type` in your content. For example static pages can be set as type `page` which are excluded from recent posts and all posts page. You can use site params `excludedTypes` and `disableDisqusTypes` to control which page types are excluded from recent posts and Disqus comments respectively.
 
-```
+You can specify content type with field `type` in your content. For example static pages can be set as type `page` which are excluded from recent posts and all posts page. You can use site params `mainSections` and `disableDisqusTypes` to control which page types are excluded from recent posts and Disqus comments respectively.
+
+```md
 ---
 title: "About"
 date: 2019-04-19T21:37:58+05:30
@@ -107,10 +114,11 @@ type: "page"
 This is some static page where you can write about yourself.
 ```
 
-# Disable Disqus
+## Disable Disqus
+
 You can disable Disqus from contents selectively or for all contents with certain content type. Use content field `disqus` to disable Disqus from certain contents.
 
-```
+```md
 ---
 title: "Content without comments"
 date: 2019-04-19T21:37:58+05:30
@@ -122,6 +130,7 @@ This is a content without Disqus comments.
 
 You can also disable Disqus for certain content types by using site param `disableDisqusTypes`. You can check config section above for example.
 
-# Credits
+## Credits
+
 * [Feather Icons](https://feathericons.com/)
 * [Zen habits](https://zenhabits.net/) for demo content

exampleSite/config.toml

@@ -2,6 +2,7 @@ baseURL = "http://example.org/"
 languageCode = "en-us"
 title = "Ezhil"
 theme = "ezhil"
+paginate = 5
 
 pygmentsstyle = "vs"
 pygmentscodefences = true
@@ -11,11 +12,8 @@ googleAnalytics = "UA-123-45"
 disqusShortname = "localhost"
 
 [params]
+	mainSections = ["posts"]
 	subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
-	# Number of posts to show in recent posts list.
-	recentPostsCount = 10
-	# Content types which are excluded from recent posts and archive page.
-	excludedTypes = ["page"]
 	disableDisqusTypes = ["page"]
 	featherIconsCDN = true
 

layouts/_default/list.html

@@ -7,7 +7,7 @@
 		{{ partial "head.html" . }}
 
 		{{ if isset .Data "Term" }}
-			<h1>Entries tagged - "{{.Data.Term}}"</h1>
+			<h1>Entries tagged - "{{ .Data.Term }}"</h1>
 		{{ else }}
 			<h1 class="page-title">All articles</h1>
 		{{ end }}

layouts/_default/single.html

@@ -16,7 +16,7 @@
 
 		{{- $.Scratch.Set "isDisqus" true -}}
 
-		{{- if and (isset .Params "type") (in (.Site.Params.disableDisqusTypes | default (slice "page")) .Params.type) -}}
+		{{- if and (isset .Params "type") (in .Site.Params.disableDisqusTypes .Params.type) -}}
 		{{- $.Scratch.Set "isDisqus" false -}}
 		{{- end -}}
 

layouts/index.html

@@ -10,30 +10,24 @@
 				Recent posts
 			</h2>
 			<div class="posts">
-				{{- $.Scratch.Set "counter" 0 -}}
+				{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
-				{{- range .Data.Pages -}}
+				{{ $paginator := .Paginate (where $pages "Params.hidden" "ne" true) }}
-				{{- if (in (.Site.Params.excludedTypes | default (slice "page")) .Type) -}}
+				{{ range $paginator.Pages }}
-				{{- else -}}
-				{{- if lt ($.Scratch.Get "counter") (.Site.Params.RecentPostsCount | default 10) -}}
 				<div class="post">
 					<div class="meta">{{ dateFormat "Jan 2, 2006" .Date }}</div>
 					<a class="title" href="{{ .RelPermalink }}">{{.Title}}</a> &mdash;
 					<span class="description">
 						{{ if isset .Params "description" }}
-							{{ .Description }}
+						{{ .Description }}
 						{{ else if gt (len .RawContent) 120 }}
-							{{ slicestr .RawContent 0 120 }}...
+						{{ slicestr .RawContent 0 120 }}...
 						{{ else }}
-							{{ .RawContent }}
+						{{ .RawContent }}
 						{{ end }}
 					</span>
 				</div>
-				{{- $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) -}}
+				{{ end }}
-				{{- end -}}
+				{{ template "partials/paginator.html" . }}
-				{{- end -}}
-				{{- end -}}
-
-				<a href="/posts">All articles →</a>
 			</div>
 		</div>
 	</div>

layouts/partials/paginator.html

@@ -0,0 +1,15 @@
+{{ $pag := $.Paginator }}
+{{ if gt $pag.TotalPages 1 }}
+<ul class="pagination">
+	<li class="page-item page-prev">
+	{{ if $pag.HasPrev }}
+    <a {{ if $pag.HasPrev }}href="{{ $pag.Prev.URL }}"{{ end }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev page</span></a>
+	{{ end }}
+	</li>
+	<li class="page-item page-next">
+	{{ if $pag.HasNext }}
+    <a {{ if $pag.HasNext }}href="{{ $pag.Next.URL }}"{{ end }} class="page-link" aria-label="Next"><span aria-hidden="true">Next page →</span></a>
+	{{ end }}
+	</li>
+</ul>
+{{ end }}

static/css/main.css

@@ -284,6 +284,34 @@ ul {
     margin-right: 15px;
 }
 
+.pagination {
+	margin: 0;
+	padding: 0;
+	text-align: left;
+	display: flex;
+	justify-content: space-between;
+}
+
+.pagination li {
+	list-style: none;
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+
+.pagination .page-prev {
+	margin-right: 20px;
+	padding-right: 20px;
+}
+
+.pagination .page-item.page-prev {
+	text-align: left;
+}
+
+.pagination .page-item.page-next {
+	text-align: right;
+}
+
 @media (max-width: 767px) {
 	body {
 		padding: 20px;