把个人博客装进鸿蒙 App

最近，我给自己的博客「日常札记」增加了鸿蒙 App 入口。既用来分享技术和生活，也用来保存仅自己可见的日记。网站与 App 共用同一套内容系统，让电脑写作和手机记录衔接起来。

网站架构

网站采用 Next.js 16、React 19 和 Payload CMS，在同一个项目里实现博客前台、管理后台和内容接口。前台负责文章列表、详情、分类、标签和搜索；后台负责登录、写作及图片、视频管理。

正文使用 Lexical 富文本编辑器，支持标题、列表、代码和图文混排，也支持粘贴图片、上传进度与本机草稿恢复。内容以结构化 JSON 保存，方便持续扩展编辑和展示能力。

数据层在本地使用 SQLite，生产环境使用 PostgreSQL；媒体文件保存在服务器的持久化目录中，图片上传时自动生成 WebP 缩略图。网站通过 Caddy 提供 HTTPS 和反向代理，应用由 systemd 管理。

博客和私密日记使用同一个文章模型：新建内容默认是私密草稿，只有同时设置为「公开」和「已发布」，访客才能看到。图片和视频跟随所属文章的访问权限。

与鸿蒙 App 的结合

目前鸿蒙端采用 ArkTS、ArkUI 和 ArkWeb，整体是「原生导航 + Web 内容」的混合架构。原生界面提供博客、日记和写日记三个入口，阅读与编辑页面加载现有网站，复用网站的账号、编辑器和内容接口。

App 同时接入系统相册和文件选择器，让手机上传图片更方便。网站通过 App 的 User-Agent 标记识别鸿蒙环境，隐藏重复页头，并调整移动端写作布局。

针对折叠屏，收起时使用底部导航，展开时切换为可收缩侧栏。布局变化保留同一个 Web 组件，避免重新加载打断写作。切后台或返回时，App 会通知网页尝试保存本机草稿；文章仍需成功提交到服务器，才能在其他设备上看到。

这套架构让我能够集中维护一套内容和写作能力，再逐步补充原生体验。现阶段已经满足日常阅读、记录和发布的需求，后续可以继续探索原生文章列表与搜索。