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 结合,实现电子邮件的发送功能。
通过这些生态项目的结合,可以构建一个完整的电子邮件解决方案,满足各种复杂需求。