تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 9 دقیقه
۲۶ مهر ۱۳۹۵

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

mjml

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

<mjml>
  <mj-body>
    <mj-container background-color="#29A7B8">
      <mj-section full-width="full-width">
        <mj-column>
          <mj-text color="#EEE" text-decoration="underline" font-family="helvetica" font-size="30px">Underwater</mj-text>
        </mj-column>
      </mj-section>

      <mj-section>
        <mj-column>
          <mj-text color="#EEE" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet ipsum consequat, viverra libero in, vulputate nulla. Vivamus sit amet sapien non metus viverra ornare ut rutrum ligula. Etiam a odio ac ex pharetra gravida. Aenean sodales
            purus quis malesuada suscipit. Aenean ac euismod ligula, ac scelerisque nulla. Fusce lacinia libero sed velit sagittis, hendrerit posuere nisl blandit. Quisque mauris justo, mollis id malesuada a, euismod non neque. Sed finibus, leo nec rhoncus
            ultrices, odio metus imperdiet magna, id pulvinar ex ex ullamcorper ipsum.</mj-text>
        </mj-column>
        <mj-column>
          <mj-text color="#EEE" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet ipsum consequat, viverra libero in, vulputate nulla. Vivamus sit amet sapien non metus viverra ornare ut rutrum ligula. Etiam a odio ac ex pharetra gravida. Aenean sodales
            purus quis malesuada suscipit. Aenean ac euismod ligula, ac scelerisque nulla. Fusce lacinia libero sed velit sagittis, hendrerit posuere nisl blandit. Quisque mauris justo, mollis id malesuada a, euismod non neque. Sed finibus, leo nec rhoncus
            ultrices, odio metus imperdiet magna, id pulvinar ex ex ullamcorper ipsum</mj-text>
        </mj-column>
      </mj-section>

      <mj-section>
        <mj-column>
          <mj-button background-color="#0C8094">Discover now</mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

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

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

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
  #outlook a { padding: 0; }
  .ReadMsgBody { width: 100%; }
  .ExternalClass { width: 100%; }
  .ExternalClass * { line-height:100%; }
  body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
  p { display: block; margin: 13px 0; }
</style>
<!--[if !mso]><!-->
<style type="text/css">
  @media only screen and (max-width:480px) {
    @-ms-viewport { width:320px; }
    @viewport { width:320px; }
  }
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

<!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
    <style type="text/css">

        @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

    </style>
  <!--<![endif]--><style type="text/css">
  @media only screen and (min-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
  }
</style>
</head>
<body style="background: #29A7B8;">
  <div style="background-color:#29A7B8;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0"><tbody><tr><td><div style="margin:0 auto;max-width:600px;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:#EEE;font-family:helvetica;font-size:30px;line-height:22px;text-decoration:underline;">Underwater</div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div></td></tr></tbody></table><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:300px;">
      <![endif]--><div aria-labelledby="mj-column-per-50" class="mj-column-per-50" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:#EEE;font-family:helvetica;font-size:13px;line-height:22px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet ipsum consequat, viverra libero in, vulputate nulla. Vivamus sit amet sapien non metus viverra ornare ut rutrum ligula. Etiam a odio ac ex pharetra gravida. Aenean sodales
            purus quis malesuada suscipit. Aenean ac euismod ligula, ac scelerisque nulla. Fusce lacinia libero sed velit sagittis, hendrerit posuere nisl blandit. Quisque mauris justo, mollis id malesuada a, euismod non neque. Sed finibus, leo nec rhoncus
            ultrices, odio metus imperdiet magna, id pulvinar ex ex ullamcorper ipsum.</div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td><td style="vertical-align:top;width:300px;">
      <![endif]--><div aria-labelledby="mj-column-per-50" class="mj-column-per-50" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:#EEE;font-family:helvetica;font-size:13px;line-height:22px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet ipsum consequat, viverra libero in, vulputate nulla. Vivamus sit amet sapien non metus viverra ornare ut rutrum ligula. Etiam a odio ac ex pharetra gravida. Aenean sodales
            purus quis malesuada suscipit. Aenean ac euismod ligula, ac scelerisque nulla. Fusce lacinia libero sed velit sagittis, hendrerit posuere nisl blandit. Quisque mauris justo, mollis id malesuada a, euismod non neque. Sed finibus, leo nec rhoncus
            ultrices, odio metus imperdiet magna, id pulvinar ex ex ullamcorper ipsum</div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0"><tbody><tr><td style="border-radius:3px;color:#ffffff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#0C8094"><p style="display:inline-block;text-decoration:none;background:#0C8094;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;margin:0px;">Discover now</p></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></div>
</body>
</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 آشنا میشیم.

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

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

mostafash

خیلی جالب بود

محمد اسفندیاری

موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.