از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
یک ایمیل HTML از کد HTML برای ارائه استفاده می کند. طراحی آن سنگین است و شبیه یک وب مدرن است pageغنی از عناصر بصری مانند تصاویر، ویدیوها و غیره، برای تأکید بر بخش‌های مختلف محتوای ایمیل.
ساخت قالب های ایمیل متناسب با برند شما برای اهداف مختلف بازاریابی ایمیلی مانند استقبال از مشتریان جدید، تایید سفارش و غیره مفید است. روی. سفارشی سازی قالب ایمیل به شما این امکان را می دهد که با عدم نیاز به ایجاد ایمیل از ابتدا در زمان خود صرفه جویی کنید. شما همچنین می توانید یک لینک ایمیل در HTML برای نوشتن خودکار ایمیل در سرویس گیرنده ایمیل خود.
در این راهنمای گام به گام، یاد خواهید گرفت که چگونه یک قالب ایمیل HTML بسازید، یک طرح ایمیل CSS را به آن اضافه کنید و آن را برای مخاطبان هدف خود ارسال کنید.
راه اندازی دایرکتوری قالب و Jinja2
مراحل زیر را برای راه اندازی دایرکتوری قالب ایمیل HTML و Jinja2 برای اتوماسیون ایمیل پایتون دنبال کنید:
-
یک دایرکتوری الگو ایجاد کنید: برای نگه داشتن قالب های ایمیل HTML خود، باید یک دایرکتوری الگو را در داخل ماژول پروژه خود راه اندازی کنید. بیایید نام این فهرست را بگذاریم –
html_emailtemp. -
Jinja2 را نصب کنید: Jinja یک موتور قالب سازی محبوب برای پایتون است که توسعه دهندگان از آن برای ایجاد فایل های پیکربندی، اسناد HTML و غیره استفاده می کنند. Jinja2 آخرین نسخه آن است. این به شما امکان می‌دهد محتوای پویا را از طریق حلقه‌ها، بلوک‌ها، متغیرها و غیره ایجاد کنید. در پروژه‌های مختلف پایتون، مانند ساخت وب‌سایت‌ها و میکروسرویس‌ها، خودکار کردن ایمیل‌ها با پایتون و غیره استفاده می‌شود.
از این دستور برای نصب Jinja2 استفاده کنید روی کامپیوتر شما:
pip install jinja2
ایجاد یک قالب ایمیل HTML
برای ایجاد یک ایمیل HTML قالب، بیایید روش کدنویسی ایمیل خود را مرحله به مرحله درک کنیم. اگر می خواهید قالب های خود را تغییر دهید، می توانید این کار را به راحتی با دنبال کردن مراحل زیر انجام دهید:
مرحله 1: ساختار HTML
یک ایمیل اولیه ساختار مناسبی دارد – سرصفحه، بدنه و پاورقی.
- سربرگ: برای اهداف برندسازی استفاده می شود (حداقل در ایمیل ها)
- بدن: متن یا محتوای اصلی ایمیل را در خود جای می دهد
- پاورقی: اگر می‌خواهید پیوندها، اطلاعات یا تماس‌های بیشتری اضافه کنید (CTA) در انتهای ایمیل آمده است.
با ایجاد ساختار HTML خود شروع کنید و آن را ساده نگه دارید زیرا سرویس گیرندگان ایمیل نسبت به مرورگرهای وب سازگاری کمتری دارند. برای مثال، استفاده از جداول برای طرح‌بندی ایمیل‌های سفارشی ترجیح داده می‌شود.
در اینجا روش ایجاد یک ایمیل اولیه HTML با ساختار تعریف شده آورده شده است:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Email Template</title>
<style type="text/css">
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: #1c3f60; color: #ffffff; text-align: center; padding: 20px;">
<h1>Your order is confirmed</h1>
</td>
</tr>
<tr>
<td style="padding: 20px; font-size: 16px; line-height: 1.6; color:#ffffff;">
<p>The estimated delivery date is 22nd August 1403.</p>
</td>
</tr>
<tr>
<td style="background-color: #ff6100; color: #000000; text-align: center; padding: 20px;">
<p>For additional help, contact us at (email protected)</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
توضیح:
<!DOCTYPE html>: این HTML را به عنوان نوع سند شما اعلام می کند.<html>: این یک HTML است page’s root عنصر<head>: این فوق داده های سند را مانند سبک های CSS ذخیره می کند.<style>: سبک های CSS در اینجا تعریف می شوند.<body>: این قسمت محتوای اصلی ایمیل شما را ذخیره می کند.<table>: این تگ چیدمان ایمیل را تعریف می کند و به آن یک ساختار جدولی با سلول ها و ردیف ها می دهد که رندرینگ را برای مشتریان ایمیل آسان تر می کند.<tr>: این تگ ردیف جدول را تعریف می کند و امکان انباشتن محتوای عمودی را فراهم می کند.<td>: این تگ برای تعریف سلول داخل یک ردیف استفاده می شود. این شامل محتوایی مانند تصاویر، متن، دکمه ها و غیره است.
مرحله 2: ایمیل خود را ساختار دهید
اکنون، بیایید ساختار ایمیل HTML شما را ایجاد کنیم. برای اطمینان از سازگاری آن با کلاینت های ایمیل مختلف، به جای CSS از جداول برای ایجاد یک طرح ایمیل سفارشی استفاده کنید.
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" style="border: 1px solid #1c3f60; padding: 20px;">
<tr>
<td align="center">
<h1 style="color: #7ed957;">Hi, Jon!</h1>
<p style="font-size: 16px; color: #ffde59;">Thank you for being our valuable customer!</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
سبک دادن به ایمیل با CSS
هنگامی که ساختار ایمیل خود را تعریف کردید، بیایید طراحی ایمیل با HTML و CSS را شروع کنیم:
CSS درون خطی
از CSS درون خطی استفاده کنید تا اطمینان حاصل کنید که کلاینت‌های ایمیل مختلف CSS را با دقت ارائه می‌کنند و زیبایی‌شناسی مورد نظر سبک ایمیل شما را حفظ می‌کنند.
<p style="font-size: 16px; color: blue;">Styled paragraph.</p>
تنظیم سبک
کاربران ممکن است از دستگاه ها و اندازه های مختلف صفحه نمایش برای مشاهده ایمیل شما استفاده کنند. بنابراین، لازم است که سبک را با اندازه های مختلف صفحه نمایش تطبیق دهید. در این مورد، ما از پرسش‌های رسانه‌ای برای رسیدن به این هدف و تسهیل طراحی ایمیل واکنش‌گرا استفاده می‌کنیم.
<style type="text/css">
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
padding: 10px !important;
}
}
</style>
<table class="container" width="600">
</table>
توضیح:
@media screen and (max-width: 600px) {....}: این یک درخواست رسانه ای است که صفحه نمایش دستگاه تا 600 پیکسل را هدف قرار می دهد و اطمینان می دهد که سبک فقط برای این دستگاه ها مانند تبلت ها و تلفن های هوشمند اعمال می شود.width: 100% !important;: این سبک عرض جدول را تغییر می دهد – .container. کد دستور می دهد که عرض جدول روی تمام صفحه تنظیم شود، نه 600 پیکسل.!important: این قانون سایر سبک هایی را که ممکن است با آن در تضاد باشند، لغو می کند.padding: 10px !important;: داخل .container جدول، یک بالشتک 10 پیکسلی به جدول اضافه می شود.
اضافه کردن دکمه CTA و پیوندها
در اینجا، ما یک پیوند تماس به اقدام (CTA) را در دکمه – “دریافت یک آزمایش رایگان 30 روزه” اضافه می کنیم که به این اشاره دارد. page – https://www.mydomain.com.
<table cellpadding="0" cellspacing="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.mydomain.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Get a 30-day free trial</a>
</td>
</tr>
</table>
بیایید اکنون به قالب کامل ایمیل HTML نگاه کنیم:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Email Template</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
}
.mailcontainer {
width: 100%;
max-width: 600px;
margin: auto;
background-color: #ffffff;
}
.header {
background-color: #1c3f60;
color: #ffffff;
text-align: center;
padding: 20px;
}
.body {
padding: 20px;
font-size: 16px;
line-height: 1.6;
background-color: #1c3f60;
color: #7ed957;
}
.footer {
background-color: #ff6100;
color: #000000;
text-align: center;
padding: 20px;
}
.cta {
background-color: #8c52ff;
padding: 10px 20px;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
padding: 10px !important;
}
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="container" width="600" cellpadding="0" cellspacing="0">
<tr>
<td class="header">
<h1>Your order is confirmed</h1>
</td>
</tr>
<tr>
<td class="body">
<p>The estimated delivery date is 22nd August 1403.</p>
<p style="font-size: 16px; color: blue;">Styled paragraph.</p>
<table width="100%" cellpadding="0" cellspacing="0" style="border: 1px solid #1c3f60; padding: 20px;">
<tr>
<td align="center">
<h1 style="color: #7ed957;">Hi, Jon!</h1>
<p style="font-size: 16px; color: #ffde59;">Thank you for being our valuable customer!</p>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.mydomain.com" target="_blank" rel="noopener noreferrer" style="color: #ffffff; text-decoration: none; font-weight: bold;">Get a 30-day free trial</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #ff6100; color: #000000; text-align: center; padding: 20px;">
<p>For additional help, contact us at (email protected)</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
توضیح:
.mailcontainer: این کلاسی است که می توانید از آن برای استایل دادن به بخش اصلی محتوای ایمیل خود استفاده کنید. عرض، حاشیه، حاشیه و رنگ مجموعه ای به آن داده می شود..header،.footer،.body: اینها کلاس هایی هستند که به ترتیب برای استایل دادن به سربرگ، فوتر و بدنه ایمیل شما استفاده می شوند..cta: این کلاس به شما این امکان را می دهد که دکمه های خود مانند دکمه های CTA را با رنگ مشخص، طرح حاشیه، بالشتک و غیره استایل دهید.
آوردن همه چیز با Jinja2
پس از ایجاد قالب HTML ما، اکنون زمان آن رسیده است که همه چیز را با استفاده از موتور قالب‌سازی Jinja2 کنار هم قرار دهیم.
وارد کردن ماژول های پروژه
شما قبلا دایرکتوری قالب خود را تنظیم کرده اید – html_emailtemp. اکنون می توانید الگوها را با استفاده از کد پیدا کرده و رندر کنید. اما قبل از انجام این کار، import ماژول های پروژه مربوطه با استفاده از کد زیر:
from jinja2 import Environment, PackageLoader, select_autoescape
env = Environment(loader=PackageLoader('email_project', 'html_emailtemp'), autoescape=select_autoescape(('html', 'xml')))
توضیح:
-
Environment: Jinja2 از یک شی مرکزی، Template Environment استفاده می کند. نمونه‌های آن اشیاء و پیکربندی‌های جهانی را ذخیره می‌کنند و قالب‌های ایمیل شما را از یک فایل بارگیری می‌کنند.
-
PackageLoader: این Jinja2 را برای بارگیری قالب های ایمیل پیکربندی می کند. -
autoescape: برای کاهش تهدیدات امنیتی مانند حملات اسکریپت بین سایتی (XSS) و محافظت از کد خود، می توانید در حین رندر HTML با استفاده از دستور، از مقادیر (که به قالب ایمیل ارسال می شود) فرار کنید.autoescape. یا می‌توانید ورودی‌های کاربر را برای رد کدهای مخرب تأیید کنید.برای امنیت،
autoescapeتنظیم شده استTrueبرای فعال کردن مقادیر فرار. اگر آن را برگردانیدFalse، Jinja2 نمی تواند از مقادیر فرار کند و ممکن است حملات XSS رخ دهد. برای فعال کردن فرار خودکار، تنظیم کنیدautoescapeبهTrue:env = Environment(loader=PackageLoader("myapp"), autoescape=True)
قالب خود را بارگیری کنید
پس از اتمام، یک محیط قالب با یک بارگذار قالب ایجاد می شود تا الگوهای ایمیل ایجاد شده در پوشه قالب ماژول پروژه شما را پیدا کند.
سپس، قالب ایمیل HTML خود را با استفاده از روش بارگیری کنید – get_template(). این تابع الگوی بارگذاری شده شما را برمی گرداند. همچنین چندین مزیت مانند فعال کردن وراثت قالب ایمیل را ارائه می دهد، بنابراین می توانید از الگو در چندین سناریو استفاده مجدد کنید.
template1 = env.get_template("myemailtemplate.html")
قالب را رندر کنید
برای ارائه الگوی ایمیل خود از روش استفاده کنید – render()
html1 = template1.render()
از آنجایی که این قالب‌های ایمیل HTML پویا هستند، می‌توانید آرگومان‌های کلیدواژه (kwargs) را با Jinja2 به render تابع سپس kwargs به الگوی ایمیل شما منتقل می شود. در اینجا روش ارائه الگوهای خود با استفاده از نام کاربر مقصد – “Jon Doe” – در ایمیل خود آورده شده است.
html1 = template1.render(name="Jon Doe")
بیایید به کد کامل این بخش نگاه کنیم:
from jinja2 import Environment, PackageLoader, select_autoescape
env = Environment(loader=PackageLoader("email_project", "html_emailtemp"),
autoescape=select_autoescape(("html", "xml")))
template1 = env.get_template("myemailtemplate.html")
html1 = template1.render()
ارسال ایمیل
برای ارسال ایمیل، می توانید از پروتکل ساده در سطح برنامه – پروتکل انتقال نامه ساده (SMTP) استفاده کنید. این پروتکل ارسال ایمیل را ساده می کند process و روش قالب بندی، ارسال و رمزگذاری ایمیل های خود را بین سرورهای ایمیل مبدا و مقصد تعیین می کند.
در این مثال، ما ایمیل‌ها را در پایتون از طریق SMTP ارسال می‌کنیم، زیرا پایتون یک ماژول داخلی برای ارسال ایمیل ارائه می‌دهد. برای ارسال ایمیل، پایتون یک کتابخانه به نام ‘smtplib’ فراهم می کند تا تعامل بدون زحمت با پروتکل SMTP را تسهیل کند.
برای شروع:
‘smtplib’ را نصب کنید: مطمئن شوید که پایتون را نصب کرده اید روی سیستم شما اکنون، import ‘smtplib’ برای تنظیم اتصال با سرور ایمیل.
import smtplib
پارامتر HTML خود را تعریف کنید: پارامتر HTML خود را برای شی mail که در آن الگوی HTML خود را نگه می دارید، تعریف کنید. به مشتریان ایمیل دستور می دهد که الگو را ارائه دهند.
در اینجا کد کامل این بخش آمده است:
import smtplib
from email.mime.text import MIMEText
from jinja2 import Template
sender = "<a href='mailto:(email protected)' target='_blank' rel='noopener noreferrer'>(email protected)</a>"
recipient = "<a href='mailto:(email protected)' target='_blank' rel='noopener noreferrer'>(email protected)</a>"
subject = "Your order is confirmed!"
with open('myemailtemplate.html', 'r') as f:
template1 = Template(f.read())
html_emailtemp = """
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>HTML Email Template</title>
<style type='text/css'> # Adding the CSS
body { margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, sans-serif; }
table { border-collapse: collapse; }
.mailcontainer { width: 100%; max-width: 600px; margin: auto; background-color: #ffffff; }
.header { background-color: #1c3f60; color: #ffffff; text-align: center; padding: 20px; }
.body { padding: 20px; font-size: 16px; line-height: 1.6; background-color: #1c3f60; color: #7ed957; }
.footer { background-color: #ff6100; color: #000000; text-align: center; padding: 20px; }
.cta { background-color: #8c52ff; padding: 10px 20px; border-radius: 5px; color: #ffffff; text-decoration: none; font-weight: bold; }
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
padding: 10px !important;
}
}
</style>
</head>
<body>
<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td align='center'>
<table class='container' width='600' cellpadding='0' cellspacing='0'>
<!-- Header -->
<tr>
<td class='header'>
<h1>Your order is confirmed</h1>
</td>
</tr>
<!-- Body -->
<tr>
<td class='body'>
<p>The estimated delivery date is 22nd August 1403.</p>
<p style='font-size: 16px; color: blue;'>Styled paragraph.</p>
<table width='100%' cellpadding='0' cellspacing='0' style='border: 1px solid #1c3f60; padding: 20px;'>
<tr>
<td align='center'>
<h1 style='color: #7ed957;'>Hi, Jane!</h1>
<p style='font-size: 16px; color: #ffde59;'>
Thank you for being our valuable customer!
</p>
</td>
</tr>
</table>
<table cellpadding='0' cellspacing='0' style='margin: auto;'>
<tr>
<td align='center' style='background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;'>
<a href='https://www.mydomain.com' target='_blank' rel='noopener noreferrer' style='color: #ffffff; text-decoration: none; font-weight: bold;'>Get a 30-day free trial</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style='background-color: #ff6100; color: #000000; text-align: center; padding: 20px;'>
<p>For additional help, contact us at (email protected)</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
"""
template1 = Template(html_emailtemp)
html1 = template1.render(name="Jon Doe")
message = MIMEText(html1, 'html')
message('Subject') = subject
message('From') = sender
message('To') = recipient
with smtplib.SMTP_SSL('smtp.gmail.com', 465) as server:
server.login(username, password)
server.sendmail(sender, recipient, message.as_string())
توضیح:
sender: آدرس ایمیل فرستندهrecipient: آدرس ایمیل گیرندهfrom email.mime.text import MIMEText: به این عادت شده است import کلاس MIMEText، به شما امکان می دهد الگوی HTML خود را در ایمیل پیوست کنید.smtplib.SMTP_SSL('smtp.gmail.com', 465) as server:: با استفاده از پورت 465 با سرور SMTP ارائه دهنده ایمیل شما (Gmail) ارتباط برقرار می کند. اگر از ارائه دهنده SMTP دیگری استفاده می کنید، از نام دامنه آنها مانند smtp.domain.com با شماره پورت مناسب استفاده کنید. اتصال با SSL ایمن شده است.server.login(username, password): این عملکرد به شما امکان می دهد با استفاده از نام کاربری و رمز عبور خود وارد سرور ایمیل شوید.server.sendemail(sender, recipient, message.as_string()): این دستور ایمیل HTML را ارسال می کند.
تست کردن
قبل از ارسال ایمیل HTML خود، آن را آزمایش کنید تا متوجه شوید که کلاینت های ایمیل مختلف چگونه CSS و HTML را ارائه می دهند. ابزارهای تست مانند ایمیل روی اسید، تورنسل و غیره می توانند به شما کمک کنند.
نتیجه گیری
برای ساخت قالب های ایمیل سفارشی با HTML و CSS در پایتون، دستورالعمل های بالا را دنبال کنید. ابتدا ساختار قالب ایمیل HTML خود را شروع کنید، به ایمیل ها با CSS سبک دهید و سپس آنها را برای گیرندگان خود ارسال کنید. همیشه سازگاری قالب ایمیل خود را با کلاینت های ایمیل مختلف بررسی کنید و مطمئن شوید که HTML خود را با استفاده از جداول ساده نگه دارید. افزودن یک پیوند ایمیل در HTML همچنین به شما این امکان را می دهد که یک ایمیل به طور خودکار در سرویس گیرنده ایمیل خود بنویسید و آن را به یک آدرس ایمیل خاص ارسال کنید.
منتشر شده در 1403-08-21 22:14:07
