wait4x/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(about): 关于页五方案预览上线

Browse Source 
用户要求 3-5 个方案供审阅：A 白纸单栏 / B 名片双栏 / C 杂志分节 / D 时间线 / E 卡片流，
共用 about.yaml 真实数据。

验证: 构建 exit 0；五案渲染、零溢出

Spec: none (预览页随选型迭代)

Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed 2026-11-04 23:10:56 +08:00
1 parent 129b23cd2b
commit cb44d0b2d2
2 files changed
+337 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

scripts/build-perf/content-lint.mjs
+1 -1
View File
@@ -17,7 +17,7 @@ const SKIP_PREFIX = ['/admin/', '/photos-originals/']; // admin=CMS 路由；pho
const SKIP_FILE = new Set(['/404.html']); // Astro 404 页不参与配对
// 一次性预览路由（无 en 对应页）：完全不参与检查。用户选定方案后随路由一起删除。
const SKIP_ALL = new Set(['/heatmap-preview/index.html']);
const SKIP_ALL = new Set(['/heatmap-preview/index.html', '/about-preview/index.html']);
function walk(dir, out = []) {
src/pages/about-preview.astro
+336
View File
@@ -0,0 +1,336 @@
---
/**
* 关于页形态预览（Phase 5k）：一页并陈五个方案，共用 about.yaml 真实数据，供用户点选。
*
* 为什么单开预览路由：关于页是"讲人"的页面，形态是纯审美 + 编辑自由度的取舍，
* 改错要回滚一轮。选定后我把选中方案落进 AboutPage.astro，然后删掉本路由。
*
* 五案数据完全同源（content/site/about.yaml 的 blocks），只是结构与视觉不同——
* 无论选哪个，内容都不用迁移。
*/
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import IdCard from '../components/IdCard.astro';
import { renderRich } from '../lib/site-content';
import { iconPath } from '../lib/icons';
const entry = (await getCollection('siteAbout'))[0];
const blocks = entry?.data.blocks ?? [];
const proseBlocks = blocks.filter((b) => b.type === 'prose');
const tracksBlock: any = blocks.find((b) => b.type === 'tracks') ?? null;
const linksBlock: any = blocks.find((b) => b.type === 'linklist') ?? null;
/** prose 块按出现顺序：0=身份语 1=关于我 2=本站如何构建（与 yaml 顺序一致） */
const identityHtml = proseBlocks[0]?.body?.zh ? await renderRich(proseBlocks[0].body.zh) : '';
const aboutMeHtml = proseBlocks[1]?.body?.zh ? await renderRich(proseBlocks[1].body.zh) : '';
const howHtml = proseBlocks[2]?.body?.zh ? await renderRich(proseBlocks[2].body.zh) : '';
const aboutMePlain = (proseBlocks[1]?.body?.zh ?? '').replace(/<[^>]+>/g, '').trim();
const trackItems: any[] = tracksBlock?.items ?? [];
const trackTitle = tracksBlock?.title?.zh ?? '';
const linkItems: any[] = linksBlock?.items ?? [];
const linkTitle = linksBlock?.title?.zh ?? '';
const sections = [
{ no: '01', title: '关于我', html: aboutMeHtml },
{ no: '02', title: trackTitle, isTracks: true },
{ no: '03', title: linkTitle, isLinks: true },
{ no: '04', title: '本站如何构建', html: howHtml },
];
---
<BaseLayout title="关于页形态预览 · wait4x" description="关于页五个设计方案的并陈预览">
<h1 class="pv-title">关于页：五个方案</h1>
<p class="pv-note">
五案共用同一份内容（ about.yaml ），只是结构与视觉不同——<strong>选哪个都不用迁移内容</strong>。
<br />
<strong>回字母告诉我选哪个</strong>（A / B / C / D / E，也可以说「B 但左栏窄一点」这类微调）。
</p>
<nav class="pv-switch" aria-label="方案跳转">
<a href="#va" class="pv-chip">A · 白纸单栏</a>
<a href="#vb" class="pv-chip">B · 名片双栏</a>
<a href="#vc" class="pv-chip">C · 杂志分节</a>
<a href="#vd" class="pv-chip">D · 时间线</a>
<a href="#ve" class="pv-chip">E · 卡片流</a>
</nav>
<!-- ═══════════ A · 白纸单栏（纯 markdown 直编） ═══════════ -->
<section id="va" class="pv-sec">
<header class="pv-head">
<span class="pv-tag mono">A</span>
<h2>白纸单栏</h2>
<p class="pv-pros">后台就是一个 markdown 编辑器，想写什么写什么、想多长多长。
<b>优点</b>编辑自由度最大、零结构约束；<b>代价</b>全靠文字功力，视觉最素。</p>
</header>
<article class="va-doc rich">
<IdCard />
<div class="va-doc-body" set:html={identityHtml + aboutMeHtml} />
<h2 class="va-h">{linkTitle}</h2>
<ul class="va-links">
{linkItems.map((it) => (
<li><a href={it.href}>{it.label.zh}</a>{it.note?.zh && <span class="va-note"> — {it.note.zh}</span>}</li>
))}
</ul>
<h2 class="va-h">本站如何构建</h2>
<div set:html={howHtml} />
<h2 class="va-h">{trackTitle}</h2>
<p>{trackItems.map((it) => it.name.zh).join(' · ')}</p>
</article>
</section>
<!-- ═══════════ B · 名片双栏 ═══════════ -->
<section id="vb" class="pv-sec">
<header class="pv-head">
<span class="pv-tag mono">B</span>
<h2>名片双栏</h2>
<p class="pv-pros">左侧固定身份名片（头像/名字/社交），右侧正文随滚动。
<b>优点</b>"这是谁"一目了然、个人站经典形态；<b>代价</b>双栏在窄屏折为上下。</p>
</header>
<div class="vb-grid">
<aside class="vb-side">
<IdCard />
</aside>
<div class="vb-main">
<div class="rich" set:html={aboutMeHtml} />
<h3 class="vb-h">{linkTitle}</h3>
<ul class="vb-links">
{linkItems.map((it) => (
<li><a href={it.href}>{it.label.zh}</a>{it.note?.zh && <span class="vb-note"> — {it.note.zh}</span>}</li>
))}
</ul>
<h3 class="vb-h">本站如何构建</h3>
<div class="rich" set:html={howHtml} />
</div>
</div>
</section>
<!-- ═══════════ C · 杂志分节带目录 ═══════════ -->
<section id="vc" class="pv-sec">
<header class="pv-head">
<span class="pv-tag mono">C</span>
<h2>杂志分节</h2>
<p class="pv-pros">开头一段大字引言，正文按编号分节，右侧粘性目录跟随滚动。
<b>优点</b>最"杂志"、阅读动线清晰；<b>代价</b>结构感强，编辑时要跟着分节写。</p>
</header>
<blockquote class="vc-quote">{identityHtml}</blockquote>
<div class="vc-grid">
<div class="vc-body">
{sections.map((sec) => (
<section class="vc-sec" id={`vc-${sec.no}`}>
<h3 class="vc-no"><span class="mono">{sec.no}</span> {sec.title}</h3>
{sec.isTracks ? (
<ul class="vc-tracks">
{trackItems.map((it) => (
<li>
{iconPath(it.icon) && (
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d={iconPath(it.icon)} /></svg>
)}
<b>{it.name.zh}</b>
<span>{it.desc.zh}</span>
</li>
))}
</ul>
) : sec.isLinks ? (
<ul class="vc-links">
{linkItems.map((it) => (
<li><a href={it.href}>{it.label.zh}</a>{it.note?.zh && <span> — {it.note.zh}</span>}</li>
))}
</ul>
) : (
<div class="rich" set:html={sec.html} />
)}
</section>
))}
</div>
<aside class="vc-toc mono" aria-label="本页目录">
{sections.map((sec) => (
<a href={`#vc-${sec.no}`}><span>{sec.no}</span> {sec.title}</a>
))}
</aside>
</div>
</section>
<!-- ═══════════ D · 时间线 ═══════════ -->
<section id="vd" class="pv-sec">
<header class="pv-head">
<span class="pv-tag mono">D</span>
<h2>时间线</h2>
<p class="pv-pros">把"我是谁"讲成一条轨迹：起点 → 第二主线 → 作品 → 信条，沿线是节点与短段落。
<b>优点</b>叙事感最强、"讲人"最像讲故事；<b>代价</b>内容要贴合时间线结构来写。</p>
</header>
<ol class="vd-tl">
<li class="vd-node">
<span class="vd-dot" aria-hidden="true"></span>
<h3>起点：气象</h3>
<p>一个想做预报的人，依旧把云图当日常读物。</p>
</li>
<li class="vd-node">
<span class="vd-dot" aria-hidden="true"></span>
<h3>第二主线：代码</h3>
<p>Linux、容器与自托管，把日常工具一件件磨顺手。</p>
</li>
<li class="vd-node">
<span class="vd-dot" aria-hidden="true"></span>
<h3>作品：wait4x.online</h3>
<p>把读过的书、按下的快门都放进同一个工作台。</p>
</li>
<li class="vd-node">
<span class="vd-dot" aria-hidden="true"></span>
<h3>信条</h3>
<p><em>拥抱开源，热爱开源。</em></p>
</li>
</ol>
<div class="vd-find">
<h3 class="vb-h">{linkTitle}</h3>
<ul class="vb-links">
{linkItems.map((it) => (
<li><a href={it.href}>{it.label.zh}</a></li>
))}
</ul>
</div>
</section>
<!-- ═══════════ E · 卡片流 ═══════════ -->
<section id="ve" class="pv-sec">
<header class="pv-head">
<span class="pv-tag mono">E</span>
<h2>卡片流</h2>
<p class="pv-pros">所有内容装进一组卡片：身份卡打头，正文/兴趣/链接各占一张，两列错落。
<b>优点</b>区块感最强、和站内其它页面语言统一；<b>代价</b>卡片边界会把长文切碎。</p>
</header>
<div class="ve-grid">
<div class="ve-card ve-wide"><IdCard /></div>
<div class="ve-card"><h3 class="ve-h">关于我</h3><div class="rich" set:html={aboutMeHtml} /></div>
<div class="ve-card"><h3 class="ve-h">{trackTitle}</h3>
<ul class="ve-tracks">
{trackItems.map((it) => (
<li><b>{it.name.zh}</b><span>{it.desc.zh}</span></li>
))}
</ul>
</div>
<div class="ve-card"><h3 class="ve-h">{linkTitle}</h3>
<ul class="vb-links">
{linkItems.map((it) => (
<li><a href={it.href}>{it.label.zh}</a>{it.note?.zh && <span class="vb-note"> — {it.note.zh}</span>}</li>
))}
</ul>
</div>
<div class="ve-card ve-wide"><h3 class="ve-h">本站如何构建</h3><div class="rich" set:html={howHtml} /></div>
</div>
</section>
<p class="pv-foot mono">五案数据同源：content/site/about.yaml（后台「页面文案 → 关于页」可改）。选定后我把该案落进正式 /about。</p>
</BaseLayout>
<style>
.pv-title { font-size: var(--text-h1); color: var(--ink-1); margin-top: var(--space-5); }
.pv-note { font-size: 14px; color: var(--ink-3); line-height: 1.75; max-width: var(--measure); margin-block: var(--space-2) var(--space-4); }
.pv-switch {
position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: var(--space-2);
padding: var(--space-2) 0; background: color-mix(in oklab, var(--bg) 92%, transparent);
backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.pv-chip {
font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2);
border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pv-chip:hover { border-color: var(--accent); color: var(--ink-1); }
.pv-sec { margin-top: var(--space-6); scroll-margin-top: 56px; }
.pv-head { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.pv-tag { display: inline-block; font-size: 11px; color: var(--ink-4); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.pv-head h2 { font-size: 20px; color: var(--ink-1); margin: var(--space-1) 0; }
.pv-pros { font-size: 13px; color: var(--ink-3); line-height: 1.7; max-width: var(--measure); margin: 0 0 var(--space-3); }
.pv-pros b { color: var(--ink-2); }
.pv-foot { font-size: 12px; color: var(--ink-4); margin-top: var(--space-6); }
/* ── A 白纸单栏 ── */
.va-doc { max-width: var(--measure); }
.va-doc :global(p) { line-height: 1.85; color: var(--ink-2); }
.va-h {
font-size: 15px; font-family: var(--font-mono); color: var(--ink-3);
letter-spacing: 0.06em; margin: var(--space-5) 0 var(--space-2);
}
.va-links, .vb-links { list-style: none; padding: 0; margin: 0; }
.va-links li, .vb-links li { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.va-links a, .vb-links a { color: var(--ink-1); }
.va-note, .vb-note { color: var(--ink-4); font-size: 12.5px; }
/* ── B 名片双栏 ── */
.vb-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-5); align-items: start; }
.vb-side { position: sticky; top: 64px; }
.vb-side :global(.idcard), .vb-side :global([data-idcard]) { box-shadow: none; }
.vb-main { min-width: 0; }
.vb-main :global(p) { line-height: 1.8; color: var(--ink-2); }
.vb-h { font-size: 14px; font-family: var(--font-mono); color: var(--ink-3); margin: var(--space-4) 0 var(--space-2); }
/* ── C 杂志 ── */
.vc-quote {
margin: 0 0 var(--space-5);
font-family: var(--font-serif);
font-size: 26px;
line-height: 1.6;
color: var(--ink-1);
border-left: 3px solid var(--accent);
padding-left: var(--space-4);
max-width: 620px;
}
.vc-quote :global(p) { margin: 0; }
.vc-quote :global(.font-huiwen) { font-size: inherit; }
.vc-grid { display: grid; grid-template-columns: 1fr 180px; gap: var(--space-6); align-items: start; }
.vc-sec + .vc-sec { margin-top: var(--space-6); }
.vc-no { font-size: 17px; color: var(--ink-1); margin: 0 0 var(--space-3); }
.vc-no .mono { color: var(--accent); margin-right: 6px; }
.vc-body :global(p) { line-height: 1.85; color: var(--ink-2); }
.vc-tracks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.vc-tracks li {
display: flex; align-items: baseline; gap: 8px;
border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
font-size: 13.5px; color: var(--ink-3);
}
.vc-tracks svg { color: var(--accent); flex: none; translate: 0 2px; }
.vc-tracks b { color: var(--ink-1); }
.vc-links { list-style: none; padding: 0; margin: 0; }
.vc-links li { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.vc-links a { color: var(--ink-1); }
.vc-toc {
position: sticky; top: 64px; display: grid; gap: 8px;
font-size: 12.5px; border-left: 1px solid var(--line); padding-left: var(--space-3);
}
.vc-toc a { color: var(--ink-3); transition: color var(--dur) var(--ease); }
.vc-toc a:hover { color: var(--accent); }
.vc-toc .mono { color: var(--ink-4); margin-right: 4px; }
/* ── D 时间线 ── */
.vd-tl { list-style: none; margin: 0; padding: 0 0 0 var(--space-2); position: relative; }
.vd-tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.vd-node { position: relative; padding: 0 0 var(--space-4) var(--space-4); }
.vd-dot {
position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 0 3px var(--bg);
}
.vd-node h3 { font-size: 15.5px; color: var(--ink-1); margin: 0 0 4px; }
.vd-node p { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 0; max-width: 560px; }
.vd-find { margin-top: var(--space-4); }
/* ── E 卡片流 ── */
.ve-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.ve-card {
border: 1px solid var(--line); border-radius: 12px;
padding: var(--space-4); background: var(--bg-soft);
}
.ve-card.ve-wide { grid-column: 1 / -1; }
.ve-h { font-size: 13px; font-family: var(--font-mono); color: var(--ink-3); margin: 0 0 var(--space-2); }
.ve-card :global(p) { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 0.5em; }
.ve-tracks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ve-tracks li { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ve-tracks b { color: var(--ink-1); }
.ve-tracks span { color: var(--ink-3); }
@media (max-width: 820px) {
.vb-grid, .vc-grid { grid-template-columns: 1fr; }
.vb-side { position: static; }
.vc-toc { display: none; }
.ve-grid { grid-template-columns: 1fr; }
}
</style>