LMN516

生长记录

一个网站,如何慢慢长成自己的样子。

LMN516 并不是一开始就是现在的样子。它从一个简单网页开始,经历了静态博客、 WordPress,再到今天的 WordPress Headless + Next.js。这里记录的不只是功能更新, 也是我在 AI 的协作下学习网站开发、不断尝试、做出选择,并把它变成自己真正喜欢的样子的过程。

V3.1当前版本

数字花园从视觉概念变成可以交流的世界

这一天,LMN516 将前一天确定的 Digital Garden 方向真正落进网站。首页被重构为 Living Garden 入口,植物、纸张、阳光、路径和花园伙伴开始贯穿不同页面;与此同时,留言信箱、回复推送和浏览器通知逐步完成,让访客不只是阅读这座花园,也能够留下消息并收到回应。

花园留言系统

新增
  • 完成 Garden Messages V1,建立访客留言、会话编号和历史消息读取接口
  • 将原来的碎碎念气泡扩展为可打开的留言面板,让访客能够直接在网站中留下消息
  • 完善留言发送、状态反馈、会话保存和再次打开后的内容恢复逻辑
  • 让网站互动从单向展示推进到访客与站长之间可以持续往来的信箱模式

回复推送

新增
  • 新增花园信箱回复的 Web Push 通知接口
  • 访客允许通知后,可以在站长回复留言时收到浏览器推送
  • 建立 Garden Messenger V2,根据星期、时段、节气和节日生成更自然的通知文案
  • 加入少量隐藏文案与情境变化,使通知不再只是固定的系统提示

Living Garden 首页

重构
  • 重新设计首页首屏,将其从普通内容首页改造成 Living Garden 的入口
  • 新增花园入口、路径、分区框架和手绘氛围层,让首页内容形成连续的游览关系
  • 将持续进行、最近更新、生活档案和关于本站等区域纳入同一套花园叙事
  • 保留原有内容功能,同时让各模块之间不再像互相独立的卡片集合

花园角色与素材

新增
  • 建立第一套 LMN516 Garden Assets,整理人物、植物、蝴蝶、草地、叶片、纸张与阳光素材
  • 加入第一位 Garden Companion,让数字花园开始拥有可识别的陪伴角色
  • 为阅读、音乐、碎碎念、关于本站和迷路页面准备不同状态的花园人物
  • 新增花朵、藤蔓、叶枝、太阳光线等手绘 SVG 元素,并统一素材调用方式

全站视觉统一

优化
  • 将花园氛围扩展到关于本站、文章归档、碎碎念、音乐和 404 页面
  • 建立全站 Garden World Layer,使纸张纹理、光线和植物装饰不只存在于首页
  • 统一卡片表面、边框、阴影、圆角和背景层次,形成一致的花园卡片语言
  • 重新整理页头、页脚和品牌枝叶装饰,让 LMN516 标识与花园主题保持统一

通知兼容与体验

优化
  • 持续优化电脑端、手机端和不同浏览器中的通知订阅流程
  • 改善 Safari Web Push 的权限判断、订阅恢复和异常处理
  • 避免通知欢迎窗口重复弹出,并将通知弹窗与页面其他图层隔离
  • 精简最终通知界面,移除已经失去作用的测试状态与说明内容

内容与页面修复

修复
  • 增加 WordPress Post Format 支持,使文章列表和单篇文章能够读取文章格式
  • 修复花园视觉扩展后部分卡片尺寸发生变化的问题
  • 恢复文章图片的正确覆盖方式,避免卡片图片比例和裁切异常
  • 补充布局保护样式,减少后续全站视觉样式对原有内容结构的意外影响
V3.0

数字花园开始拥有自己的设计语言

这一天,LMN516 的更新重点从继续增加零散功能,转向建立更完整的网站方向。我们整理了 Digital Garden Design System 与 Brand Kit,明确卡片式首页、响应式导航、折叠页脚、插画语言和品牌规范,让网站不只是功能越来越多,也开始在视觉、结构和气质上真正成为同一个作品。

设计系统

