Create a feed page to view all the posts

This website contains various types of blogs, both technical and non-technical, that can be accessed through the following links: blog, desk, and collections. 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.md page in the content/feed folder .
  • Created a template in /layouts/section/feed.html with {{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 }}

For post_preview_card_list you can checkout my hugo theme.


Read More