搭建博客写文章不知道怎么配封面?自制封面生成器

写博客的人大概都有这个体会:文章写完了,封面图还没做。

封面图对博客文章的阅读体验影响很大。无论是在社交媒体分享、RSS 阅读器还是博客首页列表里,有封面的文章总比没有封面的更吸引人点击。但每次写完文章都要打开 Figma 或者 Photoshop 做一张封面,流程太重,时间久了很容易放弃。

所以我自己做了一个博客封面生成器,用浏览器打开就能用,不需要安装任何东西。

这个封面生成器能做什么?

它是一个纯浏览器端的工具,不需要后端,不需要数据库,不需要登录,打开就能直接使用。

核心功能很简单:输入标题和副标题,选一个模板风格,调整字体和 Logo,然后一键导出 PNG。

18 套模板风格

内置了 18 套模板,覆盖了大部分博客场景的视觉风格。每套模板都有预设的配色和排版风格,选好模板之后封面预览会实时更新。如果觉得某个模板的颜色不适合当前文章,直接换一个就行,不需要重新做。

Logo / 头像上传

支持上传 Logo 或头像图片,上传后会显示在封面中央的卡片区域。可以调整 Logo 大小和透明度。

还有一个比较有意思的功能:选择 Auto 模板后,系统会自动从上传的 Logo 中提取主色调,然后根据提取到的颜色自动生成背景渐变。这意味着封面颜色可以直接和品牌 Logo 呼应,不需要手动调色。

文字控制

文字大小和透明度都可以通过滑块调整。另外还有一个"四字模式",开启后标题文字会拆分成四个大字,左右两组排列,适合做视觉冲击力比较强的封面。

副标题也支持自定义,默认是 “NUO’S BLOG”,可以改成任何文字。

卡片样式

部分模板支持卡片样式切换。可以在"磨砂背景"和"纯色背景"之间切换,磨砂效果会让封面看起来更有层次感。

一键导出

提供两种导出方式:

  • 导出 PNG / JPG:标准分辨率,适合一般使用

  • 高清导出 1× / 2× / 4×:多倍分辨率,适合需要更高清晰度的场景

导出在浏览器端完成,不需要服务器参与,封面内容不会上传到任何地方。

使用方式

  1. 打开页面 点击前文封面生成器

  2. 在左侧控制面板输入标题和副标题

  3. 选择一个模板风格

  4. 上传 Logo 或头像(可选)

  5. 调整字体、文字大小、透明度等参数

  6. 点击"导出 PNG"或"高清导出 2×"

整个过程不需要安装任何依赖,浏览器打开就能用。