I’ve done several researches on this forum, on the documentation site (both really useful for me) and on the web, but being a beginner with the hugo templating language I’m having difficulties to implement what I want.
I will try to be detailed in explaining my problem and I apologize in advance if I use the wrong terminology. I hope someone can give me an answer (if it’s possible) in a “for dummy” style because, really, I’m struggling now to understand how hugo works.
Let’s say I have a website and use a hugo theme structured like this (more or less):
├── assets ├── config ├── content/ │ ├── home/ │ └── post/ │ ├── _index.md │ ├── post1/ │ │ └── index.md │ ├── post2/ │ │ └── index.md │ └── other-posts ├── data ├── layouts/ ├── other-folders-and-files └── themes
What I’d like to do is customize the layout of the “post” section page (i.e. the html file related to
content/post/_index.md) which lists all the posts on my site. Each of these posts is organized with two “taxonomies”: categories and tags. Therefore each taxonomy contains different “terms”.
Since I have so many posts, I would like the user visiting my site to be able to filter them on the section page, choosing a particular “term” from one of the two taxonomies.
As an idea I wanted to create two dropdown menus, one for categories and one for tags, similar to this one proposed by w3school. Regarding the HTML, CSS and JS code to create the two menus I’m fine, however I don’t know how to tell hugo that when a button of a “term” is clicked only the posts related to that “term” should be shown in the section page. I think maybe this can be solved by creating attributes within the HTML tags (like
Is there a simple way (understandable for a beginner) to do this? Thanks.