电路绿主题插图
// HERO · 电路绿主题插图

生成式封面实践:不依赖设计资源的博客头图方案

F face 243 字 · 约 1 分钟 0 条评论 前端开发

博客文章配图是个长期负担——不是每篇技术笔记都值得配一张设计图。本站的做法是:首图优先,生成式兜底。

#规则很简单

  1. 文章正文里包含图片时,第一张自动成为文章头图(hero),同时用于列表卡片封面
  2. 没有图片的文章,回退为「哈希色生成式封面」:按分类名取色相,铺一层网格与装饰字符

#生成式封面长什么样

本篇正文带了一张插图(见下),所以你现在看到的卡片封面就是它,而不是生成式色块:

电路绿主题插图

#生成式兜底的实现要点

css
.cover-art {
  background:
    radial-gradient(120% 140% at 85% 20%, hsl(var(--h) 90% 62% / 0.5), transparent 55%),
    linear-gradient(135deg, #0b1020, #1c2a4d);
}

配合 hashHue(分类名) 保证同一分类的封面色相稳定,视觉上形成系列感。

配图是锦上添花,不是发文的门槛——这个设计让「随手记」也能体面地出现在列表里。

本文链接:/post/generated-cover-art/ · 转载请注明出处 · 原文由 Typecho 驱动

//评论 0

还没有评论,来说两句吧~

$ 发表评论 visitor@generated-cover-art

// 相关阅读