首页形态试验场
/posts/ 的文章列表三制共存、不拍死,这页就是那枚切换闸门;每张卡各认一颗星,灵感取自那颗星的性格——Betelgeuse、Regulus、Canopus。上方预览就是真实的卡制 DOM 与样式(与 /posts/ 同一条 CSS 管线),点下方形态标签当场换装;点完到底部「应用」才写进这台浏览器,回 /posts/ 刷新即见。返回 Playground。
本页预览 · 真实卡制样张
样张为真实文章三篇(封面用蓝族色块代替),DOM 由 site-polish.js 的 ticketCards() 产出形状手工摆置——cards、editorial、ticket 三制都吃这一套节点,点选形态整个预览当场换装,与 /posts/ 刷新后的成品同款。
形态切换
home.list读取中点选只是试穿:写 <html> 的 data-mc-home-list 属性、上方预览当场换装,但不落盘;到底部点「应用」才写进本浏览器偏好。
三张卡与它们的星
Betelgeuse Card · 封面卡片现行 v5
参宿四,猎户座的红超巨星——肉眼能见的最大、层叠最庞杂的恒星之一,复合分层卡的层次就是它的层次。每篇文章是一张立体票卡:玻璃底卡体(半透明加模糊、20px 圆角、投影),左上角一枚微倾的悬浮日历块压住卡口(月份加日期,偶数卡换一支蓝,hover 回正放大);封面图不贴边,收进 14px 内框里像一幅装裱画,hover 时轻微推近;底部是 dashed 上边线的底栏,排「日期 · Nº · 分类」的元信息行(带情绪色点)、至多三枚标签 chips 与「进站 →」箭头;整卡 hover 浮起,标题右侧同步滑出箭头。信息密度高、图形感强,层次来自分区与浮块。
Regulus Card · 编辑式列表描边版
轩辕十四,狮子座之心、黄道上第一亮星,古人称「小王星」——端正、有序、克制,正是编辑式三行制的脾气。每项退成三行:第一行元信息(日期与标签,12px 次级色,标签退成纯文字链接);第二行标题(约 20–24px 一档、字重 600、蓝族深蓝,hover 只变色不浮起);第三行摘要至多 3 行。封面、悬浮日历块、玻璃底、浮起动画、进站箭头全部退役。2026-10-17 按裁定补上 1px 蓝灰描边圆角框、项间留空气——无边框版已否决(条目裸在背景上像背景的一部分),描边版解冻。
Canopus Card · 车票式票根 v1 · 2026-10-17
老人星,全天第二亮、南海航海者的引路星——站台车票送每篇文章进站远行,启程的卡归引路的星。每篇文章一张站台车票——整票 1px 蓝灰描边、14px 圆角,无玻璃底无浮起;左侧票根栏是浅蓝底的大日期(月份小字加 38px 日数字),票根与票面之间一道 dashed 撕票线;票面自上而下是标题(600 字重蓝族)、两行摘要、底栏元信息行;标签不退成文字,盖成一枚枚描边小圆章,「进站 →」箭头收进票面右下。与站台的列车语系同源:列表即一叠待剪的票。hover 只加深描边与撕票线、标题变色。
三制均由同一套 tk-* DOM 换装产出;editorial 与 ticket 都遵守 Card 边界铁律(每条至少一道框)。
与主站排版的联动
分段选择器 → 令牌 home.list(enum:cards / editorial / ticket)→ 写到 <html> 的 data-mc-home-list 属性 → 主站落点 source/css/tokens.css §2(editorial)与 §2b(ticket)的变体闸门:所有选择器一律带 #recent-posts 前缀加 html[data-mc-home-list='…'] 闸门属性,压过主题 homepage.styl(1,2,0)与 site-polish.css 的 tk-card 同级规则;列表 DOM 本身由 source/js/site-polish.js 的 ticketCards() 在 /posts/ 运行时重皮出 tk-* 类(tk-card / tk-date / tk-foot / tk-meta / tk-chip / tk-arrow),两个变体都只对这些既有 DOM 换装、不动结构(ticket 把 tk-date 从悬浮日历块改造成左侧票根栏)。
生效路径:本页点选即时写 <html>(试穿);点「应用」写 localStorage,其余页面刷新后由每页头部内联 boot 应用;URL 直达(/posts/?home.list=editorial)不持久化,可用于验收。默认值为 cards,不开闸门时 tokens.css §2 整节零生效,列表维持封面卡片 v5。