CaiJimmy
Ability to show tags on home page
Feature request
I like my new theme a lot, but there is one small thing that I miss from my old blog theme: showing tags on the home page.
For example:
Compare the Stack now used on my blog:
Current state
On the demo page we can see that categories are shown with colorful labels:
Inside posts the tags are shown at the end of the post:
Potential solutions
One solution could be to have the same tags in posts on the home page, but the labels seem a bit too big:
Another would be to have a simple line separated by commas:
Hi @ottok, can you please assign this task to me? I can do this for you!
Cool, thanks for volunteering @nishitxmehta! I don't have permissions to 'assign' any tasks, Jimmy can decide to do so when he wakes up.
Even without being assigned, you @nishitxmehta can draft a PR with your suggestion on what you think is the best design, or just post a screenshot here and ask for comments?
Demo Design 🎨
I think we can go with this design of tags as shown below:
Because the above design resembles with your old blog theme which you are expecting.
Old Blog Theme Design
Do let me know if it suits you, I can start working on it!
No - I don't think my suggestion above is good. If it was, I would have already implemented it in code instead of leaving it as a mockup. Also, you should not do something because it suits me. This is open source - you should do what you feel inspired to do, or what you think makes the theme better for everyone.
I got your point @ottok! Thanks for that suggestion by the way, I'll definitely share some designs with you shortly.
Sorry for the late reply 🙏.
I suggest to add a configuration that allows to customize the displayed taxonomy. So instead of categories (currently hardcoded), users can change it to another taxonomy, like tags in this case.
Related code: https://github.com/CaiJimmy/hugo-theme-stack/blob/bda734fb234df2d1e70ec9c358dbdd77905e3f20/layouts/partials/article/components/details.html#L2-L10
If we choose this solution, we'll also need to make the footer taxonomy customizable (currently tags is hardcoded).
In most blogging systems (e.g. WordPress) the 'category' and 'tag' exists in parallel and are not necessarily a choice of either/or. In my experience blog posts typically have only one category, but may have multiple tags. For example a lifestyle blog could have post about a trip to Hawaii in category 'Travel' but with tags 'Hawaii, Beach destinations, Warm places'.
The current design of a large label above the post title suits category-type of use well, since there will be max 1-2 labels per post. If the same large labels above the post is used for 3-5 tags it gets visually too busy.
However looking at https://gohugo.io/content-management/taxonomies/ there is no prescription about category/tag usage in Hugo, and one can even have any arbitrary name on the taxonomy, so this is eventually mostly just a matter of taste/preferrence.
Demo Design 🎨
I think we can go with this design of tags as shown below:
This design is very comfortable with the blog theme, can you share your code? Thanks！
I got your point @ottok! Thanks for that suggestion by the way, I'll definitely share some designs with you shortly.
Hello @nishitxmehta , just checking in to see where you stand with this feature 😄
My screenshot above was just a manually made version directly with browser tools. I took a stab at doing it in the theme code by adding tags to the archive page:
--- a/layouts/partials/article-list/compact.html
+++ b/layouts/partials/article-list/compact.html
@@ -4,7 +4,14 @@
<h2 class="article-title">
{{- .Title -}}
</h2>
+ <footer class="article-translations">
+ {{ partial "helper/icon" "tag" }}
+ {{ range (.GetTerms "tags") }}
+ {{ .LinkTitle }}
+ {{ end }}
+ </footer>
<footer class="article-time">
+ {{ partial "helper/icon" "clock" }}
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
{{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
But this renders quite badly, as I did not figure out a way to add commas between tags, nor how to limit that it shows max 5 tags etc.. so end result is a bit ugly: