引用阅读交互：预览、并排查看与直接跳转
比较成熟产品中的引用查看方式，定义本站桌面与窄屏阅读面板的入口、滚动、锚点、焦点和异常规则。
核查于
推荐交互与适用任务
本站增加查阅来源的能力，支持原文与一个引用同时阅读。十套原型分别比较原位章节、边注、侧层、材料盘、分栏与对开；较长材料独立滚动，深入阅读通过全文入口进入。宽屏原文保持可操作，小屏保留关闭返回。具体承载方式尚待定稿。
这个建议针对三种任务：快速判断链接内容是否相关、核对某段引用、转入另一篇文章深入阅读。它们需要的呈现方式不同。本站目前的页尾引用 Card 只提供导航，新增明确的预览操作能补齐后两篇内容之间的短程核查。
产品案例能支持什么
以下是官方文档中已核查的行为，未操作这些产品的实际界面。
| 案例 | 官方描述的行为 | 对本站有用的部分 | 适用边界 |
|---|---|---|---|
| Obsidian Page preview | 悬停内部链接即可预览，可设置修饰键要求 | 不离开当前页就辨认目标 | 笔记应用中的预览，不能直接证明网站侧栏效果 |
| Obsidian Tabs | 普通点击当前标签，修饰键打开其他标签，支持向右或向下分栏 | 将导航与并排阅读作为不同动作 | 完整工作台的状态和布局成本高于本站需求 |
| Notion 数据库页面 | Side peek、Center peek、Full page；侧边打开时左侧数据库继续可交互 | 非模态并排查看和整页打开可以共存 | 官方说明针对数据库视图的页面打开方式 |
| Quartz Popover Previews | 悬停可预览并滚动全文；标题链接定位对应标题 | 保留链接锚点，显示相关章节 | 长文悬浮框仍受空间与临时状态影响 |
| Wikipedia Reference Previews | 悬停脚注看脚注内容，点击继续跳到文末引用 | 预览增强与原生跳转并存 | 显示的是脚注内容，并未嵌入外部来源全文 |
来源：Obsidian Page preview、Obsidian Tabs、Notion Open pages in、Quartz Popover Previews、MediaWiki Reference Previews。
| 方式 | 适合的内容与任务 | 留在原文 | 持续同屏查看 | 主要代价 |
|---|---|---|---|---|
| 悬停摘要 | 定义、简介、辨认目标 | 是 | 临时 | 触屏入口缺失，可能误触和遮挡 |
| 点击 Popover | 一段脚注、少量相关内容 | 是 | 局部 | 长文滚动与空间有限 |
| 右侧非模态面板 | 若干段核查、代码与条件对照 | 是 | 宽屏支持 | 竞争横向空间，需管理焦点和滚动 |
| 居中模态框 | 图片或需要集中查看的内容 | 是 | 原文可能被遮挡 | 背景不可操作，不适合作为桌面主要对照方式 |
| 双文档分栏 | 两篇长文长期对照 | 是 | 支持 | 尺寸、历史与状态管理更复杂 |
| 新标签页 | 完整阅读、多来源查阅 | 浏览器保留 | 由用户安排窗口 | 需要跨标签或窗口切换 |
并排呈现能减少跳转和回退的操作步骤，也会缩窄每份内容并增加注意分配。NN/g 将多视图列为降低任务切换交互成本的方式，同时说明它仍存在认知负担。本站因此应让面板按需出现，关闭后恢复单篇阅读。Designing for Serial Task Switching
入口怎样同时支持查看与跳转
本轮原型采用一个引用入口：普通点击先查看，材料顶部提供全文跳转。引用保留真实目标地址，修饰键和浏览器菜单沿用直接打开。正式接线时应让首次行为可辨，例如使用“查看”及来源名称。正文和页尾关系使用同一种约定，不给每一条重复摆放预览、并排与跳转按钮。
| 用户动作 | 推荐结果 |
|---|---|
| 普通点击引用或按 Enter 激活引用 | 查看来源，主页面保持当前文章 |
| Ctrl/Cmd 点击、鼠标中键、右键打开标题链接 | 沿用浏览器链接行为 |
| 点击面板“打开全文” | 导航到当前预览目标的正式 URL，保留 hash |
| 在“打开全文”上使用浏览器新标签操作 | 在新标签阅读，原文继续保留 |
| 正式站 JavaScript 不可用 | 引用的真实链接继续导航；原型的简化客户端正文不承诺无脚本阅读 |
真实链接与查阅行为共同保留：站点从已解析目标识别站内可控正文，普通激活展示查阅区域。全文操作清楚表达跳转；Cmd/Ctrl、中键与上下文菜单不被拦截。该约定需要在真实键盘、触屏与浏览器中核对可发现性。
工具入口不用同时摆出“预览、侧栏查看、并排查看、弹窗查看”等多种同义操作。桌面显示“并排查看”，窄屏可以显示“查看”；同一个意图依据空间选择呈现方式。
面板布局与阅读位置
下面是侧层模式的布局示意。其余模式的空间与返回规则见十套视觉方案。
正常阅读： 篇章菜单 / 主文 │ 本页目录
宽屏查看： 同一主文，行宽与窗口滚动不变 │ 引用正文
空间不足： 单列引用正文覆盖层；关闭后恢复原文
小屏查看： 单列引用正文覆盖层；关闭后恢复原文右侧面板顶部固定，只保留目标标题、“打开全文”和关闭。内容区呈现同一份正文，字体、代码、公式和图示沿用站点样式。引用摘要与日期只有在帮助辨认来源时出现，避免重复完整文章头部的工具和标签。
打开材料时保持主文可读宽度与位置。十套分别采用自然长文的专注布局、工作区内独立滚动与分页，滚动方式随所选结构确定。页面在缩放、字体或窗口宽度变化时可能改变换行，单独保存像素位置无法覆盖这些情况；正式实施应保存源段落或触发条目相对视口的位置，并核查浏览器滚动锚定。主文 DOM 持续挂载，材料加载、替换与关闭不重新加载主文。
引用区域独立滚动，滚动到头尾时避免意外把原文带走。主文目录只跟踪主文，引用中的标题定位只作用于引用阅读容器。宽表格、代码和公式继续使用自身的横向滚动，正文段落根据面板宽度重排。
尺寸由可用空间决定：主文稳定行宽、材料最低阅读宽度、两列边距和间隔应能够放入容器。十套的导航占用分别处理；空间不足直接切为覆盖或原位章节。浏览器缩放会改变 CSS 可用宽度，桌面窗口也可能进入单列。WCAG Reflow 要求主要内容在等效 320 CSS px 宽度下仍可重排，表格与图示局部二维布局另有例外。Reflow
引用目标、替换与连续阅读
| 情境 | 推荐规则 |
|---|---|
| 没有 hash 的站内页面 | 面板从标题与简介开始 |
| 指向标题的站内链接 | 定位对应标题，保留必要前文；可短暂强调目标 |
| 目标 hash 不存在 | 展示页面并提示未定位到章节，允许继续读或打开全文 |
| 同一个页面与 hash 再次打开 | 保留该目标当前阅读位置，避免无意回到顶部 |
| 同一篇页面改看另一个 hash | 定位新锚点，不能用旧阅读位置覆盖明确目标 |
| 换到另一引用 | 替换同一面板，滚到新目标的 hash 或起点 |
| 加载过程中快速切换 | 以最新目标为准，旧结果不能覆盖新内容 |
| 面板内打开另一个站内页面 | 首轮正式导航到主窗口；新标签由读者通过浏览器操作选择 |
| 主页面正式导航到另一文章 | 首轮关闭面板，避免残留无关引用 |
首轮面板内跨页标题链接直接打开正式页面。iframe 内为这些链接指定主窗口目标，避免把完整文档布局打开在引用窗口中；同页标题与脚注留在引用文档。后续若增加面板内引用链的预览操作，则同时提供局部返回并保存上一引用位置。预览历史与继续查看能力应一起交付。
普通预览打开与关闭只维护临时阅读状态，不把顶层 URL 改成目标页。浏览器 Back 继续承担主页面历史。若以后支持分享“主文＋引用”组合，再采用主文 URL 上的查询参数，并明确刷新、返回和关闭语义。iframe 方案还需要防止内部跳转为顶层历史增加意外步骤，详见实现与验收。
脚注、外链与页面关系的区别
本站页尾的“引用此页 / 此页引用”表达页面间链接关系，并非逐条论文参考文献。当前索引会按页面去重，剥离 query/hash，不存原文引用句；打开关系条目只能确定是哪篇页面。正文中的原始链接可以保留完整 hash。因此，“定位被引章节”应优先从具体正文链接获得目标，不能从现有页级关系推定引用段落。
| 对象 | 可提供的查看 | 数据依据 |
|---|---|---|
| 站内页面链接 | 完整侧栏阅读，含链接锚点 | 过滤后的 source、已解析 URL |
| 当前页脚注 | 就地显示脚注内容，保留去文末及返回 | 当前页已渲染脚注或编译期派生结果 |
| 外部来源链接 | 显示作者已提供的引用信息，明确打开来源 | 原有链接文字、URL 和脚注内容 |
| 页级入链/出链 | 查看目标页；后续可补引用出现位置 | 当前页面关系索引，新增位置需从正文 AST 派生 |
任意外部网页全文不能作为通用预览能力承诺。网页获取受跨域策略影响；iframe 嵌入还受目标站的 frame-ancestors / X-Frame-Options 控制。首轮针对本站可控正文，外部来源保留正常打开。Wikipedia 的脚注预览案例证明脚注可以就地展示，不能推导外站全文可嵌入。MDN frame-ancestors
键盘、焦点与悬停增强
桌面面板需要非模态行为：主文不加遮罩、不锁滚动、不设为不可交互，Tab 可以离开面板返回主文。打开时将焦点放到面板标题或关闭控件，并提供清楚的区域名称；正文点击不会自动关闭。关闭后把焦点交还有效的触发元素，并恢复阅读位置。
窄屏覆盖面板采用模态规则：焦点进入覆盖层并在其中循环，背景暂时不可交互，关闭后返回触发处。长文初始焦点可以放在可编程聚焦的标题，避免直接跳到后面的第一个链接而跳过内容。模态对话框的焦点管理可参考 WAI-ARIA APG。Dialog Modal Pattern
Esc 优先关闭最内层内容，例如放大图片或 Popover；没有内部弹层时关闭引用阅读。iframe 内 Esc 需传递给父页面，不能靠父文档监听自动收到。固定面板头部和覆盖层需保证焦点可见；WCAG AA 要求焦点控件至少不被作者内容完全遮挡，本站应进一步争取完整可见。Focus Not Obscured
悬停摘要可以后续增加，内容使用已有简介或派生片段。它适合辨认目标，完整并排阅读仍有键盘与触屏按钮入口。WCAG 对悬停或聚焦出现的额外内容要求可以关闭、可将指针移入、保持足够稳定。Content on Hover or Focus
Base UI 的 Preview Card 明确将弹层内容作为补充性视觉增强，不提供触屏、键盘或屏幕阅读器进入该内容的导航。不能把唯一的“并排查看”按钮放入这种弹层。需要可操作内容时，使用 Popover 或 Dialog 并保留可达触发入口。Preview Card 使用指引
验证是否适合本站
首轮比较应采用相同任务和相同文章：读者在主文找到一条主张，查看引用确认条件，再回到主文继续阅读；另一个任务让读者决定转入引用长期阅读。对比现有直接跳转和新面板，记录完成是否正确、往返操作、迷失位置、误触、关闭与打开全文是否容易发现，以及读者的主观舒适度。
完整验证需要包含短文、长文、代码、公式、宽表格、图片、Mermaid、中文锚点、加载失败和连续切换，并覆盖键盘、触屏、缩放、亮暗与动效开关。浏览器验收与真实读者研究需要相应授权；本次未执行这些验证。因此当前判断是有依据的设计推荐，未确认本站的效率提升幅度。
最后更新于