Add possibility to show tags on post cards (#782)

* Add possibility to show tags on post cards

* Add on_card tags in exampleSite

---------

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

assets/styles/layouts/list.scss

@@ -98,6 +98,22 @@ body.kind-section, body.kind-term, body.kind-page{
     width: fit-content;
   }
   
+  .taxonomy-terms-card {
+    text-align: left;
+  }
+  .taxonomy-terms-card li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: #248aaa;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+  }
+  
+  .taxonomy-terms-card a {
+    color: #f9fafc;
+  }
+
   /* ============= Device specific fixes ======= */
   
   /* Large screens such as TV */

assets/styles/sections/recent-posts.scss

@@ -38,6 +38,22 @@
     -webkit-line-clamp: 5; /* number of lines to show */
     -webkit-box-orient: vertical;
   }
+
+  .taxonomy-terms {
+    text-align: left;
+  }
+  .taxonomy-terms li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: #248aaa;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+  }
+  
+  .taxonomy-terms a {
+    color: #f9fafc;
+  }
   
   /* ============= Device specific fixes ======= */
   

exampleSite/config.yaml

@@ -189,6 +189,7 @@ params:
     # Show tags under the post title
     tags:
       enable: true
+      on_card: true # enables tags in post cards
 
     # Specify whether to show flag in the language selector. Default is true.
     flags:

layouts/partials/cards/post.html

@@ -9,6 +9,16 @@
         <p class="card-text post-summary">{{ .Summary }}</p>
       </div>
       <div class="card-footer">
+        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
+        <div class="taxonomy-terms-card">
+          <ul style="padding-left: 0;">
+            {{ range .Params.tags }}
+            {{ $url:= printf "tags/%s/" . }}
+            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+            {{ end }}
+          </ul>
+        </div>
+        {{ end }}
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
         <a
         href="{{ .RelPermalink | relLangURL }}"

layouts/partials/cards/recent-post.html

@@ -11,6 +11,16 @@
         <p class="card-text post-summary"> {{ .Summary }}</p>
       </div>
       <div class="card-footer">
+        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
+        <div class="taxonomy-terms">
+          <ul style="padding-left: 0;">
+            {{ range .Params.tags }}
+            {{ $url:= printf "tags/%s/" . }}
+            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+            {{ end }}
+          </ul>
+        </div>
+        {{ end }}
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
         <a href="{{ .RelPermalink }}" title="{{ i18n "read" }}" class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
       </div>