让个人网站有了画面和声音：litian.me 2.0 的一天

先留下 1.0，再开始新的尝试

开始做 2.0 之前，我先把原来的网站保存成 1.0。它是一个以文字为主的简单版本，记录了网站最初的介绍、文章、留言和指南。保留它，让我可以放心尝试新的布局。

后来，我又把版本入口放到了主题按钮旁边。现在从版本菜单可以回看 1.0 的简单文字版，也能回到带有视频与音乐的 2.0。网站更新之后，之前的样子也有了一个可以回去看看的地方。

用三屏，让首页慢下来

新的首页分成三部分：第一屏是开场白，第二屏放关于我和记录与想法，第三屏是关于这里与备案信息。滚轮和导航都能在它们之间切换，切换时加入了缓动滚动、淡入和轻微位移，希望读起来更自然。

第一屏的导航默认收起，点击 litian.me 展开；第二、第三屏默认显示。主题和版本入口一直留在右侧。为了给背景视频里的歌词留出位置，导航与正文的高度也反复调整过。

开场白最后定为“我在这里，慢慢生长”，下面接着“记录一些想法，一些生活”。比起把介绍写得很满，我更喜欢让这个空间留下一点余地。

画面和音乐，由访客决定什么时候开始

最初，背景会自动播放，再让用户手动开启声音。但这样一来，音乐可能从视频中间突然出现，体验有些突兀。我于是把它改成进入页面时先静止、无声，默认展示视频的第一帧。

点击“播放视频与音乐”后，画面与原声音轨从同一位置开始，音乐做了短暂的淡入。右下角可以分别停止音乐和视频：想安静地看画面，或停下画面继续听，都可以自己选择。

从首页切到留言或指南时，这些播放状态会保留；刷新页面则重新等待手动开始。这个改动看起来不大，却让声音出现得更从容。

自己的屏幕看着舒服，还要换一台电脑试试

在我的 2K 屏幕上，首页的留白和字号已经比较合适，但在局域网内另一台电脑上，标题又显得太大、太挤。这让我再次意识到，适配不能只看自己常用的那一块屏幕。

这次把首屏字号改为同时参考浏览器的可用宽度和高度，并调整行高、字距和段间距。小窗口会适当收紧字号，完整的 2K 视口保留原来的效果，手机则继续使用独立的小屏布局。

浅色主题也做了一轮调整。原先覆盖在视频上的白色遮罩太重，背景几乎看不清；现在改为更轻的遮罩，让主题变化主要体现在内容卡片和控件上，视频本身保留更多原色。

从一个压缩视频，做到按屏幕选择清晰度

检查清晰度时，我才注意到：原始素材是 4K、接近 60fps，而早期为了加载速度做出的背景副本只有 720p、24fps。它在大屏幕上放大之后，细节确实不够清楚。

先尝试了 1080p、30fps，随后又准备了 720p、1080p、2K、4K 四档视频，统一使用 30fps。现在会根据浏览器报告的屏幕规格估算合适的档位，右下角显示当前选择，也可以手动校正。

不同电脑的系统缩放、浏览器缩放和窗口比例都会影响实际看到的效果。画质、裁切、字号和加载速度之间还有取舍，这些细节也需要在真实设备上继续观察。

生命在流动，故事慢慢写

今天的重点不是一次把网站做完，而是把自己在使用中看到的问题，一点点说清楚、改到页面里。开场白、一个小箭头的转动方向、音乐什么时候响起，都是这样慢慢确定下来的。

1.0 留下了最初的文字，2.0 把画面、音乐和记录放到一起。以后这里还会继续变，但我希望它一直是一个愿意回来写点东西、也愿意停下来看看生活的地方。