Wiki 页面要兼顾 PC 和手机，先把导航拆成三套

先看一个实际页面

产品变复杂，或者官网开始堆 SEO 文章，Wiki 就会被拿上来。它要回答用户问题，也要能被搜索引擎和 AI 读到。页面一多，布局问题就藏不住。

这是 Lumno 的帮助页。设计师枯白啃设计在 X 上拆了它的 Wiki 框架，聊到移动端章节切换、侧栏超出屏幕、文末引导、页脚高度和导航结构。后面还给了一段 prompt，可以直接丢给 AI 改布局。

手机屏幕窄。顶部放一个横着滚的标签栏，用户点起来费劲，章节一多还会挤成一团。

这套方案用底部常驻菜单栏。点开后是满屏菜单，一行一个章节。手指好点，标题也看得清。

PC 端的章节列表和正文分开滚动。侧栏用独立高度，超出部分上下截断。截断边缘加渐变遮罩，再配一个居中的箭头按钮，用户才知道上面或下面还有条目。

细节还包括：隐藏侧栏滚动条，加载时把当前页面滚进视野，用 sessionStorage 记住滚动位置。如果有搜索框，按 / 直接聚焦。

有网友补充了一个常见坑：吸顶导航会盖住锚点标题。给标题加 scroll-margin-top，值等于导航栏高度，跳转后就不用用户再往回滚。

文章底部不要只放上一页下一页。先用一张卡片问一句：还是没解决？然后给一两个真实渠道，比如 issue、社区、联系方式。

接下来才是前后页链接，每项带上页面标题。第一页可以指回首页。

作者还提到，文末放社群和社媒按钮，对人和 AI 都算一种转化入口。卡片样式要贴近正文组件，看起来像内容的一部分。这相当于给转化目标投了一则上下文广告。

常见页脚只放版权和几个链接，占一条窄边。这套做法用好看的背景图把页脚撑高，吸引用户滑到底并停留。

高度只是表面。页脚里要放足够有用的信息，真正帮用户解决问题，才不容易招人反感。

LOGO 用来返回官网，关键页面收进下拉菜单，再放一个核心 CTA 按钮。滚动时保持吸顶。

Safari 会根据导航栏颜色给地址栏着色，所以导航栏背景色要和品牌协调。这个细节不影响功能，但影响页面看起来是否完整。

平板上隐藏大纲，手机上隐藏页面列表。两者放进底部固定栏，左半是页面列表，右半是大纲。

右半显示当前读到的章节名，用视口 20% 位置那条线判断，长了就省略。点任意一半，从底部弹出 sheet。用 showModal() 打开，向上滑 24px 并淡入，背景不加暗色遮罩。

当前条目要标记并滚进视野，调用 scrollIntoView({ block: "center" })。点条目、关闭按钮、外部区域或 Esc 都能关。章节链接再滚到对应标题。移动端点击区域要比桌面列表大一号。

作者附上的 prompt 没有让 AI 重做视觉。它明确要求保留内容、文案、颜色和字体，只改布局、滚动和响应。技术上限定 CSS 加少量原生 JS，不加滚动或动画库。

页面被拆成三层：正文和页脚随页面滚动，页面列表和大纲用 sticky，顶部导航在首屏横幅离开后再变成 fixed。进入动画 320ms，退出 120ms。用户开启 reduced motion 时，关掉平滑滚动和导航进出动画。

最后还要求列出改过的文件和选择器，检查页面顶部、中部、底部和手机宽度四个状态，并截图。这个验收标准比一句“做得好看点”有用。