تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۰ آبان ۱۳۹۵

mjml

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

در جلسات گذشته دو قالب ساده رو با همدیگه کار کردیم و یاد گرفتیم. دیدید که هر قالب از اجزای مختلفی نظیر تصویر، متن، دکمه و ... تشکیل شده. به هر کدوم از این موارد یک جزء یا Component میگن. این اجزاء یکبار بدست تیم mjml ساخته شدن و در اختیار شما قرار گرفتن و به راحتی میتونین از اونا استفاده کنید و دیگه لازم نیس هر بار مثلا برای قرار دادن یک دکمه همه مراحل رو از اول پیش برید. مثلا اگر المنت mj-button رو در نظر بگیرید، در زبان mjml بصورت زیر هست:

<!-- MJML -->
<mj-button href="#">
    Hello There!
</mj-button>

ولی همین جزء یا Component ساده که برای ما دکمه رو میسازه، وقتی به HTML تبدیل میشه، کدهای پیچیده‌تر زیر رو بوجود میاره:

<!-- HTML -->
<table cellpadding="0" cellspacing="0" style="border:none;border-radius:3px;" align="center">
    <tbody>
        <tr>
            <td style="background-color:#414141;border-radius:3px;color:#ffffff;cursor:auto;" align="center" valign="middle" bgcolor="#414141">
                <a class="mj-content" href="#" style="display:inline-block;text-decoration:none;background-color:#414141;border:1px solid #414141;border-radius:3px;color:#ffffff;font-size:13px;font-weight:bold;padding:15px 30px;" target="_blank">
                    Hello There!
                </a>
            </td>
        </tr>
    </tbody>
</table>

میبینید که ابزار mjml همه کارای سخت رو برای ما انجام میده و ما بسادگی یک المنت mj-button رو قرار میدیم. اون اجزائی که توسط خود تیم mjml ساخته و قرار داده شده رو Standard Component میگن و اون اجزائی که توسط خود ما یا دیگران ساخته میشن دیگه جزء Standard Component نیستن. پس mjml این قابلیت رو به هر کسی داده که با توجه به نیاز خودش، بیاد و یک جزء رو طراحی کنه و هر بار که به اون نیاز داشت، ازش استفاده کنه.

خود Standard Components به دو جزء تقسیم بندی میشه:

  1. Standard Head Components
  2. Standard Body Components

Standard Head components

اجزائی که در این دسته قرار میگیرن، روند و فرآیند کلی کار رو ساده‌تر میکنن، استایلهای پیشفرضی رو اعمال میکنن و فونتی رو لود و وارد میکنن. در این بخش اجزای زیر قرار میگیره:

  • mjml-attributes
  • mjml-font
  • mjml-title

Standard Body components

اجزائی که در این قسمت قرار میگیرن باعث میشن که روند ساخت یک قالب با استفاده از امکانات پیش ساخته، بسیار سریع باشه و دیگه لازم نیست که برای هر کدام بصورت جداگانه استایل دهی کنیم. در این بخش اجزای زیر قرار میگیره:

  • mjml-button
  • mjml-column
  • mjml-group
  • mjml-container
  • mjml-divider
  • mjml-hero
  • mjml-html
  • mjml-image
  • mjml-invoice
  • mjml-list
  • mjml-location
  • mjml-navbar
  • mjml-raw
  • mjml-section
  • mjml-social
  • mjml-spacer
  • mjml-table
  • mjml-text

با استفاده از این اجزاء میتونیم تقریبا هر قالبی که نیاز داشته باشیم رو بسازیم. این امکان نیز وجود داره که خودمون جزء جدیدی رو اضافه کنیم. در جلسات بعدی در مورد هر کدام از موارد بالا بصورت کامل توضیح خواهیم داد.

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

موفق باشید

یا علی

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

جلسات دوره

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

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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