存书阁
· 约 3 分钟 · #设计 #博客 #写作

为博客定一种"克制"的设计

记录这个站点的视觉与结构决策——为什么用衬线标题、为什么按年份归档、为什么没有信息流。

搭新博客时,最容易犯的错不是审美问题,而是功能问题:总想着先把评论区、订阅弹窗、推荐算法、标签云、阅读进度条都塞进去,结果写作反而成了最不重要的那件事。

这次想反着来:先剪掉一切可以剪的,剩下的再雕琢。

先说不做什么

以下每一项都是”参考其他博客都有,但仔细想想并不必要”的东西:

  • 信息流/瀑布流首页:博客不是朋友圈,不需要无限滚动
  • 阅读进度条:浏览器自带滚动条已经够用
  • 滚动动画/入场动画:每次点进文章都要看一遍过场,是噪音
  • 订阅弹窗:RSS 是为懂的人准备的,不追着看的人你留邮箱也没用
  • 分享按钮:现代浏览器自带分享,复制链接也是一秒的事
  • 首页打字机效果:2015 年的设计残留
  • 广告位预留:个人博客不赚钱,留白吧

软件里每加一个功能,都是在向未来的自己收税。

视觉语言的三个取舍

衬线做标题,无衬线做正文

标题用衬线(Noto Serif SC / Source Han Serif / Songti 回退),在中文字符里能保留横竖撇捺的结构感;配合加粗,视觉重量感足。 正文用无衬线(Inter + PingFang SC),阅读密度更高,不会在长段落里让眼睛累。

色板收窄到两色

只保留墨色(中性偏冷的灰阶)和一种暖棕作为强调色。暗色模式下把暖棕调得更亮一档。不加第二种 accent 是因为:一旦有了蓝,就会有绿;有了绿就会有红警示色。克制的做法是让所有强调都落在同一个色相上。

分隔用空行,不用装饰

章节之间靠段落间距和小号标题划分,而不是 <hr> 线或花里胡哨的分隔符。

结构上的一点固执

/             首页 —— hero + 近 5 篇
/posts        全站归档,按年份分组
/posts/<slug> 单篇文章
/tags         全部标签
/tags/<tag>   单标签过滤
/about        关于

没有分类树,只有标签——层级过深的分类不会帮你找回旧文章,标签的交叉检索才会。没有”热门文章”,因为这个博客不打算有”热门”这件事。

写作流程

写 Markdown,放到 src/content/posts/frontmatter 填好就算上线。一切流程都在命令行里完成,不进后台、不点按钮。这也是选择静态站生成器最大的好处:发布这件事本身不该有仪式感,有仪式感的是内容。


博客是一个慢工程。今天的决定有些可能半年后就被推翻,但每推翻一次,都会对”为什么当时那么做”更清楚一点。