Hallmark N6 报刊报头导航组件完全指南为编辑型页面构建 Newspaper Masthead【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本指南围绕 Hallmark 技能库中的 N6 Newspaper Masthead报刊报头导航组件展开介绍其作为编辑型editorial页面默认导航的形态特征、适用场景与代码实现。你将掌握报头式导航的 HTML/CSS 结构、token 驱动的响应式写法、与 N1 等其他导航原型的区分要点以及它在 320/375/414/768px 四档宽度下的折叠策略可直接用于播客、杂志、工作室等以内容为中心的页面。N6 是什么报头式导航的形态与气质N6 Newspaper Masthead 是 Hallmark 组件食谱component-cookbook.md中收录的 10 种导航原型N1–N10之一编号源自 n6-newspaper-masthead.md 组件定义。它的形态可以概括为一句话通栏宽度的页头第一行是居中的大号报头字wordmark其上方或下方有一条以衬线小型大写字母排版的期号/日期行报头字下方可选一行内联导航链接整个页头之下压一条双线double-rule。这种结构直接复刻了报纸与杂志的报头masthead视觉语言读起来就是大报气质broadsheet——像 NYT、FT、Vogue 那样一上来就告诉你这是一份出版物不是一台软件。三个核心视觉元素元素内容排版要点期号/日期行No 22 · Spring 2026 · Studio这类卷期 季节/年份 机构名元信息衬线小型大写font-variant: small-capsletter-spacing: 0.08em字号取 token 体系的极小档报头字站名/机构名全大写排印如STUDIO展示字体var(--font-display)clamp(2.25rem, 5vw, 3.75rem)流式缩放行高 0.95 贴近排印内联链接行2–4 个短导航目标Catalog/Voice/Lettersinline-flex水平排列间距取 token 的中档不需要任何按钮化包装Use when什么时候用 N6按原组件定义N6 的适用条件是页面呈编辑型、杂志形态或以期/辑issue / edition的方式被框定。这类页面天然适合它独立播客、音频杂志期号、季节感明确工作室、独立出版物的门户页品牌故事、字型样张type specimen、宣言式长文页面任何内容优先、导航只是附属的 editorial 页面。在 genres/editorial.md 中N6 被明确指定为 editorial 类型的默认导航全宽、居中大字报头字、细期号/日期行衬线小型大写、下方双线读起来就是大报。这也与site/css/tokens.css中 Newsprint、Salon、Garden、Linen、Atelier 等纸面主题paper-band的编辑气质完全同频——N6 正是为这类纸感页面准备的导航词汇。Dont confuse withN1 Wordmark 2 linksN6 与 N1n1-wordmark-2-links.md容易混淆区别在结构N1 是左上 wordmark、右上两个文字链接的不对称、小尺度顶栏N6 则是居中大字 全宽 双线的报纸报头。判断口诀页面只有两个目的地、要小而安静选 N1页面是编辑型/杂志型、要有报头仪式感选 N6。完整代码骨架HTML CSS 逐行拆解原组件文档给出的实现只有 24 行但每一行都踩在 Hallmark 的 token 体系上。下面逐段还原并补充注释让它能直接落地到任何 Hallmark 主题上。HTML 结构header classnav-mast p classmast-line mutedNo 22 · Spring 2026 · Studio/p h1 classmast-nameSTUDIO/h1 nav classmast-nav aria-labelPrimary ulliaCatalog/a/liliaVoice/a/liliaLetters/a/li/ul /nav hr classmast-rule double aria-hiddentrue /header结构要点外层用header而非nav整块是页头真正的导航语义交给内部的nav aria-labelPrimary屏幕阅读器能明确区分报头与导航两层期号行用pmuted它是一行元信息不是标题用段落承载并把颜色交给mutedtoken 降噪报头字用h1页面唯一主标题语义即使视觉上是logo双线用hr aria-hiddentrue分隔线是纯装饰对读屏隐藏链接先不给href这是组件模板落地时按真实路由补齐即可。CSS 实现.nav-mast { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--page-gutter) 0; text-align: center; } .mast-name { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.01em; line-height: 0.95; margin: 0; } .mast-line { font-variant: small-caps; letter-spacing: 0.08em; font-size: var(--text-xs); } .mast-nav ul { display: inline-flex; gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-2xs) 0 0; } .mast-rule.double { border: 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); height: 4px; margin: var(--space-sm) 0 0; }关键排版决策为什么这么写clamp(2.25rem, 5vw, 3.75rem)的流式报头字报头字不在固定字号上写死而是用 CSSclamp()做三段式流式缩放最小 2.25rem手机、按视口宽度 5vw 线性增长、封顶 3.75rem大屏。这样报头字永远占据有存在感但不失控的比例这也是 Hallmark 所有 display 尺寸的通用策略——site/css/tokens.css里每个主题的--text-display都是clamp()形式。line-height: 0.95是一个关键排印细节报头字行高压到不足 1让大写字母的上下空间收紧呈现出报纸刊头的贴紧感。letter-spacing: -0.01em轻微收字距避免大字放大后字距显得松散。小型大写 0.08em 字距的期号行font-variant: small-caps把期号行的普通小写字母渲染为小型大写配合letter-spacing: 0.08em拉宽字距形成细、密、精致的元信息行与下方粗壮的报头字构成强弱对比。字号取var(--text-xs)tokens 体系中约 0.75rem 的极小档保证期号行是注解而非标题。需要留意Hallmark 的 editorial 主题里期号行的字体族应当继承衬线气质——例如 Newsprint 主题的--font-display/--font-body都是 Playfair Display / Crimson Pro 这类衬线见 site/css/tokens.css小型大写落在衬线上才成立若主题字体是几何无衬线则这一行的报纸感会减弱需按主题实际情况调整。双线double-rule0.5px 发丝线的叠加mast-rule.double用border-topborder-bottom两条var(--rule-hair)0.5px发丝线叠加出一个 4px 高的双线分隔。要点是border: 0先清掉hr的默认边框再分别声明上下边两条细线之间留出空隙视觉上才是一对发丝双线而非一根粗线。发丝线正是 editorial 类型的签名语言——genres/editorial.md 明确允许hairline rules, double rules这类纸面细节双线把页面从导航底栏提升为报纸版式的一部分。grid 居中的整体节奏.nav-mast用display: grid把期号行、报头字、链接行、双线排成一个纵向栈gap: var(--space-2xs)0.25rem让四层之间保持极小的亲密间距text-align: center让整块居中——居中是报头的仪式感所在。padding只有var(--space-md) var(--page-gutter) 0水平方向吃进页面级--page-gutter流式留白底部为 0把压线的收尾交给双线自己完成。在 Hallmark 体系中的位置路由、变体旋钮与差异化N6 不是孤立组件它嵌在 Hallmark 的组件选择与多元化规则里路由规则component-cookbook.md 的导航路由表规定 editorial 类型Newsprint · Salon · Garden · Linen · Atelier默认选N6 Masthead可选 N1、N9同时 editorial 类型明令禁用N5 浮动胶囊modern-minimal 词汇与 N7 粗野 slab多元化规则同一项目会话内连续两次输出不得共用同一导航原型——上一页用了 N6下一页就应换 N1/N9避免报头刷屏变体旋钮N6 knobs同原型内再分三个可调维度——期号行位置wordmark 上方 / 下方 / 无、报头字尺寸档3xl / 2xl / xl、分隔线样式双线 / 单线 / 无。每输出一次应至少转动一个旋钮防止每个 N6 都长得一样。报头行的小型大写也符合 editorial 类型不出现muted之外的装饰、靠排印细节说话的克制基调与同类型的 Ft1 Mast-headed 页脚在气质上首尾呼应。仓库中的实战印证N6 的词汇在仓库测试样本中有清晰的落点可对照阅读01-tide-podcast 测试播客站的页头用了mastheadmasthead__brandmasthead__meta的 BEM 结构masthead__meta用est. 2026 · n.º 14 · Lisbon的期号/年份元信息排印font-variant-numeric: tabular-nums保证数字对齐——这正是 N6 期号行的实际落地08-cohort-courses 测试页头masthead顶部有 1pxborder-block-end发丝线链接 hover 只做颜色迁移克制不跳脱11-soroe-ceramics 测试陶瓷工作室页用masthead__wordmark斜体展示字masthead__metaSpring 2026 · No. ix还原了报头字 期号行的编辑型组合。这些样本证明 N6 的形态在仓库里是被反复实践的标准组件词汇而非纸面理论。移动端折叠四个断点怎么降级Hallmark 要求所有输出在 320 / 375 / 414 / 768px 四档宽度下无横向滚动、无两行可点击文本。N6 的折叠策略见 component-cookbook.md 的 Mobile collapse 表分两级视口N6 行为 60rem~960px布局断点期号行堆叠到报头字上方导航链接换行到第二行 40rem~640px字型断点报头字尺寸降一档clamp 下限上浮导航行折叠进菜单披露控件只留报头字 汉堡同时遵循横切规则40rem 以下所有点击目标 ≥ 44×44px页面容器内边距不小于clamp(1rem, 4vw, 1.5rem)报头这类非交互元素不需要任何滚动联动动画。反模式什么场景别用 N6原组件定义给出的唯一反模式值得强调不要把 N6 用在 SaaS 仪表盘或开发者工具产品页上。报头词汇属于长文/编辑型站点放在 B2B 产品页上它会读起来像穿了戏服reads as costume——一个数据看板配一份大报刊头语义错位比视觉错位更伤。判断依据依旧回到那句Use when页面是编辑型、杂志形态或以期/辑被框定N6 成立页面是产品、工具、平台N6 是错位的。这也与 Hallmark 的 AI 导航反模式清单一致——nav 选型必须能回答你站在哪种网站上否则就是模板化详见 anti-patterns.md 的 The AI nav 一节。从组件到落地三种接入方式整页使用在 Hallmark 默认 Design flow 的 Step 2 中从 component-cookbook.md 的导航路由表选中 N6再按index-then-pick原则只加载 n6-newspaper-masthead.md 这一个原型文件与 1 个 hero 1 个 section head 1–2 个 feature 1 个 CTA 1 个 footer 组合成完整页面组件级使用当 brief 只是给我一个页头时走 Component-scope 流程N6 作为独立组件产出states清单聚焦链接的 hover /:focus-visible状态直接照搬把上文 HTML/CSS 原样拷贝进项目按需把--space-*、--rule-hair、--color-rule、--font-display、--text-xs等 token 值替换成你所在项目的设计 token可参考 site/css/tokens.css 的完整 token 表。无论哪种方式落地后请跑一遍 Hallmark 的 slop-test 检查确认无transition-all、无 hover 缩放、期号行与链接行在 40rem 以下不产生两行可点击文本N6 才算真正长在页面上而不是贴上去的。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考