EmailBuilder.js 使用教程

1、项目介绍

EmailBuilder.js 是一个免费且开源的基于块的电子邮件模板构建器。它允许开发者通过简单的 JSON 或 HTML 输出快速构建电子邮件模板。该项目支持多种现代电子邮件客户端，包括 Gmail、Apple Mail、Outlook、Yahoo Mail、HEY 和 Superhuman。EmailBuilder.js 提供了丰富的内置块，如 Avatar、Button、Columns、Container、Divider、Heading、HTML、Image 和 Spacer 等，每个块都是一个独立的 npm 包，可以灵活地扩展和自定义。

2、项目快速启动

安装

首先，通过 npm 安装 EmailBuilder.js：

npm install --save @usewaypoint/email-builder

基本使用

以下是一个简单的示例，展示如何使用 EmailBuilder.js 创建并渲染一个电子邮件模板：

import { TReaderDocument, renderToStaticMarkup } from '@usewaypoint/email-builder';

const CONFIGURATION: TReaderDocument = {
  root: {
    type: 'EmailLayout',
    data: {
      backdropColor: '#F8F8F8',
      canvasColor: '#FFFFFF',
      textColor: '#242424',
      fontFamily: 'MODERN_SANS',
      childrenIds: ['block-1709578146127']
    }
  },
  'block-1709578146127': {
    type: 'Text',
    data: {
      style: {
        fontWeight: 'normal',
        padding: {
          top: 16,
          bottom: 16,
          right: 24,
          left: 24
        }
      },
      props: {
        text: 'Hello world'
      }
    }
  }
};

const htmlString = renderToStaticMarkup(CONFIGURATION, { rootBlockId: 'root' });
console.log(htmlString);

3、应用案例和最佳实践

应用案例

• 欢迎邮件：使用 EmailBuilder.js 创建个性化的欢迎邮件模板，提升用户体验。
• 密码重置：生成密码重置邮件模板，确保用户安全地重置密码。
• 电子商务收据：构建专业的电子邮件收据模板，提高客户满意度。

最佳实践

• 模块化设计：利用 EmailBuilder.js 的块结构，创建可重用的模块，提高开发效率。
• 响应式设计：确保电子邮件在不同设备和客户端上都能良好显示。
• 测试和优化：在多种电子邮件客户端上测试模板，确保兼容性和性能。

4、典型生态项目

EmailBuilder.js 可以与其他开源项目结合使用，以增强功能和扩展性：

• React：结合 React 组件，实现动态电子邮件模板生成。
• Tailwind CSS：使用 Tailwind CSS 进行样式设计，提高模板的美观性和一致性。
• Nodemailer：与 Nodemailer 结合，实现电子邮件的发送功能。

通过这些生态项目的结合，可以构建一个完整的电子邮件解决方案，满足各种复杂需求。