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

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم. همونطور که اطلاع دارید در جلسه گذشته در مورد نصب mjml بر روی سیستم صحبت کردیم و همچنین Syntax highlighting این زبان رو بر روی دو ادیتور Sublime text و Atom درست کردیم. در این جلسه توضیحاتی کلی در مورد ساختار و تگهای mjml در اختیارتون میزاریم.

همونطور که قبلا هم گفتیم، mjml یک زبان نشانه گذاری هست که با استفاده از اون میتونین به راحتی ایمیلهای واکنشگرا تهیه کنید. Syntax معناگرای اون باعث شده که کار با اون خیلی ساده و سر راست باشه و همچنین با استفاده از اجزای آماده از قبل تعریف شده، کار شما رو خیلی سرعت میبخشه. وقتی شما از mjml استفاده میکنید، مطمئن باشید که همه استانداردهای لازم برای طراحی قالب ایمیل در اون رعایت شده و از این بابت خیالتون راحت باشه. این ابزار نتیجه سالها تجربه افراد تیم mailjet هست و با دونستن تمام استانداردهای مورد نیاز برای ساخت قالب ایمیل، کار دیگر طراحان رو راحته راحت کردن. اینجا زمان اونه که با ساختار table‌های تودرتو خداحافظی کنید. ساختن ایمیل واکنشگرا با استفاده از تگهای <mj-section> و <mj-column> خیلی راحت و آسونه. این ابزار ذاتا واکنشگرا هست و خیالتون از این بابت هم باید راحت باشه. همونطور که میدونین هر کدوم از سرویهای ایمیل با مرور زمان قوانین خودشون رو تغییر میدن. شما نباید نگران این موارد باشید، چونکه تیم mjml هر لحظه این تغییرات رو رصد میکنن و تغییرات رو بر روی ابزارشون اعمال میکنن و شما همیشه از بروزترین استانداردها استفاده میکنید.

یک سند mjml با یک تگ <mjml> شروع میشه و در آخر فایل هم بسته میشه. این تگ میتونه فقط و فقط دارای دو تگ <mj-head> و <mj-body> باشه. این دو تگ به ترتیب، نقش همون head و body درون اسناد HTML رو بازی میکنن. mj-head شامل هر چیزی که مربوط به سند میشه، از جمله استایلها و meta المنتها هست.

mj-body شامل هر چیزی که محتوای ایمیلتون رو تشکیل میده هست. توجه داشته باشید که این قسمت فقط میتونه شامل یک فرزند ریشه بنام mj-continer باشه و بقیه محتوا درون اون قرار میگیرن. پس تا اینجا، قالب یک فایل mjml بصورت زیر میشه:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <!-- محتوای مورد نظر در اینجا قرار میگیره -->
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

همونطور که میبینید در اینجا از mj-head استفاده نکردیم و فقط mj-body رو قرار دادیم. شما با استفاده از mj-section میتونین یک ردیف رو بوجود بیارید که درون هر ردیف میتونین با استفاده از تگ mj-column تعدادی ستون رو بوجود بیارید و محتوای مورد نظرتون رو درون اونا قرار بدین. همونطور که قبلا گفتم، فرمت فایلهاتون رو باید mjml قرار بدین. همچنین شما میتونین در اینجا همانند بقیه زبانها، برای سادگی و بهتر مدیریت شدن کدهاتون، کدهای هر بخش رو در فایل جداگانه ای قرار بدین و همه اونا رو درون فایل اصلی include کنید. فرض کنید یک فایل بنام header.mjml داریم که میخایم کدهای مربوط به header رو درون اون قرار بدیم، بصورت زیر:

<!-- header.mjml -->
<mj-section>
  <mj-column>
    <mj-text>This is a header</mj-text>
  </mj-column>
</mj-section>

حالا اگر بخایم header.mjml رو درون main.mjml وارد کنیم، از تگ mj-include استفاده میکنیم. این تگ یک ویژگی بنام path داره که با استفاده از اون مسیر فایلی که میخایم اون رو وارد کنیم، مشخص میکنیم. بصورت زیر:

<!-- main.mjml -->
<mjml>
  <mj-body>
    <mj-container>
      <mj-include path="./header.mjml" />
    </mj-container>
  </mj-body>
</mjml>

همچنین میتونیم برای سادگی کار mjml آخر فایل رو قرار ندیم و اون رو ساده‌تر کنیم. بصورت زیر:

<!-- main.mjml -->
<mjml>
  <mj-body>
    <mj-container>
      <mj-include path="./header" />
    </mj-container>
  </mj-body>
</mjml>

همونطور که میدونید در مسیر دهی . به معنای پوشه فعلی هست و .. به معنای پوشه قبلی و بالایی. در جلسه بعد نحوه کامپایل کردن کدهای mjml به html رو به شما آموزش میدیم.

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

موفق باشید

یا علی

نویسنده

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

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