重构
  • 完成 LMN516 Digital Garden Design System V3.0,整理网站长期使用的设计原则
  • 统一颜色、字体、间距、圆角、卡片、按钮、导航、动效与响应式规则
  • 明确所有页面优先遵循同一套设计语言,减少逐页临时调整造成的不一致
  • 将设计重点从单个页面是否好看,推进到整个网站是否统一、清晰和可持续维护

品牌系统

新增
  • 建立 LMN516 Brand Kit V1.0,整理品牌定位、视觉气质与使用规范
  • 继续确认一行式「LMN516」作为主要品牌标识
  • 梳理 LOGO、主色、辅助色、文字层级及不同场景下的品牌呈现方式
  • 明确网站应保留温和、克制、个人化的气质,而不是变成通用科技产品页面

首页与卡片

优化
  • 确定 Card-first Design 作为首页和后续内容页面的重要布局方式
  • 参考 Apple 官网的信息组织方式,让卡片在电脑端与手机端保持更一致的阅读逻辑
  • 重新思考首页首屏、内容密度、卡片顺序与留白,使访客进入后能够更快理解网站
  • 规划让不同内容通过统一卡片系统呈现,同时保留文章、照片、音乐和生活记录各自的特点

导航与页脚

优化
  • 重新规划电脑端与手机端的导航展示方式
  • 电脑端保留清晰的横向导航,手机端使用可展开菜单节省空间
  • 规划桌面端完整展示、手机端折叠展开的页脚结构
  • 为未来增加更多 Digital Garden 页面预留稳定、可扩展的网站入口

数字花园视觉

新增
  • 进一步明确 LMN516 不是传统博客,而是一座持续生长的个人 Digital Garden
  • 提出在页面中加入植物、花园与生活主题的简洁手绘或卡通素描元素
  • 让插画承担识别、引导和氛围作用,而不是堆积无意义装饰
  • 在杂志式信息布局与数字花园的自然感之间建立更明确的平衡

项目整理

重构
  • 结合当前网站代码、历史更新与设计文档,重新梳理下一阶段的开发依据
  • 整理现有页面、组件和设计规范之间的关系,减少后续修改时反复推翻
  • 将品牌规范、设计系统与真实网站结构放在同一套开发逻辑中
  • 为下一阶段首页优化、导航完善、页脚重构和 Digital Garden 页面建设做好准备
V2.1

从页面打磨到完整设计系统

这一天,LMN516 不只是继续调整页面细节,而是建立了一套覆盖字体、间距、布局、卡片、按钮、导航、动效与夜间模式的 UI Design System。同时新增生长记录与照片页面,并将庞大的全局样式和首页代码拆分为更清晰、可维护的模块。

新增

新增
  • 新增「生长记录」页面,用于保存网站每个阶段的真实更新
  • 在首页加入生长记录入口
  • 新增独立照片页面与照片画廊组件
  • 接入网站访问统计

UI Design System

重构
  • Phase 1:建立统一的字体与字号层级,系统整理标题、正文和辅助文字
  • Phase 2:建立统一的间距系统,规范页面留白、区块距离、卡片内边距与网格间隔
  • Phase 3:建立响应式容器系统,统一宽屏、常规页面、阅读页、窄页面和生长记录页面宽度
  • Phase 4:建立卡片系统,统一圆角、背景、边框、阴影及交互反馈
  • Phase 5:建立按钮与控件系统,统一高度、内边距、圆角、焦点、禁用状态及深色状态
  • Phase 6:建立共享导航系统,将首页与生长记录页面统一为可复用的 SiteHeader 组件
  • Phase 7:建立动效系统,统一卡片、按钮、导航、照片、主题切换和页面退出动画节奏
  • Phase 8:重构夜间视觉语言,完成覆盖全站的深蓝色夜间模式

照片体验

优化
  • 建立精选随机照片机制,不再从全部媒体图片中完全随机抽取
  • 调整首页照片墙的筛选、轮换和展示逻辑
  • 将电脑端首页横版照片调整为更适合照片内容的 4:3 比例
  • 分别优化电脑端和手机端的照片显示方式,减少不必要的放大与裁切
  • 修复照片页面样式遗漏及导航类型问题

阅读与响应式

优化
  • 系统调整首页、文章页和独立页面在手机端的字号层级
  • 缩小手机端「一万个俯卧撑」与「一个人的网站,应该像他的房间」等过大标题
  • 统一手机端栏目标题、文章标题、正文和辅助文字比例
  • 完善文章标题、链接、引用、代码、表格、图片与说明文字在夜间模式下的阅读效果
  • 增加高对比度偏好和减少动态效果支持

