Today, I updated the about page to display featured blog sections dynamically using front matter tags. This replaces the previous hardcoded method for a more flexible setup.

So here I am sharing the details. It’s a simple approach that can be done in three steps:

1. Add featured field to the front matter.
2. Create a page to list featured content.
3. Include the featured section where needed.

Add featured field to front matter

In your content files (e.g., content/posts/my-post.md), include a featured field in the front matter like this:

---
title: "My Featured Post"
date: 2025-05-24
featured: true
---

Create a page to list featured content

Create a file named featured.html inside the layouts/partials/ folder and add the following code:

<div class="col-sm-12 col-md-4 col-lg-4">
  <div class="card border shadow-sm">
        <div class="card-body p-3">
            <div class="row">
                {{ if .Params.Title }}
                <a href="{{ .Permalink }}">
                    <h3>{{ .Title }} </h3>
                </a>
                {{ end }}
            </div>

            <div class="post-entry text-secondary">
                {{ if .Description }}
                {{ .Description | plainify }}
                {{ else }}
                {{ .Content }}
                {{ end }}
            </div>
            </div>
        </div>
    </div>

The above is a basic card based on Bootstrap. You can modify the styles according to your preferences.

Call the featured page in the required section

Now you can include the featured content in any page like this:

<!-- about.html -->
<div>
  {{ range where (where .Site.RegularPages "Section" "blog") ".Params.featured" true }}
    {{ partial "featured.html" . }}
  {{ end }}
</div>

This will display your featured posts in your page. Also, you can change the section (e.g., "Section" "blog") to match your content structure.

Yes, that’s it. You have created a featured posts section in your Hugo website. Happy coding.