Hallmark N6 报刊报头导航组件完全指南：为编辑型页面构建 Newspaper Masthead

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 那样，一上来就告诉你"这是一份出版物，不是一台软件"。

三个核心视觉元素

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 正是为这类"纸感"页面准备的导航词汇。

Don't confuse with：N1 Wordmark + 2 links

N6 与 N1（n1-wordmark-2-links.md）容易混淆，区别在结构：N1 是"左上 wordmark、右上两个文字链接"的不对称、小尺度顶栏；N6 则是居中大字 + 全宽 + 双线的报纸报头。判断口诀：页面只有两个目的地、要"小而安静"，选 N1；页面是编辑型/杂志型、要"有报头仪式感"，选 N6。

完整代码骨架：HTML + CSS 逐行拆解

原组件文档给出的实现只有 24 行，但每一行都踩在 Hallmark 的 token 体系上。下面逐段还原并补充注释，让它能直接落地到任何 Hallmark 主题上。

HTML 结构

<header class="nav-mast"> <p class="mast-line muted">No 22 · Spring 2026 · Studio</p> <h1 class="mast-name">STUDIO</h1> <nav class="mast-nav" aria-label="Primary"> <ul><li><a>Catalog</a></li><li><a>Voice</a></li><li><a>Letters</a></li></ul> </nav> <hr class="mast-rule double" aria-hidden="true"> </header>

结构要点：

• 外层用<header>而非<nav>：整块是页头，真正的导航语义交给内部的<nav aria-label="Primary">，屏幕阅读器能明确区分"报头"与"导航"两层；
• 期号行用<p>+muted：它是一行元信息，不是标题，用段落承载并把颜色交给mutedtoken 降噪；
• 报头字用<h1>：页面唯一主标题语义，即使视觉上是"logo"；
• 双线用<hr aria-hidden="true">：分隔线是纯装饰，对读屏隐藏；
• 链接先不给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-rule）：0.5px 发丝线的叠加

mast-rule.double用border-top+border-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 测试：播客站的页头用了masthead+masthead__brand+masthead__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__meta（Spring 2026 · No. ix）还原了"报头字 + 期号行"的编辑型组合。

这些样本证明 N6 的形态在仓库里是被反复实践的标准组件词汇，而非纸面理论。

移动端折叠：四个断点怎么降级

Hallmark 要求所有输出在 320 / 375 / 414 / 768px 四档宽度下无横向滚动、无两行可点击文本。N6 的折叠策略（见 component-cookbook.md 的 Mobile collapse 表）分两级：

同时遵循横切规则：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 一节）。

从组件到落地：三种接入方式

1. 整页使用：在 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 组合成完整页面；
2. 组件级使用：当 brief 只是"给我一个页头"时走 Component-scope 流程，N6 作为独立组件产出，states清单聚焦链接的 hover /:focus-visible状态；
3. 直接照搬：把上文 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