Add collapsible tags (#223)

5 files changed, 71 insertions, 11 deletions

diff --git a/docs/params-configurations.md b/docs/params-configurations.md
index 0704995..8724ccf 100644
--- a/docs/params-configurations.md
+++ b/docs/params-configurations.md
@@ -66,6 +66,8 @@
   # reversePostAndAside = true
   # shareInAside = true
   fixedNav = true
+  # collapsibleTags = true
+  # collapseBySummary = true
 
   [params.advanced]
     customCSS = ["css/custom.css"]
@@ -263,6 +265,14 @@ Display share buttons in aside, not under the post title.
 
 Make navbar fixed when scrolling.
 
+### collapsibleTags = true
+
+Break tags into multiple levels by a collapsible manner.
+
+### collapseBySummary = false
+
+collapsibleTags collapses tags by .Title by default and by .Summary when collapseBySummary is true.
+
 ## Advanced
 
 > Note: generally, the following advanced parameters are not necessary to be set. Their main purpose is to further customize the entire theme.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 0087303..972387f 100755
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -73,6 +73,8 @@ theme = "hugo-theme-dream"
   # reversePostAndAside = true
   # shareInAside = true
   # fixedNav = true
+  # collapsibleTags = true
+  # collapseBySummary = false
 
   # [params.advanced]
   #   customCSS = ["css/custom.css"]
diff --git a/i18n/en.toml b/i18n/en.toml
index 56b8c24..bb1a748 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -28,6 +28,10 @@ other = "{{ .Count }} categories"
 one = "1 article"
 other = "{{ .Count }} articles"
 
+[group]
+one = "1 group"
+other = "{{ .Count }} groups"
+
 [socialLinks]
 other = "Social Links"
 
diff --git a/layouts/partials/collapsibleTags.html b/layouts/partials/collapsibleTags.html
new file mode 100644
index 0000000..25b2545
--- /dev/null
+++ b/layouts/partials/collapsibleTags.html
@@ -0,0 +1,38 @@
+<details>
+  {{ $s := slice }}
+  {{ range .context.WeightedPages }}
+    {{ $s = $s | append .Title }}
+  {{ end }}
+  {{ $set := uniq $s }}
+  {{ $len := len $set }}
+  {{ $collapseBySummary := .collapseBySummary }}
+  <summary>
+    <h3 style="display: inline; color: #2E8B57;">{{ .context.Page.Title }}&nbsp</h3>
+    <h3 style="display: inline;">{{- T "group" $len -}}</h3>
+  </summary>
+    <ul>
+      {{ range .context.Pages.GroupBy "Title" }}
+      {{ $len := len .Pages }}
+      <details>
+        <summary>
+          <h3 style="display: inline; color: #2E8B57;">{{ .Key}}&nbsp</h3>
+          <h3 style="display: inline;">{{- T "article" $len -}}</h3>
+        </summary>
+        <br>
+        {{range .Pages}}
+          <ul>
+            <li>
+              {{if $collapseBySummary}}
+                <a href="{{ .RelPermalink }}">{{ safeHTML (substr .Summary 0 20)}}...</a>
+              {{else}}
+                <a href="{{ .RelPermalink }}">{{.Title}}...</a>
+              {{end}}
+            </li>
+          </ul>
+        {{ end }}
+        <br>
+      </details>
+      {{ end }}
+    </ul>
+</details>
+
diff --git a/layouts/tags/terms.html b/layouts/tags/terms.html
index d5c90b7..0ad11ef 100644
--- a/layouts/tags/terms.html
+++ b/layouts/tags/terms.html
@@ -6,6 +6,8 @@
 
 {{ partial "header.html" . }}
 
+{{ $collapsibleTags := .Site.Params.collapsibleTags}}
+{{ $collapseBySummary := .Site.Params.collapseBySummary}}
 <div class="ui container">
   <article class="ui segment dream-tags-section">
     <h2 class="ui header">
@@ -20,17 +22,21 @@
     </h2>
 
     {{ range .Data.Terms.Alphabetical }}
-    <h3 class="ui header">
-      <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>&nbsp;
-      {{- T "article" .Count -}}
-    </h3>
-    <ul>
-      {{ range .Pages }}
-      <li>
-        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-      </li>
-      {{ end }}
-    </ul>
+        {{ if $collapsibleTags }}
+            {{ partial  "collapsibleTags.html" (dict "context" . "collapseBySummary" $collapseBySummary)}}
+        {{ else }}
+            <h3 class="ui header">
+              <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>&nbsp;
+              {{- T "article" .Count -}}
+            </h3>
+            <ul>
+              {{ range .Pages }}
+              <li>
+                <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+              </li>
+              {{ end }}
+            </ul>
+        {{ end }}
     {{ end }}
   </article>
 </div>