技术文章封面生成器 纯前端 · 免登录

技术文章封面生成器使用说明

写技术文章时，配图往往是最后才想起来的事。这个工具把常见的封面排版固化成三套模板，填文字、贴几行内容，立刻得到一张 1200×630 的封面图，适合掘金、CSDN、公众号、知乎的封面位。

所有绘制都在浏览器本地完成，标题和代码不会上传到服务器，可以放心放内部日志片段（敏感信息仍建议先脱敏）。

三种模板怎么选

终端封面：标题条 + 圆角终端面板，适合 Linux、运维、部署、Git、排错类文章。真实终端输出最有说服力，缺点是缩略图状态下字偏小，所以内容建议控制在 5-7 行。

大字报：大标题 + 角标 + 可选序号，没有代码面板。适合观点文、清单文、入门教程、面试题，缩略图辨识度最高，因为字最大。

双栏对比：左右两栏并列，左栏默认红色、右栏默认绿色。适合踩坑复盘、重构前后、错误写法与正确写法对照。

内容写法约定

终端与双栏模板的行首前缀会自动上色：含 $ 的行是命令行（绿色）、以 + 开头是调试输出（灰色）、以 ! 开头是需要强调的结果（橙色）。双栏模板里左栏整体偏红、右栏整体偏绿，用 ! 可以再单独挑出一行高亮。

内容过长时会自动缩小字号并折行，但封面是缩略图，字数越多越看不清——宁可少放几行，把最关键的一条留在画面上。

常见问题

为什么导出后字体和我本机不一样？画布使用系统字体：英文优先等宽（JetBrains Mono / Consolas / Menlo），中文优先（微软雅黑 / 苹方 / 思源黑体）。不同系统上字形会有细微差异，这是浏览器绘图不内嵌字体的正常表现。

内容太多放不下怎么办？画布固定 1200×630，行数超过容量时会自动缩小字号，最小到 12px。更好的做法是只保留最关键的几行。

能同时放三栏吗？当前最大是双栏。超过两栏时每栏宽度不足，缩略图下必然糊，不建议。

支持中文和 emoji 吗？支持。中文走中文字体回退，emoji 由系统彩色字体渲染，所以「❌」「✅」这类符号可以直接写进栏标题。

封面尺寸为什么固定 1200×630？这是 16:9 附近的通用比例，掘金、CSDN、公众号首图、大多数 CMS 的封面位都能直接用，不用二次裁切。

配置能复用吗？「复制配置」输出 JSON，格式与本地出图脚本兼容，线上调好的配色和排版可以贴回本地批量生成。