From cb44d0b2d258269ae2435ff26402bbac6114135d Mon Sep 17 00:00:00 2001 From: wait4xx Date: Wed, 4 Nov 2026 23:10:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(about):=20=E5=85=B3=E4=BA=8E=E9=A1=B5?= =?UTF-8?q?=E4=BA=94=E6=96=B9=E6=A1=88=E9=A2=84=E8=A7=88=E4=B8=8A=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户要求 3-5 个方案供审阅：A 白纸单栏 / B 名片双栏 / C 杂志分节 / D 时间线 / E 卡片流， 共用 about.yaml 真实数据。 验证: 构建 exit 0；五案渲染、零溢出 Spec: none (预览页随选型迭代) Co-authored-by: GLM-5.3 --- scripts/build-perf/content-lint.mjs | 2 +- src/pages/about-preview.astro | 336 ++++++++++++++++++++++++++++ 2 files changed, 337 insertions(+), 1 deletion(-) create mode 100644 src/pages/about-preview.astro diff --git a/scripts/build-perf/content-lint.mjs b/scripts/build-perf/content-lint.mjs index f711ccb..c076999 100644 --- a/scripts/build-perf/content-lint.mjs +++ b/scripts/build-perf/content-lint.mjs @@ -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 = []) { diff --git a/src/pages/about-preview.astro b/src/pages/about-preview.astro new file mode 100644 index 0000000..1501ca8 --- /dev/null +++ b/src/pages/about-preview.astro @@ -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 }, +]; +--- + + +

关于页：五个方案

+

+ 五案共用同一份内容（ about.yaml ），只是结构与视觉不同——选哪个都不用迁移内容。 +
+ 回字母告诉我选哪个（A / B / C / D / E，也可以说「B 但左栏窄一点」这类微调）。 +

+ + + + +
+
+ A +

白纸单栏

+

后台就是一个 markdown 编辑器，想写什么写什么、想多长多长。 + 优点编辑自由度最大、零结构约束；代价全靠文字功力，视觉最素。

+
+
+ +
+

{linkTitle}

+
    + {linkItems.map((it) => ( +
  • {it.label.zh}{it.note?.zh && — {it.note.zh}}
    • + ))} +
+

本站如何构建

+
+

{trackTitle}

+

{trackItems.map((it) => it.name.zh).join(' · ')}

+
+
+ + +
+
+ B +

名片双栏

+

左侧固定身份名片（头像/名字/社交），右侧正文随滚动。 + 优点"这是谁"一目了然、个人站经典形态；代价双栏在窄屏折为上下。

+
+
+ +
+
+

{linkTitle}

+
    + {linkItems.map((it) => ( +
  • {it.label.zh}{it.note?.zh && — {it.note.zh}}
    • + ))} +
+

本站如何构建

+
+
+
+
+ + +
+
+ C +

杂志分节

+

开头一段大字引言，正文按编号分节，右侧粘性目录跟随滚动。 + 优点最"杂志"、阅读动线清晰；代价结构感强，编辑时要跟着分节写。

+
+
{identityHtml}
+
+
+ {sections.map((sec) => ( +
+

{sec.no} {sec.title}

+ {sec.isTracks ? ( +
    + {trackItems.map((it) => ( +
  • + {iconPath(it.icon) && ( + + )} + {it.name.zh} + {it.desc.zh} +
    • + ))} +
+ ) : sec.isLinks ? ( +
    + {linkItems.map((it) => ( +
  • {it.label.zh}{it.note?.zh && — {it.note.zh}}
    • + ))} +
+ ) : ( +
+ )} +
+ ))} +
+ +
+
+ + +
+
+ D +

时间线

+

把"我是谁"讲成一条轨迹：起点 → 第二主线 → 作品 → 信条，沿线是节点与短段落。 + 优点叙事感最强、"讲人"最像讲故事；代价内容要贴合时间线结构来写。

+
+
    +
  1. + +

    起点：气象

    +

    一个想做预报的人，依旧把云图当日常读物。

    +
    2. +
  2. + +

    第二主线：代码

    +

    Linux、容器与自托管，把日常工具一件件磨顺手。

    +
    3. +
  3. + +

    作品：wait4x.online

    +

    把读过的书、按下的快门都放进同一个工作台。

    +
    4. +
  4. + +

    信条

    +

    拥抱开源，热爱开源。

    +
    5. +
+
+

{linkTitle}

+ +
+
+ + +
+
+ E +

卡片流

+

所有内容装进一组卡片：身份卡打头，正文/兴趣/链接各占一张，两列错落。 + 优点区块感最强、和站内其它页面语言统一；代价卡片边界会把长文切碎。

+
+
+
+

关于我

+

{trackTitle}

+
    + {trackItems.map((it) => ( +
  • {it.name.zh}{it.desc.zh}
    • + ))} +
+
+

{linkTitle}

+
    + {linkItems.map((it) => ( +
  • {it.label.zh}{it.note?.zh && — {it.note.zh}}
    • + ))} +
+
+

本站如何构建

+
+
+ +

五案数据同源：content/site/about.yaml（后台「页面文案 → 关于页」可改）。选定后我把该案落进正式 /about。

+ + +