给博客增加单个和全部分类页面

1
src/
2
├── components/
3
│   └── layout/
4
│       ├── CategoryBar.astro          [分类栏组件：显示主页、归档、分类按钮，支持横向滚动]
5
├── config/
6
│   └── navBarConfig.ts                [导航栏配置：动态生成导航链接，添加分类菜单项]
7
├── i18n/
8
│   ├── i18nKey.ts                     [国际化键定义：新增 allCategories 和 searchAlbums 键]
9
│   └── languages/
10
│       ├── en.ts                      [英文翻译文件]
11
│       ├── ja.ts                      [日文翻译文件]
12
│       ├── ru.ts                      [俄文翻译文件]
13
│       ├── zh_CN.ts                   [简体中文翻译文件]
14
│       └── zh_TW.ts                   [繁体中文翻译文件]
15
├── pages/
16
│   ├── categories.astro               [全部分类页面：显示所有分类卡片列表（新增）]
17
│   └── categories/
18
│       └── [category].astro           [单个分类详情页：显示该分类文章和标签筛选（新增）]
19
└── utils/
20
    └── url-utils.ts                   [URL工具函数：新增分类相关URL生成函数]

1
---
2
import { Icon } from "astro-icon/components";
3
import MainGridLayout from "@layouts/MainGridLayout.astro";
4
import { getCategoryList } from "@/utils/content-utils";
5
import I18nKey from "@i18n/i18nKey";
6
import { i18n } from "@i18n/translation";
7

8
const categories = await getCategoryList();
9
const totalPosts = categories.reduce((sum, cat) => sum + cat.count, 0);
10
---
11

12
<MainGridLayout title={i18n(I18nKey.categories)}>
13
    <!-- 页面标题 -->
14
    <div class="card-base px-8 py-6 mb-6">
15
        <h1 class="text-2xl font-bold text-(--primary) mb-2">
16
            {i18n(I18nKey.categories)}
17
        </h1>
18
        <p class="text-30 text-sm">
19
            {i18n(I18nKey.allCategories)} · {totalPosts} {i18n(I18nKey.postsCount)}
20
        </p>
21
    </div>
22

23
    <!-- 分类卡片列表 -->
24
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
25
        {
26
            categories.map((category, index) => (
27
                <a
28
                    href={category.url}
29
                    class="card-base p-6 flex items-center gap-4 transition-all duration-300
30
                           hover:scale-[1.02] hover:shadow-lg active:scale-[0.98]
31
                           onload-animation"
32
                    style={`animation-delay: calc(var(--content-delay) + ${index * 50}ms);`}
33
                >
34
                    <div class="flex-shrink-0 w-12 h-12 rounded-full bg-(--primary)/10 flex items-center justify-center">
35
                        <Icon
36
                            name="material-symbols:folder-open"
37
                            class="text-2xl text-(--primary)"
38
                        />
39
                    </div>
40
                    <div class="flex-1 min-w-0">
41
                        <h2 class="text-lg font-bold text-90 truncate">
42
                            {category.name}
43
                        </h2>
44
                        <p class="text-sm text-30 mt-1">
45
                            {category.count} {i18n(I18nKey.postsCount)}
46
                        </p>
47
                    </div>
48
                    <div class="flex-shrink-0">
49
                        <Icon
50
                            name="material-symbols:chevron-right-rounded"
51
                            class="text-2xl text-30 transition-transform duration-200 group-hover:translate-x-1"
52
                        />
53
                    </div>
54
                </a>
55
            ))
56
        }
57
    </div>
58

59
    <!-- 空状态 -->
60
    {
61
        categories.length === 0 && (
62
            <div class="card-base px-8 py-12 text-center">
63
                <Icon
64
                    name="material-symbols:folder-off"
65
                    class="text-5xl text-30 mx-auto mb-4"
66
                />
67
                <p class="text-30">{i18n(I18nKey.bangumiNoData)}</p>
68
            </div>
69
        )
70
    }
