پلاگین Emmet چیست؟ طراحی سایت در مشهد نرم افزار نویسی HTML و CSS یکیاز شایع ترین طریق های جان دار برای گسترش دهندگان فرانت اند (Front-End Developers) بهحساب میآید. در صورتیکه در قسمت فرانت اند وب سایت کار میکنید پس اکثر اوقات مجال خویش را با html و css سپری کرده کهاین دستور به جهت تکراری بودن کد ها امری خسته کننده به حساب آورده می شود. لهجه HTML بسیار راحت میباشد. البته به جهت تکراری بودن کدها، کدنویسی در آن مشابه تکرار مکررات و اضافه کاری میباشد.
می اقتدار اظهارکرد شما از یک اپ نویس تبدیل به یک تایپیست میشوید که تنها در اکنون تایپ کلمه ها میباشد و وقت خویش را هدر میدهد. خوشبختانه پلاگین Emmet عمل شمارا بسیار سهل وآسان نموده است. برای سرعت بخشیدن به پروسه اپ نویسی میتوانید از پلاگین Emmet به کار گیری فرمائید.
افزونه Emmet یکیاز پلاگین های سرعت نصیب در کدنویسی است که برای نخستین دفعه در سال ۲۰۰۸ بسط یافت. در واقع پلاگین Emmet یک ابزار برای توسعه و گسترش دهندگان اینترنت میباشد که می تواند سرعت تایپ کردن کدهای HTML و CSS را تا حد بسیار متعددی ارتقا دهد. این ابزار بصورت یک افزونه در ویرایشگرهای کد گوناگون نصب می خواهد شد. این پلاگین به برنامه نویس ها این قابلیت را میدهد تا کامپوننت های HTML را همچون Selectorها و استایل های CSS بنویسند، ضمن این برنامه نویس ها برای ویرایش و هدایت کدها به گروه ای از میانبرها (Shortcuts) دسترسی خواهند داشت.
افزونه Emmet در اکثر ویرایشگرهای کد نظیر VSCode وجود دارااست. براین اساس معمولاً نیازی به نصب خویش نرمافزار نخواهید داشت و میتوانید به راحتی فعالیت کدنویسی را با به کار گیری از آنان استارت نمایید. ولی در صورتیکه کد ادیتور آیتم به کار گیری شما به طور پیش فرض دارنده Emmet نباشد بایستی پوشه اساسی و آموزشی آن را از تارنما قانونی Emmet.io دانلود و بر روی سیستم کامپیوتری خویش نصب نمایید. در پی طریق عمل با امت را با یکدیگر مرور خواهیم کرد.
روند نصب ابزار پلاگین Emmet
برای آغاز شغل با این ابزار، آغاز می بایست به سایت قانونی پلاگین Emmet بروید و از بخش دانلود، راهنمای نصب اِمِت برای کد ادیتور های مختلف را ببینید. در نصیب سپس شیوه نصب این ابزار در ادیتور دوست داستنی SublimeText را فراگیری می دهیم.
اولیه بایستی package manager آن را بر روی Sublime نصب نمایید. برای این فعالیت بدین پیوند بروید و کد مرتبط با نسخه Sublime نصب گردیده بر روی سیستم خویش را از این نشانی نسخه برداری فرمائید.
آنگاه به editor برگردید و کلید های ترکیبی ` + Ctrl را فشار دهید یا این که به بخش View>Show console بروید. یک فیلد در زیر برای شما گشوده میگردد. کدی که نسخه برداری کردید را آنجا paste فرمایید و enter فرمائید تا نصب صورت بپذیرد.
حال Sublime را restart فرمائید. به بخش Preferences > package Control بروید و Install package را گزینش فرمائید. پلاگین Emmet را کاوش نمایید و این ابزار را نصب نمایید. پس از نصب یک پیام توفیق به شما نمایش داده می شود. (ممکن میباشد مجدد موردنیاز باشد نرم افزار را restart فرمایید تا تغییرات اجرا گردد.)
هم اکنون برای به کار گیری از این ابزار پوشه Html ای را که میخواهید، گشوده نمایید. برای تایپ کردن تگ های html کافی میباشد نام آن تگ را بنویسید و سپس با فشار دادن Tab، تگ گشوده و بسته نوشته می گردد. (مثل تگ a و تگ img و h2 و h3 و h4 و p و nav)
ساخت ساختار مبنا ای HTML
برای اینکه ساختار اساس ای HTML را در یک گواهی متنی به طور سریع تولید فرمائید کافی میباشد یک آرم تعجب را وارد کنید. به تصویر پایین توجه نمائید:
ساخت کامپوننت های HTML
فکر کنید که قصد ساخت و ساز یک کامپوننت برای خلاصه یک مقاله را دارید. برای اعمال این عمل به یک تگ article و در باطن آن به یک تگ img و تگ های متنی نیاز دارید. برای پیاده سازی این موقعیت می توانید به صورت پایین از اختصارات پلاگین Emmet به کار گیری فرمایید:
article>img+h3+h4
پس از وارد کردن Enter خروجی پایین برای شما به اکران نهاده می خواهد شد:
""
در بخش اختصارات پلاگین Emmet که در بخش های آتی به صورت کامل توضیح میدهیم، خواسته از نشانه < این میباشد که تگ آتی در درون تگ قبل قرار گیرد. همینطور نماد عده بدین معناست کهاین مجموعه از تگ ها با همدیگر در باطن تگ article قرار گیرند. در صورتیکه بخواهید یک سری عبارت مختصر را با همدیگر وارد نمائید می توانید برای جداسازی آنان از نماد ^ استعمال فرمائید.
ایجاد کرد کامپوننت با خواص Attributes
ساختار کامپوننت مهیا میباشد البته فاقد هرگونه محتوا و Attribute خواهد بود. برای تشکیل داد Attribute بایستی از Selector بهره برد:
نماد #)) برای ids
آرم (.) برای کلاس ها
{} برای وارد کردن متن
عبارت [attr=”value”] برای هریک از Attributeها
برای اضافه کردن موردها بالا به کامپوننت، می بایست یک اختصار همچون نمونه ذیل تولید فرمایید:
article.news>img.news-img+h3.news-title{title text}+h4.news-resume{resume text}
که در غایت HTML ذیل تحت عنوان خروجی به وجود خواهد آمد:
"”
title text
resume text
ساخت و ساز Loerm Ipsum
برای آنکه بتوانید متن لورم ایپسوم را به صورتی سریع خیس به کدها اضافه نمایید، می توانید از امر lorem در پلاگین Emmet سود بگیرید. ولی به طور پیش فرض این امر تعداد کلمه ها بسیار متعددی را ساختوساز مینماید ولی درصورتی که یکی را آن گاه قرار دهید می توانید تعداد لغت ها را نیز در اختیار گرفتن فرمایید:
article.news>img.news-img+h3.news-title{title text}+h4.news-resume>lorem8
خروجی امر بالا به طور ذیل خواهد بود:
""
title text
Lorem ipsum dolor sit amet consectetur adipisicing elit.
تکرار محتوا
درحال حاضر که یک کامپوننت بسیار کاربردی را ساخت کردید بیایید یک لیست از آن ها را در وب سایت قرار دهید. برای اینکار می توانید به طور دستی یکسری توشه کدهای کامپوننت را تکرار نمایید. ولی راهکاری معمولی خیس به کار گیری از عملگر تکرار * در پلاگین Emmet میباشد. همینطور با استعمال از متغیر $ می توانید تعداد تکرارها را بدست بیاورید و از آن در خویش کدها نیز استعمال نمائید:
.news-list>(article.news>img.news-img+h3.news-title{title $}+h4.news-resume>lorem8)*3
خروجی کدهای بالا به طور پایین خواهد بود:
//Repetição 1
""
title 1
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
//Repetição 2
""
title 2
Accusantium quas, odio inventore pariatur.
//Repetição 3
""
title 3
Repudiandae qui totam minus, quam eum et rem.
اختصار CSS
افزونه Emmet همینطور به کدنویسی CSS امداد می نماید به طوری که قابلیت تایپ استایل با اختصار را در مشت اپ نویس قرار میدهد. هزاران اختصار در پلاگین Emmet وجود داراست که میتوانید آنهارا در برگه پلاگین Emmet code sheet ببینید. با یه خرده کاوش درین برگه به قسمت CSS خواهد رسید و در آنجا با یکسری ردیف روبرو خواهید شد که دربرگیرنده اختصار (سمت راست شیت) و نتیجه ها متبوع (سمت چپ کاغذ) میباشد.

رابطه با بقیه طرزهای دیجیتال مارکتینگ