This website contains various types of blogs, both technical and non-technical, that can be accessed through the following links: blog, notes, and desk. I wanted to have a single page where I could see all the posts I have written on this website and track my blogging progress. That’s why I created this feed page, where you can find all my blogs from this website.
Let’s break down how I created the feed page.
- Created an
_index.mdpage in thecontent/feedfolder . - Created a template in
/layouts/section/feed.htmlwith{{range .Site.RegularPages }}.
Yes that’s it. It will give you feed page where every blogs from every folder is listed in chronogical order.
Below is the _index.md and feed.html page for easy reference.
_index.md
---
type : "tags"
Title: "Feed"
Subtitle: "Listing all the posts in chronological order."
---
feed.html
{{ define "main" }}
<div class="container" role="main">
<div class="row">
<div class="col-md-12">
{{ with .Content }}
<div class="well">
{{.}}
</div>
{{ end }}
</div>
<div class="row justify-content-center">
{{ $paginator := .Paginate .Site.RegularPages}}
{{ range $paginator.Pages }}
// Partial page to display the contents
{{ partial "post_preview_card_list.html" .}}
{{ end }}
</div>
</div>
</div>
<div class="container">
<div class="row font-sans">
<div class="col-md-12 mt-10">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
{{ template "_internal/pagination.html" . }}
</ul>
</nav>
</div>
</div>
</div>
{{ end }}
Hope you understood how we can create a feed page in Hugo. For getting the code for post_preview_card_list partial you can download my hugo theme.
Use the share button below if you liked it.
It makes me smile, when I see it.