From 5e7a00cd727f983675b11c207f74e3ef932ca835 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Sun, 29 Jun 2025 16:59:05 +0800
Subject: feat: new tag taxonomy page design

- add little icons to tag items
- smaller tags
- make tag with less counts less obvious


Former-commit-id: 64cb1b57920f26f7145d32a126faf514c6eca5b9
---
 assets/css/components/_taxonomy.scss                   | 18 +++++++++++++++++-
 content/tags/Apple/_index.md                           |  4 ++++
 content/tags/Notion/_index.md                          |  4 ++++
 "content/tags/\345\222\226\345\225\241/_index.md"      |  4 ++++
 .../_index.md"                                         |  4 ++++
 "content/tags/\346\255\273\344\272\241/_index.md"      |  4 ++++
 "content/tags/\347\210\261/_index.md"                  |  4 ++++
 .../\347\245\236\347\247\230\345\255\246/_index.md"    |  4 ++++
 layouts/_default/taxonomy.html                         | 15 +++++++++++++--
 9 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 content/tags/Apple/_index.md
 create mode 100644 content/tags/Notion/_index.md
 create mode 100644 "content/tags/\345\222\226\345\225\241/_index.md"
 create mode 100644 "content/tags/\346\227\247\345\215\232\345\256\242\346\226\207\347\253\240/_index.md"
 create mode 100644 "content/tags/\346\255\273\344\272\241/_index.md"
 create mode 100644 "content/tags/\347\210\261/_index.md"
 create mode 100644 "content/tags/\347\245\236\347\247\230\345\255\246/_index.md"

diff --git a/assets/css/components/_taxonomy.scss b/assets/css/components/_taxonomy.scss
index c295b07e..9b5c5047 100644
--- a/assets/css/components/_taxonomy.scss
+++ b/assets/css/components/_taxonomy.scss
@@ -55,7 +55,8 @@
             align-items: center;
             gap: 0.3rem;
 
-            padding: 0.25rem 0.75rem;
+            font-size: 0.9rem;
+            padding: 0.2rem 0.6rem;
             background-color: var(--block-background-color);
             transition:
                 color,
@@ -68,6 +69,21 @@
                 color: var(--block-background-color);
             }
 
+            &.dimmed {
+                background: none;
+                border: 1px dashed var(--border-color);
+                color: var(--secondary-text-color);
+                &:hover {
+                    color: inherit;
+                    border-style: solid;
+                }
+            }
+
+            .tag-icon {
+                display: inline-flex;
+                align-items: center;
+            }
+
             .tag-count {
                 font-size: 0.8rem;
                 color: var(--secondary-text-color);
diff --git a/content/tags/Apple/_index.md b/content/tags/Apple/_index.md
new file mode 100644
index 00000000..48355335
--- /dev/null
+++ b/content/tags/Apple/_index.md
@@ -0,0 +1,4 @@
+---
+title: Apple
+icon: 
+---
diff --git a/content/tags/Notion/_index.md b/content/tags/Notion/_index.md
new file mode 100644
index 00000000..d855ab08
--- /dev/null
+++ b/content/tags/Notion/_index.md
@@ -0,0 +1,4 @@
+---
+title: Notion
+icon: https://image.guhub.cn/picgo2025/notion.png
+---
diff --git "a/content/tags/\345\222\226\345\225\241/_index.md" "b/content/tags/\345\222\226\345\225\241/_index.md"
new file mode 100644
index 00000000..2258db09
--- /dev/null
+++ "b/content/tags/\345\222\226\345\225\241/_index.md"
@@ -0,0 +1,4 @@
+---
+title: 咖啡
+icon: ☕︎
+---
diff --git "a/content/tags/\346\227\247\345\215\232\345\256\242\346\226\207\347\253\240/_index.md" "b/content/tags/\346\227\247\345\215\232\345\256\242\346\226\207\347\253\240/_index.md"
new file mode 100644
index 00000000..ea0a8b33
--- /dev/null
+++ "b/content/tags/\346\227\247\345\215\232\345\256\242\346\226\207\347\253\240/_index.md"
@@ -0,0 +1,4 @@
+---
+title: 旧博客文章
+category: 归档
+---
diff --git "a/content/tags/\346\255\273\344\272\241/_index.md" "b/content/tags/\346\255\273\344\272\241/_index.md"
new file mode 100644
index 00000000..911a2a12
--- /dev/null
+++ "b/content/tags/\346\255\273\344\272\241/_index.md"
@@ -0,0 +1,4 @@
+---
+title: 死亡
+icon: ☠︎
+---
diff --git "a/content/tags/\347\210\261/_index.md" "b/content/tags/\347\210\261/_index.md"
new file mode 100644
index 00000000..dc56559b
--- /dev/null
+++ "b/content/tags/\347\210\261/_index.md"
@@ -0,0 +1,4 @@
+---
+title: 爱
+icon: ❤︎
+---
diff --git "a/content/tags/\347\245\236\347\247\230\345\255\246/_index.md" "b/content/tags/\347\245\236\347\247\230\345\255\246/_index.md"
new file mode 100644
index 00000000..48bdf86c
--- /dev/null
+++ "b/content/tags/\347\245\236\347\247\230\345\255\246/_index.md"
@@ -0,0 +1,4 @@
+---
+title: 神秘学
+icon: ✡︎
+---
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 025a63d7..e27d41a8 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -6,8 +6,19 @@
   <!-- Display Tags -->
   <section class="taxonomy-tags">
     {{ range sort .Site.Taxonomies.tags "Count" "desc" }}
-    <a href="{{ .Page.RelPermalink }}" class="taxonomy-tags-item">
-        <span class="tag-name">#{{ .Page.LinkTitle }}</span>
+    <a href="{{ .Page.RelPermalink }}"
+        class="taxonomy-tags-item{{ if lt .Count 4 }} dimmed{{ end }}">
+        {{ if .Page.Params.icon }}
+            {{ if or (hasPrefix .Page.Params.icon "http://") (hasPrefix .Page.Params.icon "https://") }}
+                <span class="tag-icon">
+                    <img src="{{ .Page.Params.icon }}" alt="{{ .Page.LinkTitle }}"
+                        style="height:1em;width:1em">
+                </span>
+            {{ else }}
+                <span class="tag-icon">{{ .Page.Params.icon }}</span>
+            {{ end }}
+        {{ end }}
+        <span class="tag-name">{{ if not .Page.Params.icon }}#{{ end }}{{ .Page.LinkTitle }}</span>
         <span class="tag-count">{{ .Count }}</span>
     </a>
     {{ end }}
-- 
cgit v1.2.3