From bfb646acee0502aff5899e1a4f62baea5a7b7c68 Mon Sep 17 00:00:00 2001 From: Eltrac Date: Wed, 16 Apr 2025 23:24:53 +0800 Subject: feat: better category page Former-commit-id: bd2a14f400a2ebbb0de0bb1e152f8c3ff9ff20ed --- assets/css/components/_card.scss | 11 +----- assets/css/components/_pages.scss | 40 ------------------- assets/css/components/_taxonomy.scss | 77 ++++++++++++++++++++++++++++++++++++ assets/css/index.scss | 1 + assets/css/utils/_mixins.scss | 14 +++++++ layouts/_default/taxonomy.html | 19 +++++---- 6 files changed, 104 insertions(+), 58 deletions(-) create mode 100644 assets/css/components/_taxonomy.scss 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 @@ {{ if eq .Type "tags" }} -
+
{{ range sort .Site.Taxonomies.tags "Count" "desc" }} #{{ .Page.LinkTitle }} @@ -18,21 +18,24 @@ {{ if eq .Type "categories" }} {{ partial "components/welcome.html" . }} -
- {{ range .Site.Taxonomies.categories.Alphabetical }} -
-

+
+ {{ range sort .Site.Taxonomies.categories ".Count" "desc" }} +
+

{{ with .Page.Params.icon }}{{ . }}{{ end }} {{ .Page.LinkTitle }}

+

{{ .Page.Params.description }}

    - {{ range first 3 .Pages }} + {{ range first 6 .Pages }}
  • {{ .Title }}
    • {{ end }}
- {{ if gt .Count 3 }} - 阅读所有 {{ .Count }} 篇文章 + {{ if gt .Count 6 }} + 阅读所有 {{ .Count }} 篇文章 {{ end }}
{{ end }} -- cgit v1.2.3