代码重构

重构
  • 将超过五千行的 globals.css 拆分为 16 个按职责划分的样式文件
  • 新增样式目录说明,明确设计令牌、基础样式、首页、内容、移动端、夜间模式和照片等模块
  • 将首页拆分为 Hero、持续进行、最近更新、生活档案、关于本站和页脚等可复用组件
  • 显著缩短 app/page.tsx,使首页结构更清晰并便于后续维护

修复

修复
  • 修复部分手机端标题过大、视觉层级失衡的问题
  • 修复部分移动端样式未命中真实页面元素的问题
  • 修复电脑端与手机端首页照片比例显示不一致的问题
  • 修复 SiteHeader 在不同页面导航数据结构下的类型问题
V2.0

新版网站的主要功能成形

在完成 WordPress 与 Next.js 的连接后,网站的首页、文章系统、生活档案、照片展示和互动功能在这一天集中完成。LMN516 不再只是一个新的页面外观,而开始成为一个能够自动读取内容、实时变化并持续扩展的个人网站。

内容连接

重构
  • 完善 WordPress REST API 数据读取
  • 从 WordPress 自动读取文章标题、日期、摘要和正文
  • 从 WordPress 自动读取文章特色图片
  • 建立文章数据的备用内容机制,避免接口异常时页面完全空白
  • 修正 WordPress API 地址和内容请求路径
  • 处理 WordPress 摘要中的 HTML、空格和省略号问题

文章系统

新增
  • 完成单篇文章动态页面
  • 完成全部文章列表页面
  • 根据文章 slug 自动生成文章访问路径
  • 首页文章卡片可以真正进入对应文章
  • 增加文章标题、摘要、日期与特色图片展示
  • 建立「继续阅读」和「查看全部文章」入口

自动数据

新增
  • 首页自动显示当天日期和星期
  • 自动计算并显示当年的时间进度
  • 自动读取最近更新的文章
  • 从 WordPress 文章标题中提取俯卧撑完成数量
  • 让「一万个俯卧撑」进度随着文章标题更新而自动变化
  • 建立俯卧撑目标、当前数量和进度条展示

首页重构

重构
  • 重组首页信息结构,形成杂志式个人主页
  • 建立今日档案、持续进行、最近更新、生活档案和关于本站等区域
  • 用真实照片替代原先较为抽象的首页视觉区
  • 增加文章特色图片组成的内容卡片
  • 移除图片周围多余的色块和边框
  • 调整首页空间、留白、标题和正文层级
  • 统一中文栏目名称,减少不必要的英文标签

照片与生活档案

新增
  • 连接 WordPress 媒体库
  • 新增随机照片墙组件
  • 让首页照片能够按照间隔自动切换
  • 将照片切换时间调整为 12 秒
  • 新增音乐、散步、房间和电影等生活档案页面
  • 为未来的 Digital Garden 页面结构建立基础

碎碎念

新增
  • 新增碎碎念数据读取功能
  • 新增碎碎念独立页面
  • 新增首页右下角碎碎念气泡
  • 为气泡加入点击互动效果
  • 调整气泡尺寸、形状和动画幅度
  • 解决气泡过大、动画眩晕以及滚动时位置不自然的问题
  • 增加从首页气泡进入碎碎念页面的过渡效果

主题与交互

新增
  • 新增浅色与深色模式切换
  • 建立 ThemeToggle 独立组件
  • 让主题选择能够在页面刷新后继续保留
  • 增加页面切换动画
  • 增加页面跳转后的滚动位置重置
  • 让首页的部分卡片和按钮从装饰元素变成真实链接

视觉调整

优化
  • 保留宣纸雾白、墨色文字和青黛强调色的视觉方向
  • 尝试 Apple 风格后恢复更适合 LMN516 的原始气质
  • 尝试杂志式首页结构并继续调整
  • 统一 LOGO 为一行显示的「LMN516」
  • 整理并精简 globals.css 中重复和冲突的样式
  • 调整电脑端与手机端不同页面的标题大小
V1.5

