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

- visibility ۰ mode_comment

mjml

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

همونطور که در جلسه قبل توضیح دادیم درون mjml، اجزائ زیادی وجود داره که بعضی از اونا در Head و بقیه در Body قرار میگیرن. در این جلسه قصد داریم همه مواردی که درون تگ mj-head قرار میگیرن رو براتون توضیح بدیم.

تگ mjml-attributes

این تگ درون mj-head قرار میگیره و قابلیت اینو داره که مقادیر پیش فرض یک تگ خاص رو مشخص کنه و یا اینکه کلاسهایی رو تعریف کنه که بقیه المنتها بتونن از اون استفاده کنن. کد زیر رو در نظر بگیرید:

حالا اگر بخایم mj-attributes رو قرار بدیم، بصورت زیر میشه:

حالا شما میتونین درون این المنت سه کار رو انجام بدین.

1. شما میتونین مقداری پیش فرض برای ویژگی های المنت مورد نظرتون انتخاب کنید. مثلا در بالا اگر بخایم کاری کنیم که همه mj-text ها دارای padding برابر با 0 باشن، براحتی بصورت زیر عمل میکنیم:

میبینید که به راحتی یک تگ mj-text قرار دادیم و padding رو براش مشخص کردیم. دیگه لازم نیس که برای هرکدوم از mj-text ها بصورت جداگانه این مقدار رو مشخص کنیم و هر المنت mj-text که در صفحه وجود داشته باشه، این مقدار پیش فرض براش اعمال میشه.

2. شما میتونین کلاسهایی رو با استفاده از تگ mj-class به وجود بیارید و تعریف کنید و اونا رو به المنتهای مورد نظرتون اعمال کنید. مثلا من میخام یک کلاس با نام blue درست کنم که رنگ متن رو آبی بکنه. برای اینکار بصورت زیر عمل میکنم:

میبینید که یک تگ mj-class اضافه کردم و ویژگی name اون رو برابر با blue و color اون رو برابر با رنگ آبی قرار دادم. حالا میتونیم این کلاس رو به المنتهای دیگه اضافه کنیم و استایل مورد نظر به اونا اعمال بشه. برای اعمال این کلاس به یک المنت، باید نام کلاس رو درون ویژگی mj-class قرار بدین. مثلا اگر بخایم به تگ mj-text کلاس مورد نظر رو وارد کنیم، بصورت زیر عمل میکنیم:

حالا مثلا میتونیم با قرار دادن تگ زیر، یک کلاس دیگه بنام big رو به وجود بیاریم که سایز فونت رو بیشتر بکنه:

حالا میتونیم از این کلاس برای المنتهای دیگه استفاده کنیم.

3. شما میتونین با استفاده از تگ mj-all کاری کنید که یک ویژگی به همه تگهای موجود اعمال بشه. بصورت زیر:

میبینید که تگ mj-all رو قرار دادیم و ویژگی font-family رو برای اون Arial مشخص کردیم. با اینکار فونت همه المنتهای ما Arial خواهند شد.

همونطور که میدونید درون CSS ویژگی ها بصورت آبشاری و اولویت بندی، اعمال میشن و بعضی از اونا نسبت به دیگر موارد، اولویت بیشتری دارن. در mjml هم ترتیب اعمال ویژگی از ضعیف به قوی بصورت زیر هست:

  1. defaultMJMLDefinition : همون مقداری که خود تیم mjml برای یک المنت مشخص کردن و دست ما نیس
  2. mj-attributes : همون مواردی که در بالا بیان کردیم
  3. کلاسها
  4. ویژگی های inline که مستقیما بر روی خود المنت مقداردهی میشن

پس یعنی اون ویژگی هایی که بر روی خود المنت تعریف میشن، از بقیه اولویت بیشتری دارن و در نهایت اعمال میشن.

تگ mjml-font

با استفاده از این تگ میتونین فونتی رو وارد کرده و از اون در قالبتون استفاده کنید. برای اینکار بصورت زیر عمل میکنیم:

همونطور که دیدید درون href تگ mj-font، آدرس فونت مورد نظر رو قرار دادیم و با استفاده از ویژگی name هم نام اون رو مشخص کردیم. حالا برای تگ mj-text یک ویژگی font-family قرار دادیم و اون رو برابر با همون نامی که برای فونت مشخص کردیم، قرار دادیم. بهمین راحتی.

تگ mjml-title

با استفاده از این تگ میتونین برای سند MJML خودتون یک عنوان قرار بدین. بصورت زیر:

میبینید که متن Hello MJML رو برای عنوان این سند قرار دادیم.

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

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