1. 产品
  2.   电子邮件
  3.   Node.js
  4.   Email-Builder-js
 
  

开源 Nodd.js 邮件模板库

强大的 Node.js 邮件库允许软件开发者以编程方式构建可定制的电子邮件模板。它使用可重用的组件，如页眉、页脚、内容区块。

创建精致、专业的电子邮件模板对于发送自动化消息（如欢迎邮件、新闻通讯、事务性通知等）的应用程序至关重要。由于电子邮件客户端和设备之间的兼容性问题，编写 HTML 邮件可能会比较棘手。在构建自定义电子邮件模板时，开发者常常面临布局一致性、定制化和响应式设计等挑战。Email-Builder-js 是一个强大的开源 JavaScript 库，简化了在 JavaScript 应用程序中创建和管理电子邮件模板的过程。该工具使开发者能够轻松设计、定制并将动态电子邮件模板嵌入到他们的应用中。

Email-Builder-js 是一个基于 Node.js 的库，用于创建 HTML 邮件模板，专注于模块化设计， 跨客户端兼容性和自定义样式。它提供了用户友好的拖拽界面，允许开发者轻松添加和排列元素，如文本、图像和按钮，在邮件模板中。它使软件开发者能够以编程方式生成邮件模板，避免了内联样式和 HTML 特有的怪癖的麻烦，库在后台处理了大部分工作。使用该库可以通过可重用组件构建模板，便于在不同邮件之间保持一致性，节省开发时间。该库对于需要个性化邮件的应用非常实用。其模块化设置、定制选项以及与邮件服务的顺畅配合，使其在通信需求和软件开发中极具价值。

Previous Next

开始使用 Email-Builder-js

推荐的 Email-Builder-js 库安装方式是使用 NPM。请使用以下命令进行顺利安装。

通过 NPM 安装 Email-Builder-js

npm install --save @usewaypoint/email-builder

创建基于组件的电子邮件模板设计

在开源 Email-Builder-js 库的核心是其对组件的关注。通过这种方法，软件开发者可以创建可重用的部件，如页眉、页脚、内容区段和按钮。这些组件可以轻松组合，形成完整的模板。以这种方式拆分设计，不仅代码组织更好，也更容易更新和管理模板。在下面的示例中，每个组件单独创建，允许灵活组合，并在不更改整体结构的情况下进行未来的更新。

如何使用 Node.js 库创建电子邮件组件并将其组合？

 
const EmailBuilder = require('email-builder-js');

const email = new EmailBuilder();

// Create reusable components
const header = email.createComponent({
  tag: 'header',
  content: '
欢迎来到我们的平台！
',
  style: { color: '#333', textAlign: 'center', padding: '10px' },
});

const mainContent = email.createComponent({
  tag: 'div',
  content: '
我们很高兴您加入我们的行列。尽情享受我们的功能！
',
  style: { color: '#666', fontSize: '16px', padding: '20px' },
});

const footer = email.createComponent({
  tag: 'footer',
  content: '
此致敬礼，
团队
',
  style: { color: '#999', textAlign: 'center', padding: '10px' },
});

// Combine components into a template
const template = email.buildTemplate({
  components: [header, mainContent, footer],
});

// Output the complete HTML template
console.log(template);

为模板应用自定义样式和品牌标识

为了确保电子邮件模板与应用程序的品牌保持一致，Email-Builder-js 库允许通过每个组件的 style 属性进行广泛的自定义。这包括调整模板的颜色、字体、尺寸和布局。软件开发人员可以使用内联样式，这对于确保电子邮件客户端按预期渲染设计至关重要。以下代码片段创建了一个具有背景颜色、内边距和圆角的按钮，样式模仿典型的号召性按钮，以符合品牌颜色。

如何在 Node.js 中创建具有背景颜色、内边距和圆角的按钮？

 
const button = email.createComponent({
  tag: 'a',
  content: 'Click Here to Get Started',
  attributes: { href: 'https://example.com/get-started' },
  style: {
    display: 'inline-block',
    padding: '10px 20px',
    backgroundColor: '#007bff',
    color: '#fff',
    textDecoration: 'none',
    borderRadius: '5px',
    textAlign: 'center'
  },
});

const template = email.buildTemplate({
  components: [button],
});

console.log(template);

在 Node.js 中向电子邮件注入动态内容

对于发送个性化电子邮件的应用程序，例如订单确认或用户特定通知，开源的 Email-Builder-js 库支持动态内容注入。软件开发人员可以以编程方式将用户特定信息（如姓名、地址或购买详情）插入模板，从而创建更具吸引力和相关性的电子邮件。通过使用模板字面量，开发者可以轻松地用动态内容替换占位符。这种方法对事务性电子邮件以及任何个性化至关重要的场景都非常有效，如下例所示。

如何通过 Node.js 库注入动态内容来创建电子邮件？

 
const userName = 'John Doe';
const product = 'Premium Subscription';

const personalizedContent = email.createComponent({
  tag: 'div',
  content: `
您好 ${userName},
感谢您购买我们的${product}！
`,
  style: { color: '#333', fontSize: '16px' },
});

const template = email.buildTemplate({
  components: [personalizedContent],
});

console.log(template);
 中国人