站点记录｜DreamStart 界面与阅读体验升级：三屏主页、复制声明与静态收录优化

DreamStart 完成了一次从首页布局到内容发布链路的整体升级。目标不是把静态博客改造成复杂应用，而是在继续保持纯 HTML、CSS 和 JavaScript 的前提下，让首页更有节奏、文章更容易阅读和引用，也让搜索引擎与内容工具能够稳定发现完整正文。

三屏主页：一次只讲清楚一件事

桌面端主页现在分为三个与可视区域对应的章节：首页、最近更新、文章目录。导航栏始终保留，章节高度按“窗口高度减去导航栏”计算，因此每次翻屏都会落在完整内容上。

首屏合并了品牌、个人简介、文章和栏目统计以及主要入口。过去单独占据一个屏幕的“关于”信息被收回首屏，减少重复，也让第一次访问的人不用连续滚动才能知道站点在记录什么。

第二屏只展示最新三篇文章，承担快速回访入口。第三屏集中放置栏目筛选、搜索、排序和全部文章，并将“按时间”与“降序”控件安排在搜索框下一行，避免搜索区过于拥挤。

桌面有节奏，移动端保持自然

在具备精确指针的桌面设备上，滚轮累计约 36 像素才触发一次翻屏，翻屏后锁定约 650 毫秒。这种处理会过滤触控板与滚轮产生的零碎增量，避免一次手势跳过多个章节。方向键、PageUp、PageDown、空格键和右侧章节按钮也可以完成导航。

文章目录是一个独立滚动区域。当列表仍有内容可以滚动时，滚轮只作用于列表；到达边界后，继续滚动才会切换主页章节。这样既保留完整文章索引，也不会破坏三屏结构。

手机和平板不接管触摸滚动，三个章节会自然排列成长页面。系统启用“减少动态效果”时，平滑滚动与过渡也会相应收敛。键盘焦点、按钮状态和颜色对比统一进行了整理，明暗模式、主题色与暖色阅读仍然保留。

文章从跳转壳变成完整静态页面

过去 /p/{slug}/ 只是跳回首页文章视图的跳转壳，搜索引擎和无 JavaScript 环境无法直接获得稳定正文。现在每篇文章都会由本地生成脚本输出完整 HTML，包含标题、时间、栏目、标签、正文、目录、相邻文章导航和原创声明。

文章卡片也改为真实静态链接。旧的 /#post/{slug} 地址仍会自动跳到新页面，已有收藏和外部链接不会立刻失效。即使禁用 JavaScript，文章主体依然可以从头读到尾；JavaScript 只增强主题、复制、分享卡和目录滚动等交互。

复制时保留来源和上下文

正文中选中文字并复制时，剪贴板会在选区后追加作者、原文标题、规范链接与转载声明。“复制全文”按钮会复制正文纯文本并追加同一组信息。代码块的复制按钮则只复制代码，方便直接粘贴到编辑器。

追加的声明统一为：

作者：Luminous

原文标题：当前文章标题

原文链接：当前文章的规范静态地址

本文为作者原创学习记录，转载请联系作者并保留本声明及原文链接。

声明只在文章级复制中追加一次，避免代码复制被无关文字污染。文章底部也提供相同信息的可见版本，读者无需触发交互即可确认来源。

正文图片全部本地化并持续审计

升级前对现有 70 篇文章做了逐篇检查，共找到 152 张正文图片：远程图片为 0，本地缺失为 0。此次新增的项目截图也转换为 WebP 并保存在本站上传目录，文章运行时不会依赖 DreamWalk 或 SimplePortrait 的远程图片。

仓库新增图片审计脚本，它会解析每篇文章中的 Markdown 图片与 img 标签。只要出现远程正文图片，或者引用的本地文件不存在，检查就会失败。以后导入文章时可以先把图片落到本地，再运行审计，避免外链失效、访问追踪与混合内容问题悄悄进入站点。

为人阅读，也为搜索与内容发现准备

每篇静态文章页现在都有 canonical、description、author、keywords 与 robots 信息，并补齐 Open Graph、Twitter Card、发布时间、栏目和标签。页面内加入 BlogPosting 与 BreadcrumbList 结构化数据；首页则声明 WebSite、Blog 与 Person。

站点同步生成 sitemap.xml、feed.xml、robots.txt 与 llms.txt。站点地图提供全部规范文章地址，RSS 提供最近更新，llms.txt 按栏目列出站点说明与文章入口。这些文件不是“保证收录”的捷径，但能减少爬虫猜测页面关系的成本，并让新文章拥有一致、可验证的发现路径。

仍然是一个可直接托管的静态站点

这次升级没有引入后端、数据库或运行时框架。公共样式和交互从旧的单体首页拆分为本地共享 CSS 与 JavaScript，首页、文章页和关于页使用同一套界面语言。生成过程只依赖 Node.js 标准库，产物可以继续交给 Nginx、对象存储或 CDN 直接托管。

升级后的重点并不是动画更多，而是边界更清楚：桌面翻屏不会失控，移动端不被强行接管，正文不依赖脚本，复制知道来源，图片能够自检，搜索引擎拿到的也是读者真正看到的内容。对一个长期积累的个人博客来说，这些基础能力比短暂的新鲜感更重要。