43 lines
1.8 KiB
Text
43 lines
1.8 KiB
Text
|
---
|
||
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||
|
|
import PostCard from '../../components/PostCard.astro';
|
||
|
|
import TagChip from '../../components/TagChip.astro';
|
||
|
|
import { getPublishedPosts, getAllTags } from '../../lib/utils';
|
||
|
|
|
||
|
|
const all = await getPublishedPosts();
|
||
|
|
const tags = getAllTags(all);
|
||
|
|
---
|
||
|
|
|
||
|
|
<BaseLayout title="全部文章" description="Yukun's Blog 的全部文章列表">
|
||
|
|
<section class="container" style="padding-top: calc(var(--nav-h) + 48px);">
|
||
|
|
<header class="page-head reveal">
|
||
|
|
<h1 class="page-title">全部文章</h1>
|
||
|
|
<p class="page-sub">共 {all.length} 篇 · 按发布时间倒序排列</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="tag-bar glass reveal">
|
||
|
|
<span class="tag-label">筛选标签</span>
|
||
|
|
<div class="tag-list">
|
||
|
|
<a href="/posts" class="tag-chip active">全部</a>
|
||
|
|
{tags.map((t) => <TagChip tag={t.tag} count={t.count} />)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="container section" style="padding-top: 24px;">
|
||
|
|
<div class="post-grid">
|
||
|
|
{all.map((post) => <PostCard post={post} class="reveal" />)}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</BaseLayout>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.page-head { margin-bottom: 28px; }
|
||
|
|
.page-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 4vw, 3rem); letter-spacing: -0.03em; color: var(--ink); }
|
||
|
|
.page-sub { color: var(--ink-soft); margin-top: 8px; }
|
||
|
|
.tag-bar { border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
|
||
|
|
.tag-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 700; white-space: nowrap; }
|
||
|
|
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
|
|
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2.5vw, 24px); }
|
||
|
|
</style>
|