1myblog/
 2├── hugo.toml                                    # [taxonomies] 添加 topic = "topics"
 3├── content/
 4│   └── topics/
 5│       ├── _index.md                            # 专题 Hub 页元数据
 6│       └── lumin-blog/
 7│           └── _index.md                        # 单个专题元数据（标题、描述、封面）
 8
 9themes/hugo-theme-lumin/
10├── layouts/
11│   └── topics/
12│       ├── terms.html                           # 专题 Hub 页面模板（所有专题的卡片网格）
13│       └── list.html                            # 单个专题内页模板（文章列表 + 封面 Banner）
14└── assets/
15    └── css/
16        └── main.css                             # 专题相关样式（L6830 起）

 1文章 frontmatter                              Hugo Taxonomy 引擎
 2topics: ["lumin-blog"]       ──────────►      收集所有标记了 topics 的文章
 3                                              按 topic term 分组
 4                                              ┌──────────────────────┐
 5                    terms.html                 │  lumin-blog: [p1,p2] │
 6                    遍历 .Data.Terms           │  travel:     [p3]    │
 7                    渲染专题卡片网格            │  reading:    [p4,p5] │
 8                                              └──────────────────────┘
 9                                                     │
10                                                     ▼
11                                              list.html
12                                              接收 .Data.Term + .Pages
13                                              渲染封面 Banner + 文章列表

1[taxonomies]
2  category = "categories"
3  tag = "tags"
4  topic = "topics"          # 新增：专题分类法

1[[menu.main]]
2  identifier = "topics"
3  name = "专题"
4  url = "/topics/"
5  weight = 8

1.topics-hero {
2  border-radius: 16px;
3  padding: 48px 40px;
4  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #4a47a3 100%);
5}

1首页 › 专题

1.topics-grid {
2  display: grid;
3  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
4  gap: 20px;
5}

 1┌─────────────────────────┐
 2│                         │
 3│    封面图 / 渐变色背景    │  ← topic-card-cover (160px)
 4│              [N 篇]     │  ← 右下角文章计数徽章
 5│                         │
 6├─────────────────────────┤
 7│  专题标题                 │
 8│  简介描述（最多 2 行省略） │  ← topic-card-body
 9│  ─────────────────────  │
10│  浏览专题  →             │  ← topic-card-footer
11└─────────────────────────┘

1{{- $colors := slice "#667eea" "#764ba2" "#e74c3c" "#27ae60" "#f39c12" "#2980b9" "#16a085" "#8e44ad" "#d35400" "#2c3e50" -}}
2{{- $colorIdx := mod (len $topic.Pages) (len $colors) -}}
3{{- $accent := index $colors $colorIdx -}}

 1.topic-hero {
 2  position: relative;
 3  border-radius: 16px;
 4}
 5
 6.topic-hero-bg {
 7  min-height: 220px;
 8  background-size: cover;
 9  background-position: center;
10}
11
12.topic-hero-body {
13  position: absolute;          /* 覆盖层，不增加高度 */
14  inset: 0;
15  display: flex;
16  flex-direction: column;
17  align-items: center;
18  justify-content: center;     /* 内容垂直居中 */
19  color: #fff;
20}

1{{- $accent := index $colors (mod (len .Data.Term) (len $colors)) -}}

1首页 › 专题 › 当前专题名

1┌──────────┬──────────────────────────────────┐
2│          │ 2026-05-22  代码  6分钟  2544字    │
3│  封面缩略图│ 文章标题                           │
4│          │ 文章描述文字，最多两行省略...          │
5└──────────┴──────────────────────────────────┘

1---
2title: "Lumin Blog 开发日志"
3description: "记录 Lumin Blog 主题从零到一的完整开发过程"
4cover: "/images/default-cover.webp"
5---

 1---
 2title: "某篇文章"
 3categories:
 4  - "code"
 5tags:
 6  - "Hugo"
 7topics:
 8  - "lumin-blog"          # 文章归入该专题
 9description: "文章描述"
10author: "Lumin"
11---

1topics:
2  - "lumin-blog"
3  - "hugo-tips"

1---
2title: "专题"
3description: "精选专题，系统化阅读，深入探索每一个主题"
4---

 1[data-theme="dark"] .topics-hero {
 2  background: linear-gradient(135deg, #4a47a3 0%, #5b3a8c 50%, #3a3580 100%);
 3}
 4[data-theme="dark"] .topic-card {
 5  background: rgba(0,0,0,0.15);
 6  border-color: rgba(255,255,255,0.06);
 7}
 8[data-theme="dark"] .topic-article-card {
 9  background: rgba(0,0,0,0.15);
10  border-color: rgba(255,255,255,0.06);
11}

1<!-- ❌ 错误 -->
2<a href="{{- $topic.Term | urlize | relLangURL -}}/">
3
4<!-- ✅ 正确 -->
5<a href="{{- $topic.Page.RelPermalink -}}">

1{{- if ne .Kind "term" -}}
2  <div class="list-page">
3    {{- with .Content }}{{ . }}{{ end -}}
4  </div>
5  {{- return -}}
6{{- end -}}

1.topic-hero-body {
2  position: absolute;
3  inset: 0;
4  display: flex;
5  flex-direction: column;
6  align-items: center;
7  justify-content: center;
8}