这个博客现在跑的的主题叫 SocialX——一套从零手写的 Hexo 主题。它的样子和传统博客不太一样:打开首页,看到的不是”文章列表”,而是一条时间线。这篇文章聊聊它为什么这么设计,以及塞进去了哪些功能。

设计思想:博客即个人主页

传统博客主题的逻辑是”文集”:文章是主角,人是背景板。但个人博客真正有趣的其实是人——文章、碎碎念、照片、歌单,都是同一个人的不同侧面。

所以 SocialX 借用了社交主页的信息架构:

• 左栏是人:头像、简介、位置、社交链接,一屏之内知道”这是谁”
• 中栏是时间线:所有内容按时间倒序排成 feed,像刷推一样刷一个人
• 右栏是仪表盘:更新热力图、站点统计、热门文章、标签云——给博客装上一块”数据面板”

好处是信息密度高、个人色彩强:读者不只是在读文章,而是在”逛一个人的主页”。

五种内容形态,一条时间线

不是每件小事都值得写成长文。SocialX 在 front-matter 里加了一个 type 字段,让五种形态的内容混排在同一条时间线上:

长文和碎碎念在视觉上有明确区分:长文是白色卡片配实心徽章,说说类则是淡粉气泡配线性徽章。feed 顶部的「全部 ▾」胶囊可以按类型筛选,想只看正经文章或只刷碎碎念都可以。

置顶逻辑也照搬了社交平台:pinned: true 的文章永远钉在时间线最上面,带一个图钉徽章。

看得见的细节

• 暖粉主色:全套设计 token 用 CSS 变量管理,主色 #e1506b 配紫色渐变做点缀
• 明暗双主题:跟随系统偏好,也记住手动选择;切换时页面不刷新不闪白
• 悬停反馈:卡片 hover 上浮、标签悬浮、头像旋转——所有动效走统一的缓动 token,且尊重 prefers-reduced-motion
• Banner 打字机:副标题逐字打出、光标闪烁,打完后光标闪几下自动熄灭

功能速览

• Pjax 无刷新跳转:全站局部刷新 + 顶部渐变进度条,翻页像单页应用一样顺滑
• 说说浮窗:点气泡就地弹出详情,移动端自动变成底部弹出层
• 本地搜索:构建时生成 search.xml,标题正文全文检索,键盘 / 或 Ctrl K 唤起
• 迷你播放器:右上角常驻,网易云歌单、波形进度条、逐行歌词
• Artalk 评论:文章页底部完整评论区,feed 卡片上还能就地展开
• 互动数据:点赞、阅读量、浏览量统计直接嵌在操作行里
• PhotoSwipe 灯箱:正文和照片墙的图片点开全屏看图
• 键盘党面板:Shift ? 弹出全部快捷键说明
• 文章工具:代码块一键复制、标题锚点、右侧 TOC 滚动跟随高亮

移动端不是删减版

移动端最近专门做了一轮适配:窄屏下侧栏收起为抽屉导航(带头像和搜索),弹窗类组件一律改为底部弹出式顺手触控,输入框字号调到 16px 防 iOS 聚焦放大,全站接入刘海屏安全区,操作按钮加大到 40px 触控目标。手机上刷时间线的体验,不比桌面端差。

写作管线:Obsidian push 即发布

主题只是面子,里子是一条自动化管线:在 Obsidian 里写完 .md,git push 到一个裸仓库,post-receive 钩子自动完成 Obsidian 语法转换(![](/img/img)、note)、hexo generate 和 rsync 上线。从写完到发布,中间没有任何手工步骤——写作心流不被打断,这才是静态博客的正确打开方式。

主题代码不复杂:EJS 模板 + 一份手写 CSS + 原生 JS,没有任何前端框架,构建产物是纯静态 HTML。如果要一句话总结 SocialX 的立场,大概是:博客不必是一本正经的书,也可以是一条热热闹闹的时间线。