diff --git a/content/posts/writing-template.md b/content/posts/writing-template.md index 80ccc7d..c31349a 100644 --- a/content/posts/writing-template.md +++ b/content/posts/writing-template.md @@ -7,8 +7,9 @@ tags: - 模板 pinned: true description: 一篇文章演示全站可用的排版能力：标题层级、彩色强调、字族、引用、代码窗、表格、图、链接卡、折叠。复制它开始写新文。 -hiddenTag: true +hidden: true draft: false +hiddenTag: true --- 这篇不是教程，是**可复制的模板**。下面每一节都在真跑——你看到的效果，就是 Markdown 源码能产出的效果。写新文章时，把本文件复制一份、改个 slug、删掉不需要的段落即可。 diff --git a/src/pages/about-preview.astro b/src/pages/about-preview.astro deleted file mode 100644 index 1501ca8..0000000 --- a/src/pages/about-preview.astro +++ /dev/null @@ -1,336 +0,0 @@ ---- -/** - * 关于页形态预览（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。

- - -