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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 206 ۲۵ مهر ۹۵

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 بصورت زیر میشه:

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

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

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

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

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

موفق باشید

یا علی

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram