Working on a new site, I had a series of blog posts that had different tags. On an archive page, I wanted a user to be able to click All or on an individual Tag Name to show just the articles that had that tag. Turns out I couldn’t do that the way I thought with the CMS. Here’s what I ended up doing:
1. Create a tags folder (this was the gotcha)
The Tag List showed “No tags found” until I added a tags folder in the CMS, alongside the posts folder:
cms/
posts/
tags/
apple.md
mac.md
...
Each tag used in a post needs its own .md file, named after the tag. Mine only contain:
yaml
---
name: mac
title: mac
---
You may not need both fields, but this works. If you add a new tag to a post, add its file here too, or it won’t appear in the Tag List.
2. Set up the Collection
On the Archive page’s Collection, go to Filters and set Tags to From URL. The Collection then reads ?tags=whatever from the page address.
3. Add the Tag List
- Place a Tag List above the Collection, not inside the Collection’s Before zone.
- Set Folder to your posts folder.
- Leave Tag Page empty.
- In the Tag List’s item drop zone, add a Flex with its link set to plain text
?tags={{tag.name}}, and inside it a Text with{{tag.name}} ({{tag.count}}).
Because the link is relative, each tag reloads the same page with the filter applied.
4. Add an “all” button
Add a Flex linked to the Archive page itself, containing a Text with “all”. This clears the filter.
5. Put the buttons in one row
By default the Tag List stacks one tag per row. To get a single wrapping row:
- Put the “all” Flex and the Tag List together inside a Flex set to Row and Wrap, with Align Items set to Start.
- On the Tag List, add these classes (Advanced → Classes):
flex-1 [&_.grid]:!flex [&_.grid]:!flex-wrap [&_.grid]:!gap-2 - On each pill Flex, add:
inline-flex w-fit border border-current rounded-full px-3 py-1 text-sm hover:opacity-70
Tested in Elements 3.1.3 with CMS v2.
