feat(list): ability to show article tags on homepage (#1270)

* feat(list): ability to show article tags on homepage

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/880

* Disable showTags by default

assets/scss/partials/article.scss

@@ -82,7 +82,8 @@
 }
 
 .article-time,
-.article-translations {
+.article-translations,
+.article-header-tags {
     display: flex;
     color: var(--card-text-color-tertiary);
     gap: 15px;
@@ -112,7 +113,8 @@
     flex-wrap: wrap;
 }
 
-.article-translations {
+.article-translations,
+.article-header-tags {
     & > div {
         flex-wrap: wrap;
     }

config/_default/params.toml

@@ -24,6 +24,10 @@ SortBy             = "default"
     toc           = true
     readingTime   = true
 
+    [article.list]
+        # Showing article tags in the list view (e.g. homepage, section pages)
+        showTags = false
+
     [article.license]
         enabled = false
         default = "Licensed under CC BY-NC-SA 4.0"

layouts/_partials/article-list/default.html

@@ -1,4 +1,4 @@
 {{ $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) }}
 <article class="{{ if $image }}has-image{{ end }}">
-    {{ partial "article/components/header" . }}
+    {{ partial "article/components/header" (dict "Page" . "IsList" true) }}
 </article>

layouts/_partials/article/article.html

@@ -1,5 +1,5 @@
 <article class="{{ if .Params.image }}has-image {{ end }}main-article">
-    {{ partial "article/components/header" . }}
+    {{ partial "article/components/header" (dict "Page" . "IsList" false) }}
 
     {{ if .Scratch.Get "TOCEnabled" }}
     <aside class="article-toc">

layouts/_partials/article/components/details.html

@@ -1,7 +1,9 @@
+{{- $IsList := .IsList -}}
+{{- $Page := .Page -}}
 <div class="article-details">
-    {{ if .Params.categories }}
+    {{ if $Page.Params.categories }}
     <header class="article-category">
-        {{ range (.GetTerms "categories") }}
+        {{ range ($Page.GetTerms "categories") }}
             {{ $color := partial "helper/color-from-str" .LinkTitle }}
             {{ $BackgroundColor := default $color.BackgroundColor .Params.style.background }}
             {{ $TextColor := default $color.TextColor .Params.style.color }}
@@ -14,28 +16,28 @@
 
     <div class="article-title-wrapper">
         <h2 class="article-title">
-            <a href="{{ .RelPermalink }}">
-                {{- .Title -}}
+            <a href="{{ $Page.RelPermalink }}">
+                {{- $Page.Title -}}
             </a>
         </h2>
     
-        {{ with .Params.description }}
+        {{ with $Page.Params.description }}
         <h3 class="article-subtitle">
             {{ . }}
         </h3>
         {{ end }}
     </div>
 
-    {{ $showReadingTime := .Params.readingTime | default (.Site.Params.article.readingTime) }}
-    {{ $showDate := not .Date.IsZero }}
+    {{ $showReadingTime := $Page.Params.readingTime | default (.Site.Params.article.readingTime) }}
+    {{ $showDate := not $Page.Date.IsZero }}
     {{ $showFooter := or $showDate $showReadingTime }}
     {{ if $showFooter }}
     <footer class="article-time">
         {{ if $showDate }}
             <div>
                 {{ partial "helper/icon" "date" }}
-                <time class="article-time--published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-                    {{- .Date | time.Format .Site.Params.dateFormat.published -}}
+                <time class="article-time--published" datetime='{{ $Page.Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+                    {{- $Page.Date | time.Format $Page.Site.Params.dateFormat.published -}}
                 </time>
             </div>
         {{ end }}
@@ -44,21 +46,32 @@
             <div>
                 {{ partial "helper/icon" "clock" }}
                 <time class="article-time--reading">
-                    {{ T "article.readingTime" .ReadingTime }}
+                    {{ T "article.readingTime" $Page.ReadingTime }}
                 </time>
             </div>
         {{ end }}
     </footer>
     {{ end }}
 
-    {{ if .IsTranslated }}
+    {{ if $Page.IsTranslated }}
         <footer class="article-translations">
             {{ partial "helper/icon" "language" }}
             <div>
-                {{ range .Translations }}
+                {{ range $Page.Translations }}
                     <a href="{{ .RelPermalink }}" class="link">{{ .Language.LanguageName }}</a>
                 {{ end }}
             </div>
         </footer>
     {{ end }}
+
+    {{ if and $Page.Site.Params.Article.List.ShowTags ($Page.GetTerms "tags") $IsList }}
+        <footer class="article-header-tags">
+            {{ partial "helper/icon" "tag" }}
+            <div>
+                {{ range ($Page.GetTerms "tags") }}
+                    <a href="{{ .RelPermalink }}" class="link">{{ .LinkTitle }}</a>
+                {{ end }}
+            </div>
+        </footer>
+    {{ end }}
 </div>

layouts/_partials/article/components/header.html

@@ -1,13 +1,15 @@
+{{- $IsList := .IsList -}}
+{{- $Page := .Page -}}
 <header class="article-header">
-    {{- $image := partial "helper/image" (dict "Image" .Params.image "Resources" .Resources) -}}
+    {{- $image := partial "helper/image" (dict "Image" $Page.Params.image "Resources" $Page.Resources) -}}
     {{ if $image }}
     <div class="article-image">
-        <a href="{{ .RelPermalink }}">
+        <a href="{{ $Page.RelPermalink }}">
             <img src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
-                alt="Featured image of post {{ .Title }}" />
+                alt="Featured image of post {{ $Page.Title }}" />
         </a>
     </div>
     {{ end }}
 
-    {{ partialCached "article/components/details" . .RelPermalink }}
+    {{ partial "article/components/details" (dict "Page" $Page "IsList" $IsList) }}
 </header>