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:

[hyhforevertop]

我上面的屏幕截图只是直接使用浏览器工具手动制作的版本。我尝试在主题代码中通过向存档页面添加标签来执行此作：

--- 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") -}}

但这渲染得相当糟糕，因为我没有想出在标签之间添加逗号的方法，也没有想出如何限制它最多显示 5 个标签等。所以最终结果有点难看：

这是我修改后的的layouts/partials/article/components/details.html

<div class="article-details">
    {{ 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 }}

    <div class="article-title-wrapper">
        <h2 class="article-title">
            <a href="{{ .RelPermalink }}">
                {{- .Title -}}
            </a>
        </h2>
    
        {{ with .Params.description }}
        <h3 class="article-subtitle">
            {{ . }}
        </h3>
        {{ end }}
    </div>

    {{ $showReadingTime := .Params.readingTime | default (.Site.Params.article.readingTime) }}
    {{ $showDate := not .Date.IsZero }}
    {{ $showFooter := or $showDate $showReadingTime }}
    {{ $showTags := or (not .Params.tags) (eq (len .Params.tags) 0)}} //add here

    {{ if $showFooter }}
    <footer class="article-time">
        {{ if $showDate }}
            <div>
                {{ partial "helper/icon" "date" }}
                <time class="article-time--published">
                    {{- .Date | time.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
                </time>
            </div>
        {{ end }}

        {{ if $showReadingTime }}
            <div>
                {{ partial "helper/icon" "clock" }}
                <time class="article-time--reading">
                    {{ T "article.readingTime" .ReadingTime }}
                </time>
            </div>
        {{ end }}
    </footer>
    {{ end }}

{{ if not $showTags }} //add here
    <footer class="article-tags">
        <div>
            {{ partial "helper/icon" "tag" }}
            {{ $tags := .GetTerms "tags" }}
            {{ $count := len $tags }}
            {{ range $index, $tag := $tags }}
                {{ if $index }}, {{ end }} <!-- 只有在不是第一个标签时添加逗号 -->
                <a href="{{ $tag.Page.Permalink }}">{{ $tag.LinkTitle }}</a> <!-- 添加链接 -->
                {{ if eq $index 4 }} <!-- 当索引为 4 时（第五个标签） -->
                    {{ if gt $count 5 }}... {{ end }} <!-- 如果标签数量大于 5，显示省略号 -->
                    {{ break }} <!-- 跳出循环 -->
                {{ end }}
            {{ end }}
        </div>
    </footer>
{{ end }}

    {{ if .IsTranslated }}
        <footer class="article-translations">
            {{ partial "helper/icon" "language" }}
            <div>
                {{ range .Translations }}
                    <a href="{{ .Permalink }}" class="link">{{ .Language.LanguageName }}</a>
                {{ end }}
            </div>
        </footer>
    {{ end }}
</div>

并且为了区分tags和category的样式，我修改了article-tags的css

在**/assets/scss/partials/article.scss**中我添加了如下代码

.article-tags{
    display: flex;
    color: var(--card-text-color-tertiary);
    gap: 5px;

    svg {
        vertical-align: middle;
        width: 20px;
        height: 20px;
        stroke-width: 1.33;
        flex-shrink: 0;
    }

    time,
    a {
        font-size: 1.4rem;
        color: var(--card-text-color-tertiary);
    }

    & > div {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
}

效果如图，你可以修改具体的边界值来展示几个tag

并且他们实际上就是a标签，你可以点击直接查看具体的tag