71
</MainGridLayout>
72

73
<style>
74
    .card-base {
75
        background: var(--card-bg);
76
        border: 1px solid var(--card-border);
77
        border-radius: var(--radius-large);
78
    }
79

80
    a.card-base:hover {
81
        border-color: var(--primary);
82
    }
83

84
    a.card-base:active {
85
        background: var(--card-bg-active);
86
    }
87
</style>

1
---
2
import type { GetStaticPaths } from "astro";
3
import type { CollectionEntry } from "astro:content";
4
import { getCollection } from "astro:content";
5
import { Icon } from "astro-icon/components";
6
import PostCard from "@/components/layout/PostCard.astro";
7
import MainGridLayout from "@layouts/MainGridLayout.astro";
8
import { getCategoryList } from "@/utils/content-utils";
9
import { getTagUrl, getCategoryPageUrl, getPostUrlBySlug } from "@/utils/url-utils";
10
import I18nKey from "@i18n/i18nKey";
11
import { i18n } from "@i18n/translation";
12
import { siteConfig } from "@/config";
13

14
type PostEntry = CollectionEntry<"posts">;
15

16
interface Props {
17
  categoryName: string;
18
  posts: PostEntry[];
19
  totalPosts: number;
20
  tags: { name: string; count: number }[];
21
}
22

23
export const getStaticPaths = (async () => {
24
  const categories = await getCategoryList();
25
  const allPosts = await getCollection("posts", ({ data }) => {
26
    return import.meta.env.PROD ? data.draft !== true : true;
27
  }) as PostEntry[];
28

29
  const paths: any[] = [];
30

31
  for (const category of categories) {
32
    // 过滤该分类下的文章
33
    const categoryPosts = allPosts.filter((post) => {
34
      const postCategory = post.data.category?.trim() || "";
35
      const uncategorized = i18n(I18nKey.uncategorized).toLowerCase();
36

37
      if (!category.name || category.name.toLowerCase() === uncategorized) {
38
        // 未分类：没有分类或分类为空/未分类
39
        return !postCategory || postCategory.toLowerCase() === uncategorized;
40
      }
41
      return postCategory === category.name;
42
    });
43

44
    // 按日期排序
45
    categoryPosts.sort((a, b) => {
46
      if (a.data.pinned && !b.data.pinned) return -1;
47
      if (!a.data.pinned && b.data.pinned) return 1;
48
      return new Date(b.data.published).getTime() - new Date(a.data.published).getTime();
49
    });
50

51
    // 收集该分类下所有标签
52
    const tagCountMap: Record<string, number> = {};
53
    categoryPosts.forEach((post) => {
54
      (post.data.tags || []).forEach((tag: string) => {
55
        tagCountMap[tag] = (tagCountMap[tag] || 0) + 1;
56
      });
57
    });
58
    const tags = Object.entries(tagCountMap)
59
      .sort((a, b) => b[1] - a[1])
60
      .map(([name, count]) => ({ name, count }));
61

62
    paths.push({
63
      params: { category: category.name },
64
      props: {
65
        categoryName: category.name,
66
        posts: categoryPosts,
67
        totalPosts: categoryPosts.length,
68
        tags,
69
      },
70
    });
71
  }
72

73
  return paths;
74
}) satisfies GetStaticPaths;
75

76
const { categoryName, posts, totalPosts, tags } = Astro.props;
77

78
// 解码分类名称
79
const decodedCategory = decodeURIComponent(categoryName);
80

81
let delay = 0;
82
const interval = 50;
83

84
const masonryEnabled = siteConfig.postListLayout.grid.masonry;
85
const columnWidth = siteConfig.postListLayout.grid.columnWidth || 280;
86

87
const defaultLayout = siteConfig.postListLayout.defaultMode || "list";
88
const mobileDefaultLayout =
89
  siteConfig.postListLayout.mobileDefaultMode || defaultLayout;
90
const initialLayoutClass =
91
  defaultLayout === "grid"
