我在一天内打造了一个免费 Email Signature Generator — 无需后端

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source line exactly as you provided and preserve all formatting, markdown, and code blocks.

想法

我需要一个电子邮件签名。现有的生成器要么丑陋，要么付费，要么会追踪你。于是我自己做了一个。

SigCraft 是一个免费、开源的电子邮件签名生成器。无需注册、无需后端、无追踪。纯客户端 HTML/CSS/JS。

电子邮件签名是个人化的。它们包含你的姓名、照片、电话号码、社交链接。我不想让这些信息触及服务器。

所有操作都在浏览器中完成：

• 照片上传会被转换为 Base64（直接嵌入签名）
• 预览实时渲染
• 复制可同时获得富文本和原始 HTML
• 页面加载后不再发起任何网络请求

如果你从未制作过 HTML 邮件，让我帮你省点时间：忘掉你对现代 CSS 的所有认知。电子邮件客户端是网页标准的“死亡之地”。Outlook 使用 Word 的渲染引擎。Gmail 会剥离 <style> 标签。Yahoo … 只会做 Yahoo 式的事。

解决方案

表格。到了 2026 年，我们仍在使用 <table> 布局来编写邮件。我并不为此自豪，但它在所有客户端都能工作：

<table>
  <tr>
    <td>
      <strong>Your Name</strong><br>
      Your Title
    </td>
  </tr>
</table>

我学到的关键规则

• 仅使用内联样式 — 外部/内部 CSS 会被剥离
• 不使用 flexbox、grid — 表格是你的布局系统
• Base64 图片 在大多数客户端可用，但某些（如 Outlook 桌面版）可能会阻止显示
• border‑radius 在大多数客户端有效，除旧版 Outlook 外
• 保持在 10 KB 以下 — 有些客户端会截断过大的签名

模板

SigCraft 附带六个模板，均可完全自定义（颜色、字体、字段、社交图标）。

无需外部资源的图标

我不想依赖 Font Awesome CDN 或外部图标服务（邮件客户端会阻止外部资源）。相反，我将 SVG 图标嵌入为 data URI：

<!-- Example SVG as data URI -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgxMjB2MTIwaC0xMjB6IiBmaWxsPSIjMDAwIi8+PC9zdmc+" alt="Icon">

这意味着即使图片被阻止，社交图标仍能显示——Base64 数据本身就是签名的一部分。

复制选项

用户需要两种复制方式：

1. 富文本 — 直接粘贴到 Gmail/Outlook 设置中
2. 原始 HTML — 适用于接受 HTML 输入的邮件客户端

富文本复制使用带有 HTML MIME 类型的 Clipboard API：

const blob = new Blob([signatureHTML], { type: "text/html" });
const item = new ClipboardItem({ "text/html": blob });
await navigator.clipboard.write([item]);

这在粘贴到邮件设置时能够保留格式。HTML 复制方式则仅为：

await navigator.clipboard.writeText(signatureHTML);

实现细节

• HTML/CSS/JS — 就是它。没有框架，没有构建步骤。
• GitHub Pages — 免费托管，推送时自动部署。
• 总成本: $0 — 无服务器、无数据库、无 API 密钥。

SEO（手动）

• OpenGraph + Twitter Card 元标签
• JSON‑LD 结构化数据（WebApplication 模式）
• 针对长尾关键词的 FAQ 部分
• 语义化 HTML（<header>、<main>、<footer>）

未来改进

如果我重新构建它，我会考虑：

• 添加实时邮件预览（显示签名在模拟收件箱中的效果）
• 支持个人资料照片的动画 GIF（有些人想要）
• 开发一个自动插入签名的 Chrome 扩展

SigCraft — 免费电子邮件签名生成器

它是开源的：

无需注册。无付费墙。无追踪。只有签名。

---

我在公开构建工具和 SaaS 产品。如果你对开发者工具感兴趣，我还创建了 Rendly —— 为开发者提供的截图和 OG 图片 API。