feat: better category page

Former-commit-id: bd2a14f400a2ebbb0de0bb1e152f8c3ff9ff20ed

6 files changed, 104 insertions, 58 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 43a25ca4..787c4e2d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,11 +1,6 @@
 /* 亮色模式（默认） */
 .card {
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    border-radius: 2px;
-    padding: 1rem 1.35rem;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
-    color: #333;
+    @include card;
     margin: 1rem 0;
     position: relative;
 
@@ -38,10 +33,6 @@
 
     /* 暗色模式 */
     @media (prefers-color-scheme: dark) {
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background-color: #222;
-        color: #ddd;
-
         .card-corner {
             background: linear-gradient(-45deg, #444 50%, #666 50%);
         }
diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index 9b5e10cd..7dc411e9 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -85,46 +85,6 @@
     }
 }
 
-/* category page */
-
-section.taxonomy {
-    margin: 2rem 0;
-}
-
-.taxonomy-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-
-    .taxonomy-tags-item {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.3rem;
-
-        padding: 0.25rem 0.75rem;
-        background-color: var(--block-background-color);
-        transition:
-            color,
-            background 0.3s;
-        border-radius: 0.3rem;
-
-        &:hover {
-            text-decoration: none;
-            background-color: var(--text-color);
-            color: var(--block-background-color);
-        }
-
-        .tag-count {
-            font-size: 0.8rem;
-            color: var(--secondary-text-color);
-        }
-    }
-}
-
-.taxonomy-description hr {
-    margin: 0.5rem 0;
-}
-
 @media screen and (max-width: 600px) {
     .posts-line {
         font-size: 16px;
diff --git a/assets/css/components/_taxonomy.scss b/assets/css/components/_taxonomy.scss
new file mode 100644
index 00000000..b13f3ac5
--- /dev/null
+++ b/assets/css/components/_taxonomy.scss
@@ -0,0 +1,77 @@
+.taxonomy {
+    margin: 2rem auto;
+    .taxonomy-categories {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: masonry;
+        gap: 1rem;
+        .taxonomy-categories-item {
+            ul.category-articles {
+                padding-inline-start: 1.5rem;
+                list-style-type: square;
+            }
+            a.category-link {
+                @include small-button;
+                font-size: 0.9rem
+            }
+            h3.category-title {
+               a:hover {
+                   text-decoration: none;
+               }
+               span {
+                   display: inline-block;
+               }
+               &:hover span {
+                   animation: bounce 0.5s ease-in-out;
+               }
+               @keyframes bounce {
+                   0%, 20%, 50%, 80%, 100% {
+                       transform: translateY(0);
+                   }
+                   40% {
+                       transform: translateY(-7px)
+                        rotate(5deg)
+                        scale(1.1);
+                   }
+                   60% {
+                       transform: translateY(-5px) rotate(-3deg);
+                   }
+               }
+            }
+        }
+    }
+
+    .taxonomy-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+
+        .taxonomy-tags-item {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.3rem;
+
+            padding: 0.25rem 0.75rem;
+            background-color: var(--block-background-color);
+            transition:
+                color,
+                background 0.3s;
+            border-radius: 0.3rem;
+
+            &:hover {
+                text-decoration: none;
+                background-color: var(--text-color);
+                color: var(--block-background-color);
+            }
+
+            .tag-count {
+                font-size: 0.8rem;
+                color: var(--secondary-text-color);
+            }
+        }
+    }
+
+    .taxonomy-description hr {
+        margin: 0.5rem 0;
+    }
+}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 081b6c3a..fa643102 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -6,6 +6,7 @@
 @import "components/markdown";
 @import "components/header";
 @import "components/pages";
+@import "components/taxonomy";
 @import "components/postlist";
 @import "components/post";
 @import "components/content";
diff --git a/assets/css/utils/_mixins.scss b/assets/css/utils/_mixins.scss
index 77b962c1..de007d7a 100644
--- a/assets/css/utils/_mixins.scss
+++ b/assets/css/utils/_mixins.scss
@@ -10,3 +10,17 @@
         text-decoration: none;
     }
 }
+
+@mixin card {
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 2px;
+    padding: 1rem 1.35rem;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    color: #333;
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background-color: #222;
+        color: #ddd;
+    }
+}
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index adcb29c2..24606ff8 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -5,7 +5,7 @@
 
   <!-- Display Tags -->
   {{ if eq .Type "tags" }}
-  <section class="taxonomy taxonomy-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>
@@ -18,21 +18,24 @@
   <!-- Display Categories -->
   {{ if eq .Type "categories" }}
   {{ partial "components/welcome.html" . }}
-  <section class="taxonomy taxonomy-categories row">
-    {{ range .Site.Taxonomies.categories.Alphabetical }}
-        <div class="taxonomy-categories-item col-xs-12 col-sm-6">
-            <h3>
+  <section class="taxonomy-categories">
+      {{ range sort .Site.Taxonomies.categories ".Count" "desc" }}
+        <div class="taxonomy-categories-item">
+            <h3 class="category-title">
                 <a href="{{ .Page.RelPermalink }}">
                     {{ with .Page.Params.icon }}<span>{{ . }}</span>{{ end }} {{ .Page.LinkTitle }}
                 </a>
             </h3>
+            <p>{{ .Page.Params.description }}</p>
             <ul class="category-articles">
-            {{ range first 3 .Pages }}
+            {{ range first 6 .Pages }}
                 <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
             {{ end }}
             </ul>
-            {{ if gt .Count 3 }}
-            <a href="{{ .Page.RelPermalink }}">阅读所有 {{ .Count }} 篇文章</a>
+            {{ if gt .Count 6 }}
+            <a class="category-link"
+                href="{{ .Page.RelPermalink }}"
+            >阅读所有 {{ .Count }} 篇文章</a>
             {{ end }}
         </div>
     {{ end }}