92
    ? "post-grid-auto grid-mode"
93
    : "flex flex-col gap-4 md:gap-4 list-mode";
94
---
95

96
<MainGridLayout title={`${decodedCategory} - ${i18n(I18nKey.categories)}`}>
97
    <!-- 面包屑导航 -->
98
    <div class="card-base px-6 py-4 mb-6">
99
        <nav class="flex items-center gap-2 text-sm text-30">
100
            <a href="/" class="hover:text-(--primary) transition-colors">
101
                <Icon name="material-symbols:home" class="inline-block align-middle" />
102
            </a>
103
            <span class="opacity-50">/</span>
104
            <a href={getCategoryPageUrl()} class="hover:text-(--primary) transition-colors">
105
                {i18n(I18nKey.categories)}
106
            </a>
107
            <span class="opacity-50">/</span>
108
            <span class="text-90 font-medium">{decodedCategory}</span>
109
        </nav>
110
    </div>
111

112
    <!-- 分类标题 -->
113
    <div class="card-base px-8 py-6 mb-6">
114
        <div class="flex items-center gap-4">
115
            <div class="w-14 h-14 rounded-full bg-(--primary)/10 flex items-center justify-center flex-shrink-0">
116
                <Icon name="material-symbols:folder-open" class="text-3xl text-(--primary)" />
117
            </div>
118
            <div>
119
                <h1 class="text-2xl font-bold text-90">{decodedCategory}</h1>
120
                <p class="text-sm text-30 mt-1">
121
                    {totalPosts} {i18n(I18nKey.postsCount)}
122
                </p>
123
            </div>
124
        </div>
125
    </div>
126

127
    <!-- 标签筛选区域 -->
128
    {
129
        tags.length > 0 && (
130
            <div class="card-base px-6 py-5 mb-6">
131
                <div class="flex items-center gap-3 mb-3">
132
                    <Icon name="material-symbols:label" class="text-lg text-(--primary)" />
133
                    <span class="text-sm font-medium text-90">{i18n(I18nKey.tags)}</span>
134
                    <span class="text-xs text-30">({tags.length})</span>
135
                </div>
136
                <div class="flex flex-wrap gap-2">
137
                    {tags.map((tag: { name: string; count: number }) => (
138
                        <a
139
                            href={getTagUrl(tag.name)}
140
                            class="btn-regular px-3 py-1.5 text-sm rounded-md
141
                                     transition-all duration-200
142
                                     hover:scale-105 hover:bg-(--primary)/20
143
                                     active:scale-95"
144
                        >
145
                            #{tag.name}
146
                            <span class="ml-1 text-xs opacity-60">({tag.count})</span>
147
                        </a>
148
                    ))}
149
                </div>
150
            </div>
151
        )
152
    }
153

154
    <!-- 文章列表 -->
155
    <div
156
        id="post-list-container"
157
        class={`transition-all duration-500 ease-in-out mb-4 ${initialLayoutClass}`}
158
        data-default-layout={defaultLayout}
159
        data-mobile-default-layout={mobileDefaultLayout}
160
        data-masonry-enabled={masonryEnabled}
161
        data-column-width={columnWidth}
162
        style={`--post-card-min-width: ${columnWidth}px;`}
163
    >
164
        {
165
            posts.length > 0 ? (
166
                posts.map((entry: PostEntry, index: number) => (
167
                    <PostCard
168
                        entry={entry}
169
                        title={entry.data.title}
170
                        tags={entry.data.tags}
171
                        category={entry.data.category}
172
                        published={entry.data.published}
173
                        updated={entry.data.updated}
174
                        url={getPostUrlBySlug(entry.id)}
175
                        image={entry.data.image}
176
                        description={entry.data.description}
177
                        draft={entry.data.draft}
178
                        pinned={entry.data.pinned}
179
                        password={!!entry.data.password}
180
                        loading={index < 2 ? "eager" : "lazy"}
181
                        class:list="onload-animation post-card-item"
182
                        style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
183
                    />
184
                ))
185
            ) : (
186
                <div class="card-base px-8 py-12 text-center w-full">
187
                    <Icon name="material-symbols:article" class="text-5xl text-30 mx-auto mb-4" />
188
                    <p class="text-30">{i18n(I18nKey.bangumiNoData)}</p>
189
                </div>
190
            )
191
        }
