ساخت ایمیل responsive با MJML
یکی از نیازهای مهم اکثر وبسایت ها ، ارسال ایمیل های روزانه به کاربران است. این ایمیل ها ممکن است با هدف های متفاوتی ارسال بشود؛ مثلا برای تایید ایمیل یا ارسال خبرنامه و غیره. احتمالا پیش آمده که ایمیلی دریافت کرده باشید که ظاهری زیبا با عکس های متنوع دارد و قالب بندی آن مانند صفحات HTML باشد.
حال ما در این مقاله قصد داریم ساخت ایمیل responsive با MJML را معرفی کنیم که پیچیدگی کدنویسی در ایمیل های responsive را بکاهد و سرعت کار ما را افزایش دهد. MJML یک framework متن باز است که فایل های پروژه آن در صفحه GitHub آن موجود می باشد.
ایده پشت این فریم ورک ساده است. دقیقا مانند jQuery که با نرمال سازی DOM و خلاصه کردن فعل و انفعالات و انیمیشن های سطح پایین صفحه ، MJML هم با خلاصه کردن کدهای HTML به ما در کدنویسی کمتر و مفیدتر کمک می کند. یادگیری MJML بسیار آسان است. یکی از قابلیت های خوب MJML استفاده از Carousel می باشد که می توان با آن عکس ها را با آن به صورت لیست نشان دهیم.
MJML با React.js ساخته شده که یک کتابخانه JavaScript است که توسط Facebook طراحی شده است. component های MJML با -mj شروع می شود مانند mj-text ، mj-image ، mj-button و غیره که نشان می دهد کار کردن با آن آسان و نزدیک به زبان خودمان است. در واقع کدهایی که ما در MJML می نویسیم به HTML در دو نسخه موبایل و hybrid تبدیل می شود که باعث می شود در تمام دستگاهها بدون بهم ریختگی نمایش داده شود.
شروع ساخت ایمیل responsive با MJML
نصب و راه اندازی MJML
برای نوشتن MJML می توانید از ویرایشگر آنلاین استفاده کنید که در کنار آن خروجی آن را هم بتوانید ببینید. این ویرایشگر آنلاین از این لینک قابل دسترسی است.اگر نمی خواهید از ادیتور آنلاین استفاده کنید می توانید از ادیتورهای آفلاین که بروی کامپیوتر خود دارید استفاده کنید ، اما باید Node.js را به صورت local نصب داشته باشید ( برای نصب Node.js می توانید از این لینک کمک بگیرید).
با اجرای کد زیر پکیج MJML نصب خواهد شد :
npm install mjml -g
(اگر کار با npm را بلد نیستید به این لینک مراجعه کنید )
بعد از نصب MJML فایلی با پسوند mjml. درست کنید و کدهای خود را در آن وارد کنید.
گفتیم که کدهای نوشته شده در MJML به HTML تبدیل می شود پس با اجرای کد زیر یک فایل با پسوند html خواهیم داشت :
mjml -r example.mjml
( فرض کنید اسم فایل خود را example در نظر گرفتیم ) که بعد از اجرای کد بالا فایلی به نام example.html خواهیم داشت.
کدزنی با MJML
طرح اولیه یا به اصطلاح basic layout در MJML به صورت زیر می باشد :
<mjml> <mj-head> <!-- Head components go here --> </mj-head> <!-- All of the content of our email will go in mj-body --> <mj-body> <!-- mj-container defines the default styling of our email, including the default width, set to 600px but overwritable --> <mj-container> <!-- Body components go here --> </mj-container> </mj-body> </mjml>
برای استایلینگ می توان از attribute های مختلف مثل font-size ، font-family ، color ، background-color و غیره استفاده کرد. شما می توانید style های خود را به صورت inline و کلاس بندی به کار ببرید که البته کلاس ها به صورت اتوماتیک inline می شوند.
تکه کد زیر یک نمونه از استایلینگ به صورت inline است :
<mj-text font-size="20px" color="#F45E43" font-family="helvetica"> Be your hero by ZeroToHero </mj-text>
یک سری تگ های کاربردی در MJML
</ mj-all> که برای اعمال همگانی استفاده می شود که بعدا می توان روی آن override کرد.
< mj-all padding="0" />
</ mj-text> برای اعمال به تگ های text استفاده می شود.
< mj-text font-family="sans-serif" color="#8e8b85" />
</ mj-class> برای تعریف کلاس استفاده می شود (کلاس های از پیش تعریف شده مانند pill که یک کلاس شبیه button درست میکند ، desc که توضیحات را بهینه سازی می کند و ico که به قرارگیری آیکون کمک می کند )
<mj-class name="pill" font-weight="700" color="#d5ad4b" border-radius="50" border="2px solid #d5ad4b" font-size="16px" line-height="16px" padding="8 20 20 20" inner-padding="10 75 10 75" background-color="transparent" /> <mj-class name="desc" font-family="Georgia" font-size="20px" color="#45495d" padding="25 5 10 10" /> <mj-class name="ico" font-family="Helvetica" font-size="14px" align="center" padding="0 0"/>
اضافه کردن متن
قالب MJML بر پایه سطرها که با تگ <mj-section> و ستون ها که با تگ <mj-column> مشخص میشود ، می باشد. توجه داشته باشید که به جز در استفاده از component های سطح بالا مثل <mj-hero> و <mj-navbar> از همان سطر ها و ستون ها استفاده شود.
<mj-section padding="0" background-color="#eeebe7"> <mj-column> <mj-text padding="0 2" align="center" font-size="10px"> Welcome to ZeroToHero </mj-text> </mj-column> </mj-section>
یک نکته جالب اینکه در تگ <mj-text> می توانید به صورت مستقیم از کدهای HTML استفاده کنید.
اضافه کردن عکس
برای اضافه کردن عکس های خود می توانید از تگ <mj-image> استفاده کنید که باید با attribute به نام src مسیر عکس را مشخص کنید.
<mj-image align="right" padding="40 0 0 0" width="100" src="zerotohero.jpg" alt="blog" title="blog" />
به صورت پیش فرض در نسخهی موبایل ستون ها روی هم به صورت پشته قرار میگیرند ولی اگر بخواهید که در کنار هم باشند از تگ <mj-group> استفاده کنید.
اضافه کردن دکمه
برای ایجاد دکمه (button) می توانید از تگ <mj-button> استفاده کنید که attribute به نام href دارد که لینکی که قرار است ارجاع داده شوید در آن قرار می گیرد.
<mj-button mj-class="pill" href="https://zerotohero.ir/"> ZeroToHero </mj-button>
یک نکته دیگر این که شما می توانید با استفاده از تگ <mj-style> مانند تکه کد زیر کدهای CSS خود را وارد کنید.
<mj-style> a { text-decoration:none; } .desc { color: #45495d; } </mj-style>
شما می توانید با استفاده از تگ <mj-divider> یک حایل بین دو قسمت از ایمیل خود بوجود آورید. مثلا کد زیر فاصله ای ۵px از ۴ طرف بوجود می آورد.
<mj-divider border-width="5px"/>
در این مقاله سعی شده که به قسمت های مهم استفاده از MJML اشاره شود. اگر علاقه مند به یادگیری بیشتر در مورد MJML هستید می توانید لینک documentation آن را مطالعه کنید.
مطالب زیر را حتما مطالعه کنید
5 ترفند css3 با عناصر کاذب before:: و after::
آشنایی با Protobuf
7 ویژگی Sass به همراه کد
شروع کار با Sass
آشنایی با برنامه نویسی Back-End
همه چیز درباره HTTP 2
2 Comments
Join the discussion and tell us your opinion.
دیدگاهتان را بنویسید لغو پاسخ
برای نوشتن دیدگاه باید وارد بشوید.
سلام
ضمن تشکر
قابلیت اضافه کردن ویدئو هم هست؟
با سلام
به صورت پیش فرض قابلیت آن وجود ندارد ولی می توانید با تگ mj-raw پیاده سازی بکنید(توصیه نمی شود)