建站日志 03:给首页做一个白色终端
首页不只是一个进入文章列表的入口,也可以让第一次来到小站的人知道这里是谁的空间。比较过几种风格后,我最喜欢终端窗口的方向。
几种参考之间
最初看过简洁的个人作品集、深色终端、字符画以及照片背景等不同风格。终端与我正在学习的后端和 AI 开发比较契合,但原参考图的深色背景与小站偏暖、简洁的方向不太一致。
因此,我们决定保留终端窗口的形式,把主体调整为浅色,并与小站的白色、暖色主题配合。
从介绍卡片到大终端
第一张生成的效果图把终端做得更像一张普通介绍卡片,下面的最近文章也占了较多空间。这和我想象中的重点不一样:终端应该是首页的主角,里面也应该有命令和输出。
第二版效果图放大了终端,让它占据首屏大部分空间,并加入 whoami、cat about.txt、ls 等命令式内容。最近文章不再抢占主要位置。
当前首页
实际首页经过几次调整,现在使用浅色终端窗口,并用命令式排版展示自我介绍、文章分类、最近文章和站内链接。最近文章和导航是可点击链接,文章数据来自项目生成的索引。
窗口底部的光标目前是视觉效果。虽然我们讨论过输入 help 或 blog 来探索网站,但当前实现还不是一个可以输入命令的真实终端。
保留调整空间
效果图帮助我们确认了方向,真正的页面仍需要根据实际内容和屏幕尺寸继续打磨。首页最终要兼顾辨识度与可读性,让不熟悉终端的人也能找到文章入口。