Post Link Template (reused code) filter by category

support
1

Good day,

I have a menu Home | Blog | About, and when users click Blog, it will go to /posts/ path that triggers the list template page. I’ve been spending many hours today trying to figure out how to use my post list template page by specifying category filter. Here is my sample post front matter:

---
title: "Testing Error"
date: 2023-09-30
category: "Test"
---

On my post list template page, a sidebar shows the list of categories, e.g.:

Categories:

  • All
  • Technology
  • Politics
  • Test

Each category uses (internally generated using .Site.BaseURL with posts string and the category query string)

a href="http://localhost:1313/posts/?category=Test"

i.e., here the sample query value is Test for the link url for Test Category. By default, if no query string, then the list template page will assign category “All” which shows all the posts. However if query string is present, it will read that category parameter and use its value to filter the collection of .Site.GetPage.

I understand that Hugo is a static generator, as the term static, it may not be the right approach and some would suggest to use JavaScript (I’m also willing to listen for that option).

It will be nice to process that url with query string but .Permalink would only give this path: http://localhost:1313/posts/ so I’m not able to process the query string. If only I can get the query string, I could use the parameter to filter the loop of post pages to display, thus the list template page is re-used (having the same code without creating any additional file or any additional configuration)

What is the better approach of solving this?

Thanks and have a nice day.

2

hiho,

recap the SSG so the terminology would rather be

generate a page at www.example.com/posts/
from source page /content/posts/
and create a link named “blog on the Homepage”

No clicking here :wink: all static

On Hugo principle is to have the content layout matching your folder structure

generating a query url like href="http://localhost:1313/posts/?category=Test" and later replace it with href="http://localhost:1313/posts/Test" or maybe href="http://localhost:1313/tags/Test" sounds a little weird.

  • Taxonomies | Hugo
    might lead you to a solution for the “tag” using Hugo’s taxonomy/category/term/tag concept.

and the related sections in Templates | Hugo templates for list, section and taxonomies

p.s. it’s possible to pass “variable values” to partials or use scratch/stores for lets say “page global variables”

1 Like
3

Good day Irkode,

Humbly speaking, my situation is I’m a newbie to Hugo, so my analogy is someone who does not know how to cook but have to cook with very very little time so I have to pull recipes for cooking.

I do have some software development experience but not much on web (I do love web dev) and with my short time to develop something for the welfare of other people, I found Hugo and I love it for its performance and the ability to quickly develop things locally. Kodus to those who founded and performs the operations for Hugo development!

To our topic, perhaps one of the big reason why Hugo is Super Fast is probably because of the architecutre having static website. Designing pages should align to its principle of being static to follow its architecture. However, my use case leads me to reuse the code (i.e., /layout/posts/list.html) so whenever I added a post with new category, then it shall be catered.

I’ve tried some JQuery, but it does reflect category value change in the UI side but the variable .Params.category does not reflect the change in category.

Now, the solution provided by Irkode is better because it aligns to the architecture of Hugo (This should be first in my order). Irkcode please give me time to study. Before I got your response, I’ve tried .Site.Params or .Site.Data before but these are immutable variables, so I cannot set category value once the query string is updated.

Looking at scratch/stores & taxonomies as the right solution align to static webpage architecture.

Thank you Irkcode, have a great day.

4

To clarify:

Static means the result: not the generation.

Partials (lets call them template functions) can take parameters. Or in other words you may reuse code and pass arguments to generate different pages.

The category value is first. The link comes second.

Try it: Think SSG :wink:

5

Good day Irkode,

I have studied your suggestion about Taxonomy and the good thing is that the category and tags Taxonomy are built internally in Hugo. Now, I do not have to worry about filtering and hiding the Pages not equal to the category selected (just be sure that the theme used utilized this feature.)

For those newbie who have little/squeezed time like me to do the technical stuff, I’m putting the video Taxonomy to save your time and also Irkode helps me save my time by his suggestion regarding Taxonomy:

I like Hugo and one of the things I appreciate is the great community support.
May this post help those newbie like me.

Have a great day Irkode and thank you.