从 WordPress 网站走向前后端分离

这一天正式建立 lmn516-v2 项目。在 AI 协作下,原本由 WordPress 主题同时负责内容和页面的网站,被拆分成独立的内容后台与前端界面。WordPress 继续保存文章和图片,Next.js 开始接管页面、设计和交互。

架构重建

重构
  • 建立独立的 Next.js 前端项目
  • 采用 Next.js App Router 组织页面
  • 将 WordPress 从完整网站调整为 Headless CMS
  • 保留 WordPress 作为文章、图片和生活记录的数据后台
  • 建立 Next.js 与 WordPress REST API 之间的数据连接
  • 将网站前端与内容管理系统正式分离

开发基础

新增
  • 建立 app、components 和 lib 等基础目录
  • 建立首页、文章页、归档页和关于页面
  • 创建 WordPress 数据读取文件
  • 建立文章的数据类型与获取函数
  • 配置 TypeScript 路径别名
  • 配置 WordPress 图片域名访问权限
  • 升级和调整 Next.js 项目依赖

版本管理

新增
  • 创建 GitHub 项目仓库
  • 开始使用 Git 保存每一次网站修改
  • 建立 main 分支作为正式部署版本
  • 形成 git add、git commit、git push 的更新流程
  • 可以通过 GitHub 查看和恢复网站历史版本

自动部署

新增
  • 将 GitHub 仓库连接到 Vercel
  • 建立 GitHub 推送后自动构建和部署的流程
  • 让 lmn516.com 指向新的 Next.js 前端
  • 保留 cms.lmn516.com 作为 WordPress 内容后台
  • 继续通过 Cloudflare 管理域名解析

设计探索

优化
  • 将最初的基础页面转换为 LMN516 的个人视觉设计
  • 多次尝试并比较不同首页布局
  • 在现代网页风格和原有个人气质之间寻找平衡
  • 恢复并保留更符合个人网站氛围的颜色、字体和留白
  • 确定网站不只是博客,而是逐渐发展为 Digital Garden

解决的问题

修复
  • 修复项目路径别名无法识别的问题
  • 修复 WordPress API 地址配置错误
  • 修复前端无法正确读取 WordPress 文章的问题
  • 解决本地代码、GitHub 与 Vercel 部署版本不同步的问题
  • 验证无痕模式和正式域名下的更新结果
V1.0

WordPress 阶段:个人网站正式建立

在自己的 VPS 上完成服务器和 WordPress 配置后,LMN516 成为一个可以正式写文章、上传照片和保存生活记录的个人网站。这一阶段解决了「拥有网站」的问题,也为后来的前后端分离保留了全部内容基础。

服务器

重构
  • 使用自己的 VPS 承载网站
  • 在 Ubuntu 服务器上配置 Nginx
  • 安装并配置 PHP、MariaDB 和 WordPress
  • 配置 HTTPS 与网站访问规则
  • 建立属于自己的 WordPress 数据库

网站上线

新增
  • 完成 lmn516.com 域名配置
  • 通过 Cloudflare 管理 DNS
  • 使用 WordPress 主题搭建网站页面
  • 开始发布个人文章
  • 建立 WordPress 媒体库
  • 开始保存照片、随笔和生活记录

阶段局限

优化
  • 网站内容可以稳定发布,但页面结构受 WordPress 主题限制
  • 首页样式较为固定,难以按照个人想法自由调整
  • 文章、图片与页面展示紧密绑定在同一套 WordPress 主题中
  • 逐渐产生自行设计首页和增加更多互动功能的需求
V0.5

从一个网页开始

在使用 WordPress 之前,LMN516 曾经历静态网页和 Hugo 等不同形式。这个阶段的网站功能并不复杂,但域名、服务器和个人内容已经逐渐聚到一起,网站开始真正成为一个长期项目。

早期尝试

新增
  • 购买并使用 lmn516.com 域名
  • 购买 VPS 并学习通过 SSH 管理服务器
  • 尝试使用静态 HTML 和 Nginx 发布网页
  • 尝试使用 Hugo 与 PaperMod 搭建博客
  • 逐渐明确网站用于保存文章、照片和个人经历

代码会继续变化,内容会继续增加,生活也不会乖乖停在一个版本里。

回到 LMN516