yukun-hh
5f1c21b6bf
- 设计令牌：暖米 #F9F8F6 纸面 × 柔和黑 #1C1C1C，透明度分层 /60 /40 /10，纯单色 - 圆角归零、阴影清零、渐变清除；删除渐变光斑背景层 Background.astro - 字体：Playfair Display + Noto Serif SC 衬线标题（weight 400）+ Noto Sans SC 正文 - 首页巨型衬线刊名 + 日期线 + 最新发布索引卡；Section 自动编号 - 文章页改刊头式标题区；归档改衬线年号 + 目录行；卡片去渐变封面改纯排版 - 交互：hover 细线下划线、标题转斜体、油墨反转，prefers-reduced-motion 降级保留 - 文件处理逻辑 / 文章内容 / deploy 上传脚本未改动 - 附：新增 LLM 系列笔记与配图、Artalk 部署配置、评论组件入库
60 lines
1.9 KiB
Text
60 lines
1.9 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) + clamp(48px, 8vw, 96px));">
|
|
<header class="page-head reveal">
|
|
<h1 class="page-title">全部文章</h1>
|
|
<p class="page-sub">共 {all.length} 篇 · 按发布时间倒序排列</p>
|
|
</header>
|
|
|
|
<div class="tag-bar reveal">
|
|
<span class="label">筛选标签</span>
|
|
<div class="tag-list">
|
|
<TagChip tag="全部" href="/posts" active />
|
|
{tags.map((t) => <TagChip tag={t.tag} count={t.count} />)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" style="padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 8vw, 120px);">
|
|
<div class="post-grid">
|
|
{all.map((post) => <PostCard post={post} class="reveal" />)}
|
|
</div>
|
|
</section>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.page-head { margin-bottom: clamp(32px, 5vw, 48px); }
|
|
.page-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem);
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.05;
|
|
color: var(--ink);
|
|
}
|
|
.page-sub { color: var(--ink-60); margin-top: 14px; font-size: 0.9rem; letter-spacing: 0.05em; }
|
|
.tag-bar {
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 18px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.post-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: clamp(20px, 2.5vw, 32px);
|
|
}
|
|
</style>
|