Blog優化之分類頁

/* ===== Categories 卡片（亮/暗分開調）===== */
:root{
  --cat-bg: #ffffff;                       /* 亮：白底，對比更高 */
  --cat-bd: rgba(15,23,42,.12);            /* slate-900/12% 作為邊框 */
  --cat-shadow: 0 10px 24px rgba(0,0,0,.06);
  --cat-head: #0f172a;                     /* 標題字色（亮） */
  --cat-muted: #475569;                    /* 說明字色（亮） */
  --cat-accent: #0ea5e9;                   /* 主色（sky-500） */
  --cat-hover-bd: rgba(14,165,233,.38);    /* hover 邊框 */
  --cat-hover-bg: rgba(14,165,233,.06);    /* hover 底色微染 */
}

.dark{
  --cat-bg: rgba(255,255,255,.06);         /* 暗：沿用你原本風格 */
  --cat-bd: rgba(255,255,255,.16);
  --cat-shadow: 0 8px 22px rgba(0,0,0,.35);
  --cat-head: #e5e7eb;                     /* 標題字色（暗） */
  --cat-muted: #cbd5e1;                    /* 說明字色（暗） */
  --cat-accent: #38bdf8;                   /* sky-400 */
  --cat-hover-bd: rgba(56,189,248,.45);
  --cat-hover-bg: rgba(56,189,248,.12);
}

/* 卡片容器（覆蓋舊規則） */
.cat-terms{
  display:grid; gap:12px; margin:1rem 0;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

.cat-card{
  border:1px solid var(--cat-bd);
  background: var(--cat-bg);
  border-radius:.9rem; padding:.9rem 1rem;
  box-shadow: var(--cat-shadow);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.cat-card:hover{
  border-color: var(--cat-hover-bd);
  background: var(--cat-hover-bg);
  transform: translateY(-2px);
}

/* 卡片頭（名稱 + 計數） */
.cat-head{
  display:flex; justify-content:space-between; align-items:center;
  text-decoration:none;
}
.cat-name{ color: var(--cat-head); font-weight:800; letter-spacing:.2px; }
.cat-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.75rem; height:1.4rem; padding:0 .4rem;
  border-radius:999px;
  font-size:.8rem; font-weight:700;
  color: var(--cat-head);
  background: rgba(14,165,233,.14);        /* 亮：淡藍膠囊 */
  border: 1px solid rgba(14,165,233,.30);
}
.dark .cat-count{
  color:#e6f6ff;
  background: rgba(56,189,248,.18);        /* 暗：沿用藍膠囊但不刺眼 */
  border-color: rgba(56,189,248,.40);
}

/* 描述文字 */
.cat-desc{
  margin:.5rem 0 0; font-size:.92rem;
  color: var(--cat-muted);
  line-height:1.65;
}

[taxonomy]
showHero = true
heroStyle = "background"   # basic / big / background / thumbAndBackground

[term]
showHero = true
heroStyle = "background"

{{ define "main" }}
  {{/* ---- Hero（背景圖區）---- */}}
  {{ $useHero := .Site.Params.term.showHero | default true }}
  {{ if $useHero }}
    {{ if templates.Exists "partials/hero.html" }}
      {{ partial "hero.html" . }}
    {{ else }}
      {{ $style := .Site.Params.term.heroStyle | default "background" }}
      {{ $tpl := printf "hero/%s.html" $style }}
      {{ if templates.Exists (printf "partials/%s" $tpl) }}
        {{ partial $tpl . }}
      {{ else }}
        {{ partial "hero/basic.html" . }}
      {{ end }}
    {{ end }}
  {{ end }}

  <header class="page-header">
    <h1>{{ .Title }}</h1>
    {{ with .Content }}<div class="prose">{{ . }}</div>{{ end }}
  </header>

  <div class="cat-posts">
    {{ range .Pages.ByDate.Reverse }}
      {{ partial "article-link/card.html" . }}
    {{ end }}
  </div>
{{ end }}

{{ define "main" }}
  {{/* ---- Hero（背景圖區）---- */}}
  {{ $useHero := .Site.Params.taxonomy.showHero | default true }}
  {{ if $useHero }}
    {{ if templates.Exists "partials/hero.html" }}
      {{ partial "hero.html" . }}
    {{ else }}
      {{ $style := .Site.Params.taxonomy.heroStyle | default "background" }}
      {{ $tpl := printf "hero/%s.html" $style }}
      {{ if templates.Exists (printf "partials/%s" $tpl) }}
        {{ partial $tpl . }}
      {{ else }}
        {{ partial "hero/basic.html" . }}
      {{ end }}
    {{ end }}
  {{ end }}

  {{/* 下面接你的頁首與分類清單（保留你原本的卡片網格） */}}
  <header class="page-header taxo-hero">
    <h1 class="taxo-title">{{ .Title }}</h1>
    {{ with .Content }}<div class="prose taxo-desc">{{ . }}</div>{{ end }}
  </header>

  {{ $terms := .Data.Terms.ByCount }}
  {{ if gt (len $terms) 0 }}
    <ul class="cat-terms">
      {{ range $terms }}
        <li class="cat-card">
          <a class="cat-head" href="{{ .Page.RelPermalink }}">
            <span class="cat-name">{{ .Page.LinkTitle }}</span>
            <span class="cat-count">{{ .Count }}</span>
          </a>
          {{ with .Page.Params.description }}<p class="cat-desc">{{ . }}</p>{{ end }}
        </li>
      {{ end }}
    </ul>
  {{ else }}
    <p class="opacity-80">目前沒有任何分類。</p>
  {{ end }}
{{ end }}