192
    </div>
193
</MainGridLayout>
194

195
<script is:inline define:vars={{ defaultLayout, mobileDefaultLayout, columnWidth }}>
196
    (function() {
197
        const savedLayout = localStorage.getItem('postListLayout');
198
        const effectiveDefault = window.innerWidth < 780 ? mobileDefaultLayout : defaultLayout;
199
        const effectiveLayout = window.innerWidth < 380 ? 'grid' : (savedLayout || effectiveDefault);
200

201
        if (effectiveLayout !== defaultLayout) {
202
            const container = document.getElementById('post-list-container');
203

204
            if (container) {
205
                container.style.transition = 'none';
206
                container.classList.remove('list-mode', 'grid-mode', 'post-grid-auto', 'flex', 'flex-col', 'gap-4', 'md:gap-4');
207

208
                if (effectiveLayout === 'grid') {
209
                    container.classList.add('grid-mode', 'post-grid-auto');
210
                } else {
211
                    container.classList.add('list-mode', 'flex', 'flex-col', 'gap-4', 'md:gap-4');
212
                }
213

214
                container.offsetHeight;
215
                container.style.transition = '';
216
            }
217
        }
218
    })();
219
</script>
220

221
<script>
222
    function initLayout() {
223
        const postListContainer = document.getElementById("post-list-container");
224
        if (!postListContainer) return;
225

226
        const savedLayout = localStorage.getItem("postListLayout");
227
        const defaultLayout =
228
            postListContainer.getAttribute("data-default-layout") || "list";
229
        const mobileDefaultLayout =
230
            postListContainer.getAttribute("data-mobile-default-layout") || defaultLayout;
231

232
        const effectiveDefault = window.innerWidth < 780 ? mobileDefaultLayout : defaultLayout;
233
        let currentLayout = savedLayout || effectiveDefault;
234

235
        if (window.innerWidth < 380) {
236
            currentLayout = "grid";
237
        }
238

239
        updatePostListLayout(currentLayout);
240
    }
241

242
    function updatePostListLayout(layout: string) {
243
        const postListContainer = document.getElementById("post-list-container");
244
        if (!postListContainer) return;
245

246
        const isCurrentGrid = postListContainer.classList.contains("grid-mode");
247
        const isCurrentList = postListContainer.classList.contains("list-mode");
248
        const currentLayout = isCurrentGrid ? "grid" : (isCurrentList ? "list" : null);
249

250
        const masonryEnabled = postListContainer.getAttribute("data-masonry-enabled") === "true";
251

252
        const applyClasses = () => {
253
            postListContainer.classList.remove("list-mode", "grid-mode", "post-grid-auto");
254
            if (layout === "grid") {
255
                postListContainer.classList.add("grid-mode");
256
                postListContainer.classList.remove("flex", "flex-col");
257
                if (masonryEnabled) {
258
                    postListContainer.classList.remove("post-grid-auto");
259
                    applyMasonryLayout();
260
                } else {
261
                    postListContainer.classList.add("post-grid-auto");
262
                    resetMasonryLayout();
263
                }
264
            } else {
265
                postListContainer.classList.add("list-mode");
266
                postListContainer.classList.add("flex", "flex-col", "gap-4", "md:gap-4");
267
                postListContainer.classList.remove("post-grid-auto");
268
                resetMasonryLayout();
269
            }
270
        };
271

272
        if (!currentLayout) {
273
            applyClasses();
274
            return;
275
        }
276

277
        if (currentLayout === layout) {
278
            if (layout === "grid" && masonryEnabled) {
279
                applyMasonryLayout();
280
            }
281
            return;
282
        }
283

284
        postListContainer.classList.add("layout-switching");
285

286
        setTimeout(() => {
287
            applyClasses();
288

289
            requestAnimationFrame(() => {
290
                postListContainer.classList.remove("layout-switching");
291
            });
292
        }, 200);
293
    }
