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

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

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

تگ mjml-attributes

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

<mjml>
	<mj-head>
		
	</mj-head>

	<mj-body>
		<mj-container>
			<mj-section>
				<mj-column>
					<mj-text>
						Hello World!
					</mj-text>
				</mj-column>
			</mj-section>
		</mj-container>
	</mj-body>
</mjml>

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

<mjml>
	<mj-head>
		<mj-attributes>
			
		</mj-attributes>
	</mj-head>

	<mj-body>
		<mj-container>
			<mj-section>
				<mj-column>
					<mj-text>
						Hello World!
					</mj-text>
				</mj-column>
			</mj-section>
		</mj-container>
	</mj-body>
</mjml>

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

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

<mjml>
	<mj-head>
		<mj-attributes>
			<mj-text padding="0" />
		</mj-attributes>
	</mj-head>

	<mj-body>
		<mj-container>
			<mj-section>
				<mj-column>
					<mj-text>
						Hello World!
					</mj-text>
				</mj-column>
			</mj-section>
		</mj-container>
	</mj-body>
</mjml>

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

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

<mjml>
	<mj-head>
		<mj-attributes>
			<mj-text padding="0" />
			<mj-class name="blue" color="#00f" />
		</mj-attributes>
	</mj-head>

	<mj-body>
		<mj-container>
			<mj-section>
				<mj-column>
					<mj-text>
						Hello World!
					</mj-text>
				</mj-column>
			</mj-section>
		</mj-container>
	</mj-body>
</mjml>

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

<mjml>
	<mj-head>
		<mj-attributes>
			<mj-text padding="0" />
			<mj-class name="blue" color="#00f" />
		</mj-attributes>
	</mj-head>

	<mj-body>
		<mj-container>
			<mj-section>
				<mj-column>
					<mj-text mj-class="blue">
						Hello World!
					</mj-text>
				</mj-column>
			</mj-section>
		</mj-container>
	</mj-body>
</mjml>

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

<mj-class name="big" font-size="20px" />

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

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

<mjml>
	<mj-head>
		<mj-attributes>
			<mj-text padding="0" />
			<mj-class name="blue" color="#00f" />
			<mj-class name="big" font-size="20px" />
			<mj-all font-family="Arial" />
		</mj-attributes>
	</mj-head>

	<mj-body>
		<mj-container>
			<mj-section>
				<mj-column>
					<mj-text mj-class="blue">
						Hello World!
					</mj-text>
				</mj-column>
			</mj-section>
		</mj-container>
	</mj-body>
</mjml>

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

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

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

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

تگ mjml-font

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

<mjml>
	<mj-head>
		<mj-attributes>
			<mj-text padding="0" />
			<mj-class name="blue" color="#00f" />
			<mj-class name="big" font-size="20px" />
			<mj-all font-family="Arial" />
		</mj-attributes>
		<mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Raleway" />
	</mj-head>

	<mj-body>
		<mj-container>
			<mj-section>
				<mj-column>
					<mj-text mj-class="blue" font-family="Raleway">
						Hello World!
					</mj-text>
				</mj-column>
			</mj-section>
		</mj-container>
	</mj-body>
</mjml>

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

تگ mjml-title

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

<mjml>
	<mj-head>
		<mj-title>Hello MJML</mj-title>
		<mj-attributes>
			<mj-text padding="0" />
			<mj-class name="blue" color="#00f" />
			<mj-class name="big" font-size="20px" />
			<mj-all font-family="Arial" />
		</mj-attributes>
		<mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Raleway" />
	</mj-head>

	<mj-body>
		<mj-container>
			<mj-section>
				<mj-column>
					<mj-text mj-class="blue" font-family="Raleway">
						Hello World!
					</mj-text>
				</mj-column>
			</mj-section>
		</mj-container>
	</mj-body>
</mjml>

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

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

موفق باشید

یا علی

نویسنده

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

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