与Obsidian同步的博客搭建（四）——Astro 前端与阅读体验

公开网站不是 Obsidian 的网页镜像。作者端需要高密度工作台，读者端更需要清楚的内容分类、稳定排版、快速搜索和不打断阅读的交互。因此前端使用独立的 Astro 组件和 Bedic 设计系统。

四类内容使用不同入口

• Blog：生活化内容，列表更接近完整的朋友圈记录。
• Wiki：突出分类、摘要、反向链接和继续探索。
• Projects：呈现配置、开发与维护过程，不和 Blog 混在一起。
• Daily：按日期归档，只显示主动发布的日记。

首页只展示代表性内容和数量，不把所有卡片堆进首屏。Projects 列表保留状态与标签，后续系列索引也以明确元数据为基础。

主题与照片

网站提供浅纸蓝图、苔原青绿、暮紫纸页、日落暖橙和深夜蓝墨五套主题。颜色通过设计 token 映射到纸面、文字、边线和信号色；照片属于记录内容，浅色主题不会再使用 hue-rotate 改变原色，深色主题也只做克制的亮度适配。

长文阅读组件

文章页包含面包屑、公开时间、阅读时长、正文、桌面侧栏目录、移动端目录、图片放大、代码复制、上一篇/下一篇和延迟加载的互动区域。目录来自实际标题结构，内容仍可在禁用 JavaScript 时阅读。

移动端和可访问性

移动菜单是完整、不透明、可独立滚动的视口面板；搜索与主题控件使用语义按钮、ARIA 状态和 Escape 关闭。所有关键触控目标至少 44px，键盘焦点清晰，减少动态偏好会关闭非必要动画。

页面首屏不等待 Waline；图片使用明确尺寸、懒加载与解码提示，静态 CSS/字体/搜索资源都随 Release 自托管。设计测试会检查主题、目录、菜单、响应式宽度和基础可访问性契约。

上一篇：与Obsidian同步的博客搭建（三）——不可变Release与交互服务
下一篇：与Obsidian同步的博客搭建（五）——服务器部署