294

295
    function resetMasonryLayout() {
296
        const container = document.getElementById("post-list-container");
297
        if (!container) return;
298

299
        container.style.height = "";
300
        container.style.position = "";
301
        container.style.display = "";
302

303
        const items = container.querySelectorAll(".post-card-item");
304
        items.forEach((item) => {
305
            // @ts-ignore
306
            item.style.position = "";
307
            // @ts-ignore
308
            item.style.top = "";
309
            // @ts-ignore
310
            item.style.left = "";
311
            // @ts-ignore
312
            item.style.width = "";
313
        });
314
    }
315

316
    function applyMasonryLayout() {
317
        const container = document.getElementById("post-list-container");
318
        if (!container) return;
319

320
        const masonryEnabled = container.getAttribute("data-masonry-enabled") === "true";
321
        if (!masonryEnabled) return;
322

323
        if (!container.classList.contains("grid-mode")) return;
324

325
        const items = Array.from(container.querySelectorAll(".post-card-item"));
326
        if (items.length === 0) return;
327

328
        const gap = 16;
329
        const columnWidth = parseInt(container.getAttribute("data-column-width") || "280");
330

331
        container.style.position = "relative";
332
        container.style.display = "block";
333

334
        const containerWidth = container.offsetWidth;
335
        const colCount = Math.max(1, Math.floor((containerWidth + gap) / (columnWidth + gap)));
336
        const itemWidth = (containerWidth - (colCount - 1) * gap) / colCount;
337

338
        const colHeights = new Array(colCount).fill(0);
339

340
        items.forEach((item) => {
341
            const colIndex = colHeights.indexOf(Math.min(...colHeights));
342
            // @ts-ignore
343
            item.style.position = "absolute";
344
            // @ts-ignore
345
            item.style.width = `${itemWidth}px`;
346
            // @ts-ignore
347
            item.style.setProperty('height', 'auto', 'important');
348

349
            // @ts-ignore
350
            const height = item.offsetHeight;
351
            const top = colHeights[colIndex];
352
            const left = colIndex * (itemWidth + gap);
353

354
            // @ts-ignore
355
            item.style.top = `${top}px`;
356
            // @ts-ignore
357
            item.style.left = `${left}px`;
358

359
            colHeights[colIndex] += height + gap;
360
        });
361

362
        container.style.height = `${Math.max(...colHeights)}px`;
363
    }
364

365
    document.addEventListener("DOMContentLoaded", function () {
366
        setTimeout(initLayout, 50);
367

368
        const imgs = document.querySelectorAll('#post-list-container img');
369
        imgs.forEach(img => {
370
            // @ts-ignore
371
            if(img.complete) return;
372
            img.addEventListener('load', () => {
373
                applyMasonryLayout();
374
            });
375
        });
376
    });
377

378
    document.addEventListener("visibilitychange", function () {
379
        if (!document.hidden) {
380
            setTimeout(initLayout, 100);
381
        }
382
    });
383

384
    window.addEventListener("layoutChange", function (event) {
385
        // @ts-ignore
386
        const newLayout = event.detail.layout;
387
        const postListContainer = document.getElementById("post-list-container");
388
        if (!postListContainer) return;
389

390
        updatePostListLayout(newLayout);
391
    });
392

393
    let resizeTimeout: any;
394
    window.addEventListener("resize", function () {
395
        clearTimeout(resizeTimeout);
396
        resizeTimeout = setTimeout(function () {
397
            initLayout();
398
        }, 250);
399
    });
400

