Posted: 20/04/2021
Tagging Posts
As the number of posts are growing on this site, I am finding it harder and harder to find related items. I have already added a Search in, but sometimes, I want to see all my "Job Search" posts together, and not rely on them having the exact words I search for.
So I'm implementing post "tags" or "categories".
What this means, is that every post will have 0 or more tags associated with them. Then I can jump to a page containing all those posts together.
What does this look like?
I'm going to add the list of applicable "Tags" at the top and bottom of the post text on each post page. These will be clickable links to go to a page showing the synopses of each matching blog post.
The page will look like the
Latest Blog Posts
page, with reference to the tag.
How to build it?
Storing and reading the tags
I currently have a data store with the post title & creation date.
I'm going to add to that an additional field that is a comma separated list of tag names.
At present, this store is modified manually (A future feature request).
I will store the tags as part of the existing BlogInfo class as a
List<string>.
Displaying the tags on the posts
I can render the BlogInfo.Tags in a loop of links.
This will be a new component that takes a list of strings and renders them as clickable links in a "button" style.
As we have Bootstrap installed already, lets use a small outline button with an anchor tag e.g.
<a class="btn btn-outline-info btn-sm" href="#" role="button">Link</a>
which looks like: Link
We will then place the new component on the
BlogPage
component above and below the rendered MarkDown of the post.
Displaying a page of the tagged posts
We need a new Blazor based Page.
This should accept a parameter in the Uri.
The parameter is the name of the tag.
Then using this tag name, it will display all the blog posts that have that as a tag. This just requires a list.Contains in all the
cached
blog posts.
Building it
I built this while watching a
dotnet south west meetup
event, after planning it out above, it only took an hour to build.
It always takes more time to make it look good for me 😃
What's next?
We need a page to display all the Categories/Tags on them. I like the way Scott Hanselman shows his: https://www.hanselman.com/blog/category so that will be next.
Thanks for reading this post.
If you want to reach out, catch me on Twitter!
I am always open to mentoring people, so get in touch.