zzossig / hugo-theme-zzo

Make a blog with hugo zzo theme!
https://themes.gohugo.io//theme/hugo-theme-zzo/en/
MIT License
737 stars 258 forks source link

Add tags to the index page (an option in config?) #335

Open VictorZakharov opened 3 years ago

VictorZakharov commented 3 years ago

Currently I only see tags when article has loaded. Would be great to see it on the index page also. Some people might not be interested in certain tags, so it makes it more user friendly.

My article template looks like this: image

And here is how the index post should look like (I edited tags in Paint, they weren't there before): image

Index post original: image

VictorZakharov commented 3 years ago

For now I just changed classic.html template and added {{ partial "body/tags" . }} at the end of h6.

Path to the file:

Whole h6 now looks like this:

<h6 class="subtitle caption">
          <time title="{{ i18n "tooltip-written" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">📅&nbsp;{{ .Date.Format (i18n "summary-dateformat") }} </time>
          {{ if ne (.Date.Format (i18n "summary-dateformat")) (.Lastmod.Format (i18n "summary-dateformat")) }}
          <time title="{{ i18n "tooltip-modified" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; 📝&nbsp;{{ .Lastmod.Format (i18n "summary-dateformat") }} </time>
          {{ end }}
          <span title="{{ i18n "tooltip-reading-time" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; ☕&nbsp;{{ .ReadingTime }}&nbsp;{{ i18n "reading-time" }} </span>
          {{ with $.Param "author" }}
          &middot; <span title="{{ i18n "single-writtenBy" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{ if $.Param "authorEmoji" }}{{ $.Param "authorEmoji" }}{{ else }}✍️{{ end }}&nbsp;{{ . }}</span>
          {{ end }}
          {{ partial "body/tags" . }}  <!-- add this line here -->
        </h6>

Then added to custom CSS (repo-root/assets/scss/custom.scss).

.summary-classic .single__tags {
   float: right;
   font-weight: normal;
}

It now looks like this: image

Might not fit all tags on mobile/tablet, they will get pushed to the second line - not ideal, but good enough as a temp fix.

VictorZakharov commented 3 years ago

Change is now live. image