✨ Feat: add TagCloud config support for tags page, see parameter `par…

…ams.tagcloud` (#235)
hugo-fixit · Nov 4, 2022 · f886997 · f886997
1 parent 13f825b
commit f886997
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
 
 - :sparkles: Feat: add feature post reward support ([#216](https://github.com/hugo-fixit/FixIt/issues/216), @Lruihao[#234](https://github.com/hugo-fixit/FixIt/pull/234))
 - :sparkles: Feat: add reward shortcode support ([#216](https://github.com/hugo-fixit/FixIt/issues/216))
+- :sparkles: Feat: add TagCloud config support for tags page, see parameter `params.tagcloud` ([#235](https://github.com/hugo-fixit/FixIt/issues/235))
 - :sparkles: Feat: add custom templates and parameter `params.customFilePath` support
 - :sparkles: Feat: add feature end of post flag support ([#236](https://github.com/hugo-fixit/FixIt/issues/236))
 - :sparkles: Feat: add params to close wordcount and readingTime in post ([#209](https://github.com/hugo-fixit/FixIt/issues/209))

diff --git a/assets/css/_partials/_archive/_tags.scss b/assets/css/_partials/_archive/_tags.scss
@@ -14,6 +14,15 @@
     &:focus,
     &:hover {
       @include transform(scale(1.2));
+
+      sup {
+        color: $global-font-color;
+        @include transition(all ease-out 0.3s);
+
+        [data-theme='dark'] & {
+          color: $global-font-color-dark;
+        }
+      }
     }
 
     sup {
@@ -25,3 +34,26 @@
     }
   }
 }
+
+@for $grade from 0 through 10 {
+  $tag-cloud-color: mix($tag-cloud-end, $tag-cloud-start, $grade * 10);
+  $tag-cloud-color-dark: mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10);
+
+  .tag-cloud-#{$grade} {
+    color: $tag-cloud-color!important;
+    font-size: var(--tag-font);
+
+    &:active,
+    &:hover {
+      color: $global-link-hover-color!important;
+
+      [data-theme='dark'] & {
+        color: $global-link-hover-color-dark;
+      }
+    }
+
+    [data-theme='dark'] & {
+      color: $tag-cloud-color-dark!important;
+    }
+  }
+}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -75,6 +75,14 @@ $search-background-color: #e9e9e9 !default;
 $search-background-color-dark: #363636 !default;
 // ========== Header ========== //
 
+// ========== Tag Cloud ========== //
+// Color range of tag cloud
+$tag-cloud-start: $global-font-secondary-color!default;
+$tag-cloud-end: $global-font-color!default;
+$tag-cloud-start-dark: $global-font-secondary-color-dark!default;
+$tag-cloud-end-dark: $global-font-color!default;
+// ========== Tag Cloud ========== //
+
 // ========== Single Content ========== //
 // Font size of the TOC
 $toc-title-font-size: 1.2rem !default;

diff --git a/config.toml b/config.toml
@@ -29,7 +29,7 @@
       draft = false
       # FixIt 0.2.16 | NEW add fontawesome icon to a specific menu item
       icon = "fa-solid fa-archive"
-      # FixIt 0.2.16 | NEW set menu item type, optional value: ["mobile", "desktop"]
+      # FixIt 0.2.16 | NEW set menu item type, optional values: ["mobile", "desktop"]
       type = ""
   [[menu.main]]
     identifier = "categories"
@@ -192,6 +192,14 @@
     # amount of RSS pages
     rss = 10
 
+  # FixIt 0.2.17 | NEW TagCloud config for tags page
+  [params.tagcloud]
+    enable = false
+    min = 14 # Minimum font size in px
+    max = 32 # Maximum font size in px
+    peekCount = 10 # Maximum count of posts per tag
+    orderby = "name" # Order of tags, optional values: ['name', 'count']
+
   # Home page config
   [params.home]
     # FixIt 0.2.0 | NEW amount of RSS pages
@@ -416,7 +424,7 @@
     [params.page.reward]
       enable = false
       animation = false
-      # position relative to post footer, optional value: ["before", "after"]
+      # position relative to post footer, optional values: ["before", "after"]
       position = "after"
       # comment = "Buy me a coffee"
       [params.page.reward.ways]

diff --git a/docs b/docs
diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html
@@ -47,9 +47,22 @@ <h3 class="card-item-title">
 
     {{- /* Tag Cloud Page */ -}}
     {{- else if eq $taxonomies "tags" -}}
+      {{- $tagCloud := .Site.Params.tagcloud -}}
       <div class="tag-cloud-tags">
-        {{- range $.Site.Taxonomies.tags.ByCount -}}
-          <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }} <sup>{{ .Count }}</sup></a>
+        {{- if $tagCloud.enable -}}
+          {{- $tags := cond (eq $tagCloud.orderby "name") $.Site.Taxonomies.tags.Alphabetical $.Site.Taxonomies.tags.ByCount -}}
+          {{- $baseGrade := div ($tagCloud.peekCount | default 10) 10.0 -}}
+          {{- $minFont := $tagCloud.min | default 16 -}}
+          {{- $baseFont := div (sub ($tagCloud.max | default 32) $minFont) 10.0 -}}
+          {{- range $tags -}}
+            {{- $grade := math.Min (math.Floor (div (sub .Count 1) $baseGrade)) 10 -}}
+            {{- $fontSize := add $minFont (mul $grade $baseFont) -}}
+            <a href="{{ .Page.RelPermalink }}" class="tag-cloud-{{ $grade }}" style="--tag-font: {{ $fontSize }}px">{{ .Page.Title }} <sup>{{ .Count }}</sup></a>
+          {{- end -}}
+        {{- else -}}
+          {{- range $.Site.Taxonomies.tags.ByCount -}}
+            <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }} <sup>{{ .Count }}</sup></a>
+          {{- end -}}
         {{- end -}}
       </div>
     {{- end -}}
+10 −1		config.toml
+12 −4		content/posts/theme-documentation-basics/index.en.md
+8 −0		content/posts/theme-documentation-basics/index.zh-cn.md