Привет! Сегодня мы погружаемся в захватывающий мир шаблонов электронной почты и исследуем различные методы отображения и извлечения вложений. Итак, давайте начнем и раскроем весь потенциал шаблонов электронной почты!

Метод 1: Традиционный рендеринг
Одним из распространенных методов является использование шаблонизатора, такого как Handlebars или Mustache, для рендеринга шаблонов электронной почты. Эти механизмы позволяют вам определять заполнители в вашем шаблоне и заменять их динамическим контентом, делая ваши электронные письма персонализированными и динамичными. Вот простой пример использования Handlebars в JavaScript:

const template = Handlebars.compile('Hello, {{name}}! We are excited to have you on board.');
const context = { name: 'John' };
const renderedTemplate = template(context);
// Output: Hello, John! We are excited to have you on board.

Метод 2: рендеринг на стороне сервера (SSR)
При использовании SSR шаблоны электронной почты обрабатываются на сервере перед отправкой получателю. Этот подход полезен, когда у вас есть сложная логика или требования к выборке данных. Например, в среде Node.js вы можете использовать такую ​​​​инфраструктуру, как Express, и механизм шаблонов, такой как EJS:

app.get('/email', (req, res) => {
  const data = {
    name: 'John',
    products: ['Product 1', 'Product 2', 'Product 3']
  };
  res.render('email-template', data);
});

Метод 3: рендеринг на стороне клиента (CSR)
В некоторых случаях вам может потребоваться отображать шаблоны электронной почты на стороне клиента, обычно при создании одностраничного приложения (SPA). Для этого вы можете использовать интерфейсную среду, такую ​​​​как React. Вот упрощенный пример компонента React:

import React from 'react';
const EmailTemplate = ({ name }) => {
  return <p>Hello, {name}! We hope you're doing well.</p>;
};
export default EmailTemplate;

Метод 4: варианты извлечения вложений
Когда дело доходит до извлечения вложений, в вашем распоряжении есть несколько вариантов:

4.1 Встроенные вложения
Встроенные вложения отображаются в тексте электронного письма, что позволяет напрямую вставлять изображения или другие медиафайлы. Вы можете использовать атрибут cidдля ссылки на вложение в HTML-контенте. Вот пример использования Node.js и Nodemailer:

const transporter = nodemailer.createTransport({ /* transporter configuration */ });
const mailOptions = {
  from: 'sender@example.com',
  to: 'recipient@example.com',
  subject: 'Email with Inline Attachment',
  html: '<p>Here is an image: <img src="cid:unique_id" /></p>',
  attachments: [{
    filename: 'image.jpg',
    path: '/path/to/image.jpg',
    cid: 'unique_id'
  }]
};
transporter.sendMail(mailOptions, (error, info) => {
  // Handle the response
});

4.2 Прикрепленные файлы
Если вы хотите отправлять вложения отдельно от тела электронного письма, вы можете использовать опцию attachments. Вот пример использования Nodemailer:

const transporter = nodemailer.createTransport({ /* transporter configuration */ });
const mailOptions = {
  from: 'sender@example.com',
  to: 'recipient@example.com',
  subject: 'Email with Attachment',
  text: 'Check out this document!',
  attachments: [{
    filename: 'document.pdf',
    path: '/path/to/document.pdf'
  }]
};
transporter.sendMail(mailOptions, (error, info) => {
  // Handle the response
});

Вот и все! Мы изучили различные методы отображения шаблонов электронных писем и получения вложений. Независимо от того, используете ли вы традиционный рендеринг, рендеринг на стороне сервера или рендеринг на стороне клиента, эти методы помогут вам создавать динамичные и привлекательные электронные письма.