• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 4) - تبدیل کدهای mjml به html

2 228 ۲۶ مهر ۹۵

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.

mjml

در جلسه گذشته در مورد ساختار کلی mjml و تگهایی که در اون استفاده میشه صحبت کردیم. در این جلسه میخایم یاد بگیریم چطوری کدهای mjml که درون فایلهای mjml هستن رو کامپایل و اونا رو بصورت html در بیاریم. برای اینکار ما باید از cmd استفاده کنیم. علاوه بر کامپایل کردن ما ویژگی های دیگه ای رو هم در CLI یا Command Line Interface بررسی میکنیم که با استفاده از اونا میتونیم روند کدنویسی رو سریعتر کنیم. فرض کنیم ما یک فایل با نام index.mjml رو داشته باشیم و کدهای زیر برای نمونه در اون وجود داشته باشن:

حالا شما نمیخاد نگران کدهای بالا باشید، چون ما هنوز آموزشی در مورد اونا ندادیم. در اینجا قصد داریم این کدها رو با استفاده از Command Prompt به قالب ایمیل با کدهای HTML تبدیل کنیم. من فایل index.mjml رو درون Desktop قرار دادم. CMD رو به Desktop میارم و عبارت mjml index.mjml رو درون اون قرار میدم و اینتر میزنم. بصورت زیر:mjml cli

حالا اگر Desktop رو ببینید، متوجه میشید که یک فایل جدید بنام index.html ساخته شده و کدهای زیر درونش قرار گرفته:

میبینید که کدهای HTML زیاد و پیچیده ای قرار گرفتن. حالا اگر اون رو در مرورگر باز کنید بصورت زیر خواهد بود:mjml cli 2

حالا اگر از این کدها بعنوان قالب ایمیلتون استفاده کنید و اون رو به همه سرویسهای ایمیلی مختلف نظیر Gmail و Hotmail و Yahoo و ... بفرستید، بهمین صورت نمایش داده خواهند شد. حالا اگر بخواید واکنشگرا یا Responsive بودن اون رو هم تست کنیم، مرورگر رو تغییر سایز میدیم تا ببینیم چجوری میشه:mjml cli 3

میبینید که حالت Responsive اون بخوبی نمایش داده شده. همونطور که دیدید درون cmd ما اسم فایل هدف رو مشخص نکردیم و بصورت اتوماتیک، یک فایل همنام با فرمت html ساخته میشه و کدهای html درون اون قرار داده میشه. حالا شما میتونین با استفاده از --output یا -o اسم فایل مقصد رو مشخص کنید. برای اینکار بصورت زیر عمل میکنیم:mjml cli 4

میبینید که بعد از -o نام فایل مقصدمون رو قرار دادیم. اگر این فایل از قبل وجود داشته باشه که کدها درونش قرار میگیره، اگر هم چنین فایلی وجود نداشته باشه، ابتدا ساخته میشه و بعد کدها درون اون قرار میگیرن. حالا اگر Desktop رو نگاه کنید، فایل email-template.html درون اون قرار داره و اگر اون رو درون مرورگر باز کنید، باز هم خروجی یکسانی رو میبینید.

اگر دقت کرده باشید، تا اینجا هر بار که کدمون رو تغییر بدیم، باید یکبار اون رو کامپایل کرده و خروجی بگیریم و اگر قرار باشه برای هر تغییر اینکارو انجام بدیم، خیلی جالب نیست. شما میتونین به سادگی از --watch یا -w استفاده کنید تا این ابزار همیشه فایل مورد نظر شما رو تحت نظر بگیره و به محض اینکه تغییری در اون ایجاد شد، خروجی گرفته میشه و شما میتونین از اون استفاده کنید.mjml cli 5

میبینید که در حالت Watch وارد شده و حالا اگر در فایل mjml تغییری ایجاد کنید و فایل html خروجی رو در مرورگر باز کنید، میبینید که هر تغییر فورا اعمال میشه و نیازی نیست که هر بار دستور رو مجددا اجرا کنید. در جلسات بعد بیشتر با تگهای mjml آشنا میشیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    mostafash(۲۷ مهر ۱۳۹۵)

    خیلی جالب بود

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram