Ability to show tags on home page

[ottok]

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:

[nishitxmehta]

Hi @ottok, can you please assign this task to me? I can do this for you!

[ottok]

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?

[nishitxmehta]

okay, thanks @ottok

[ottok]

Any design ideas/suggestions so far @nishitxmehta?

[nishitxmehta]

@ottok, I'll get back to you shortly!

[nishitxmehta]

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!

[ottok]

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.

[nishitxmehta]

I got your point @ottok!
Thanks for that suggestion by the way, I'll definitely share some designs with you shortly.

[CaiJimmy]

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:

hugo-theme-stack/layouts/partials/article/components/details.html

Lines 2 to 10 in bda734f

	{{ if .Params.categories }}
	<header class="article-category">
	{{ range (.GetTerms "categories") }}
	<a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
	{{ .LinkTitle }}
	</a>
	{{ end }}
	</header>
	{{ end }}

If we choose this solution, we'll also need to make the footer taxonomy customizable (currently tags is hardcoded).

[ottok]

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.

[chuxinyuan]

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！

[AOM98]

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 😄

[ottok]

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: