feat(pages): 五页型落地——首页/文章双模板/图库 masonry/瞬间/关于
- 首页：名片+身份陈述空槽+按年分组分轨列表（情绪色/mono标签）+影像格+项目墙
- 文章 /archives/{slug}（与 Halo 旧 URL 1:1）：reading→衬线纸墨 / tech→
TOC 侧栏(≥1120 sticky)+2px 进度条+Artalk 容器占位
- 图库：grid masonry（构建期 aspect-ratio 零 JS）+原生 dialog lightbox
（←→/Esc+EXIF 底栏）+分组筛选
- 瞬间时间线 / 关于（三轨版图+构建说明）
- sharp ^0.35.5 入依赖（Astro 7 不内置，astro:assets 缩略图管线前提）
- 裸 blockquote 默认吃 A 墨线样式（markdown 原生输出无类名的缝隙）
- 车道 30min 超时，产物完整，主会话补 sharp+断言脚本递归修正后收编
验证: pnpm astro build exit 0（7 页）；五路由产物断言过；
scripts/check-responsive.sh 11/11 ok（1120/820/760/560 全档）
Spec: 2026-10-24_add-blog-skeleton
Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed
1 parent
80ff67e8fa
commit
945a9ee610
14 files changed
+1281
-18
No files matched your search
@@ -0,0 +1,270 @@
|
||||
---
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { trackOf } from '../../content.config';
|
||||
|
||||
// URL = /archives/{slug}，slug 即文件名，与 Halo 旧结构 1:1（不可改）
|
||||
export async function getStaticPaths() {
|
||||
const posts = (await getCollection('posts', ({ data }) => !data.draft)).sort(
|
||||
(a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
|
||||
);
|
||||
return posts.map((entry, i) => ({
|
||||
params: { slug: entry.id },
|
||||
props: { entry, prev: posts[i + 1] ?? null, next: posts[i - 1] ?? null },
|
||||
}));
|
||||
}
|
||||
|
||||
interface Props {
|
||||
entry: CollectionEntry<'posts'>;
|
||||
prev: CollectionEntry<'posts'> | null;
|
||||
next: CollectionEntry<'posts'> | null;
|
||||
}
|
||||
const { entry, prev, next } = Astro.props;
|
||||
const { Content, headings } = await render(entry);
|
||||
|
||||
const isReading = entry.data.category === 'reading';
|
||||
const date = entry.data.pubDate.toISOString().slice(0, 10);
|
||||
// 阅读时长：正文汉字数 / 400 向上取整（最低 1 分钟）
|
||||
const hanzi = entry.body?.match(/[\u4e00-\u9fff]/g)?.length ?? 0;
|
||||
const minutes = Math.max(1, Math.ceil(hanzi / 400));
|
||||
const toc = headings.filter((h) => h.depth === 2 || h.depth === 3);
|
||||
---
|
||||
|
||||
<BaseLayout title={`${entry.data.title} · wait4x`} track={isReading ? 'reading' : 'tech'}>
|
||||
{isReading ? (
|
||||
<article class="post post-reading">
|
||||
<header class="post-head">
|
||||
<p class="post-cat">Reading · {trackOf(entry.data.category)}</p>
|
||||
<h1 class="post-title">{entry.data.title}</h1>
|
||||
<p class="post-meta">
|
||||
<i
|
||||
class="emo"
|
||||
style={`background:${entry.data.mood ?? 'var(--mood)'}`}
|
||||
title="情绪色"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<time datetime={entry.data.pubDate.toISOString()}>{date}</time>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>阅读时长 {minutes} 分钟</span>
|
||||
</p>
|
||||
</header>
|
||||
<div class="prose-reading">
|
||||
<Content />
|
||||
</div>
|
||||
</article>
|
||||
) : (
|
||||
<>
|
||||
<div class="read-progress" id="read-progress" aria-hidden="true"></div>
|
||||
<article class="post post-tech">
|
||||
<header class="post-head">
|
||||
<p class="post-cat">Tech · {trackOf(entry.data.category)}</p>
|
||||
<h1 class="post-title">{entry.data.title}</h1>
|
||||
<p class="post-meta">
|
||||
{entry.data.tags.map((tag) => <code class="tag">{`#${tag}`}</code>)}
|
||||
<span aria-hidden="true">·</span>
|
||||
<time datetime={entry.data.pubDate.toISOString()}>{date}</time>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>阅读时长 {minutes} 分钟</span>
|
||||
</p>
|
||||
</header>
|
||||
<div class="tech-grid">
|
||||
<div class="prose-tech">
|
||||
<Content />
|
||||
</div>
|
||||
{toc.length > 0 && (
|
||||
<aside class="toc" aria-label="目录">
|
||||
<p class="toc-h">目录</p>
|
||||
{toc.map((h) => (
|
||||
<a class={h.depth === 3 ? 'toc-sub' : undefined} href={`#${h.slug}`}>{h.text}</a>
|
||||
))}
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
</>
|
||||
)}
|
||||
|
||||
<nav class="pn" aria-label="上一篇下一篇">
|
||||
{prev ? (
|
||||
<a class="pn-item" href={`/archives/${prev.id}/`}>
|
||||
<span>← 上一篇</span>
|
||||
<strong>{prev.data.title}</strong>
|
||||
</a>
|
||||
) : (
|
||||
<span class="pn-item" aria-hidden="true"></span>
|
||||
)}
|
||||
{next ? (
|
||||
<a class="pn-item right" href={`/archives/${next.id}/`}>
|
||||
<span>下一篇 →</span>
|
||||
<strong>{next.data.title}</strong>
|
||||
</a>
|
||||
) : (
|
||||
<span class="pn-item right" aria-hidden="true"></span>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<!-- T8 填充：在此容器注入 Artalk 脚本，data-page-key 即文章 id -->
|
||||
<div id="artalk-container" data-page-key={entry.id}></div>
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
// 阅读进度条（技术轨）：ClientRouter 下模块脚本只执行一次，
|
||||
// 单例滚动监听 + astro:page-load 重绘，条不在当前页时零开销；
|
||||
// prefers-reduced-motion 时整条不初始化（CSS 层同步隐藏）
|
||||
const paint = () => {
|
||||
const bar = document.getElementById('read-progress');
|
||||
if (!bar) return;
|
||||
const el = document.documentElement;
|
||||
const total = el.scrollHeight - el.clientHeight;
|
||||
bar.style.transform = `scaleX(${total > 0 ? el.scrollTop / total : 0})`;
|
||||
};
|
||||
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
addEventListener('scroll', paint, { passive: true });
|
||||
document.addEventListener('astro:page-load', paint);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 版心放行：技术轨带 TOC 时加宽到 measure+200（丙路线 §3；BaseLayout 默认 720） */
|
||||
@media (min-width: 1120px) {
|
||||
:global(main#main:has(.post-tech)) {
|
||||
max-width: calc(var(--measure) + 200px);
|
||||
}
|
||||
}
|
||||
.read-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: var(--accent);
|
||||
transform: scaleX(0);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.read-progress { display: none; }
|
||||
}
|
||||
.post { margin-top: var(--space-5); }
|
||||
.post-cat {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-4);
|
||||
}
|
||||
.post-title {
|
||||
font-size: var(--text-h1);
|
||||
line-height: var(--leading-heading);
|
||||
color: var(--ink-1);
|
||||
margin-top: var(--space-2);
|
||||
text-wrap: balance;
|
||||
}
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-3);
|
||||
font-size: 14px;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.emo {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
flex: none;
|
||||
}
|
||||
.tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--ink-3);
|
||||
background: var(--bg-soft);
|
||||
border-radius: 5px;
|
||||
padding: 1px 7px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 书评轨：Content 渲染的 blockquote 打不了 .quote-block 类，此处镜像同一引文形状 */
|
||||
.prose-reading { margin-top: var(--space-4); }
|
||||
.prose-reading :global(blockquote) {
|
||||
border-left: 2px solid var(--paper-line);
|
||||
padding-left: 1.35em;
|
||||
margin-block: 1.2em;
|
||||
color: color-mix(in oklab, var(--paper-ink) 72%, transparent);
|
||||
}
|
||||
|
||||
/* 技术轨：TOC 侧栏仅 ≥1120 常驻，窄屏隐藏 */
|
||||
.tech-grid { margin-top: var(--space-4); }
|
||||
.toc { display: none; }
|
||||
@media (min-width: 1120px) {
|
||||
.tech-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 176px;
|
||||
gap: var(--space-5);
|
||||
align-items: start;
|
||||
}
|
||||
.toc {
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
max-height: calc(100dvh - 120px);
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
padding-left: var(--space-3);
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
}
|
||||
.toc-h {
|
||||
font-weight: 600;
|
||||
color: var(--ink-1);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.toc a {
|
||||
display: block;
|
||||
padding: var(--space-1) 0;
|
||||
color: var(--ink-3);
|
||||
transition: color var(--dur) var(--ease);
|
||||
}
|
||||
.toc a:hover { color: var(--accent); }
|
||||
.toc .toc-sub { padding-left: var(--space-3); }
|
||||
.prose-tech :global(h2),
|
||||
.prose-tech :global(h3),
|
||||
.prose-reading :global(h2),
|
||||
.prose-reading :global(h3) {
|
||||
scroll-margin-top: 80px;
|
||||
}
|
||||
|
||||
.pn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.pn-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
}
|
||||
.pn-item.right {
|
||||
text-align: right;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.pn-item span { font-size: 12px; color: var(--ink-4); }
|
||||
.pn-item strong {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-1);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color var(--dur) var(--ease);
|
||||
}
|
||||
.pn-item:hover strong { color: var(--accent); }
|
||||
#artalk-container { margin-top: var(--space-5); }
|
||||
</style>
|
||||
Reference in new issue
Block a user