401
    document.addEventListener("astro:page-load", function () {
402
        setTimeout(initLayout, 50);
403

404
        const imgs = document.querySelectorAll('#post-list-container img');
405
        imgs.forEach(img => {
406
            // @ts-ignore
407
            if(img.complete) return;
408
            img.addEventListener('load', () => {
409
                applyMasonryLayout();
410
            });
411
        });
412
    });
413

414
    document.addEventListener("astro:after-swap", function () {
415
        setTimeout(initLayout, 50);
416
    });
417

418
    setTimeout(initLayout, 0);
419
</script>
420

421
<style is:global>
422
    .post-grid-auto {
423
        display: grid;
424
        grid-template-columns: repeat(auto-fill, minmax(var(--post-card-min-width, 320px), 1fr));
425
        gap: 1rem;
426
    }
427

428
    @media (max-width: 767px) {
429
        .list-mode .post-meta-root {
430
            transform: scale(0.72) !important;
431
            transform-origin: top left !important;
432
            margin-bottom: 0.25rem !important;
433
            width: 139% !important;
434
        }
435
        .list-mode :global(.post-meta) {
436
            margin-bottom: 0.25rem !important;
437
            gap: 0.25rem !important;
438
        }
439
    }
440
</style>
441

442
<style>
443
    #post-list-container {
444
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
445
                    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
446
    }
447

448
    #post-list-container > :global(*) {
449
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
450
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
451
    }
452

453
    #post-list-container {
454
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
455
    }
456

457
    #post-list-container.layout-switching {
458
        opacity: 0;
459
        transform: translateY(10px);
460
    }
461

462
    #post-list-container.grid-mode :global(.post-card-wrapper) {
463
        flex-direction: column-reverse !important;
464
    }
465

466
    #post-list-container.grid-mode :global(.post-card-image) {
467
        width: 100% !important;
468
        position: relative !important;
469
        top: auto !important;
470
        right: auto !important;
471
        bottom: auto !important;
472
        border-radius: var(--radius-large) var(--radius-large) 0 0 !important;
473
    }
474

475
    #post-list-container.grid-mode :global(.post-card-content) {
476
        width: 100% !important;
477
        padding: 1rem !important;
478
    }
479

480
    #post-list-container.grid-mode :global(.no-cover .post-card-content) {
481
        padding-right: 4.5rem !important;
482
    }
483

484
    #post-list-container.grid-mode :global(.post-card-title) {
485
        font-size: 1.35rem !important;
486
        line-height: 1.75rem !important;
487
        margin-bottom: 0.5rem !important;
488
    }
489

490
    #post-list-container.grid-mode :global(.post-card-title::before) {
491
        display: none !important;
492
    }
493

494
    #post-list-container.grid-mode :global(.post-meta) {
495
        margin-bottom: 0.5rem !important;
496
        gap: 0.5rem !important;
497
    }
498

499
    #post-list-container.grid-mode :global(.post-meta .text-xl) {
500
        font-size: 1rem !important;
501
        line-height: 1.25rem !important;
502
    }
503

504
    #post-list-container.grid-mode :global(.meta-icon) {
505
        width: 1.5rem !important;
506
        height: 1.5rem !important;
507
        margin-right: 0.25rem !important;
508
    }
509

510
    #post-list-container.grid-mode :global(.post-meta .text-sm) {
511
        font-size: 0.75rem !important;
512
        line-height: 1rem !important;
513
    }
514

515
    #post-list-container.grid-mode :global(.post-meta .pinned-btn) {
516
        padding: 0.25rem 0.375rem !important;
517
    }
518
</style>

1
// 根据页面开关动态生成导航栏配置
2
const getDynamicNavBarConfig = (): NavBarConfig => {
3
  // 基础导航栏链接
4
  const links: (NavBarLink | LinkPreset)[] = [
5
    // 主页
6
    LinkPreset.Home,
7

8
    // 文章分类
9
    {
10
      name: "分类",
11
      url: "/categories/",
12
      icon: "material-symbols:folder-open",
13
    },
14

15
    // 归档
16
    LinkPreset.Archive,
17
  ];
18
}