کی بازار- آیا این امکان وجود دارد که بتوان تمام کدهای HTML یک سایت را چند دقیقه که چه عرض کنیم ظرف چند ثانیه ساخت؟ بله Emmet قابلیت انجام این کار را به شما می‌دهد! این رویکرد جدید باعث شده کد در HTML، XML و سایر فرمت‌های کد ساخت‌یافته[1] سریعتر توسعه داده شود. Emmet پلاگینی است مخصوص بسیاری از ادیتورهای محبوب متن. با Emmet شما اسکلت صفحه خود را در سینتکسی منطقی اما بسیار فشرده می‌سازید و بعد می‌گذارید در قالب کد HTML کامل و مناسب بسط داده شود. نتیجه‌اش جادویی است: خطی از متن به صدها خط سینتکس بسط داده شده و بعد ظرف چند دقیقه صفحه‌ای ایستا یا حتی ساختار کامل سایت برایتان حی و حاضر است.
در ادامه خدمتتان آموزش خواهیم داد چطور می‌توانید از Emmet برای ساخت صفحه وبی کامل و ایستا استفاده کنید. در این مقاله آموزشی از Visual Studio Code استفاده شده است زیرا به طور درون‌سازه‌ای از Emmet پشتیبانی می‌کند.
شما می‌توانید در سایر ادیتورها نیز از Emmet استفاده کنید، مانند Sublime، Text و Atom؛ اما باید از طریق یک افزونه پشتیبانی آن را اضافه کنید.
ساخت فایل سایت
برای شروع، Visual Studio Code را باز کنید.
برای ساخت داکیومنتی جدید و خالی File -> New File را انتخاب کنید.
برای ذخیره فایل خود File -> Save As را انتخاب کنید؛ این کار به آن افزونه html می‌دهد.
ساختار پایه‌ای
هر کدام از عناصر صفحه وبی در گروه‌ها و زیرگروه‌ها سازماندهی می‌شوند. هنگام کدنویسی با Emmet همیشه باید در نظر داشته باشید که چطور هر گروه حاوی آیتم‌هایی است که خود می‌توانند گروه حتی عناصر بیشتری نیز باشند.
در سطح بسیار ابتدایی باید بگوییم بیشتر سایت‌ها شامل سه گروه یا بخش می‌شوند: هدر، بخش اصلی از بدنه‌ی محتوا و فوتر. برای ساخت آن‌ها در Emmet فرمان زیر را تایپ کنید:
#header+#mainsite+#footer
# جلوی هر حرف یعنی هر گروه div با یک آی‌دی محسوب می‌شود. آخر خط Enter را فشار دهید تا فعالیت Emmet را مشاهده نمایید. این کار باعث می‌شود این عبارت کوچک به سه خط HTML ساخت‌یافته تبدیل شود.
ساختار هدر
هدر معمول یک سایت حاوی لوگو و یکی دو تا منو است. به منظور افزودن آن‌ها به صفحه خود می‌توانید HTML بسط‌داده‌شده را از مرحله قبلی جدا نگه داشته و مستقیماً در Header Div تایپ کنید. شما می‌توانید چیزی شبیه به این تایپ کنید:
#logo+#menu_top+#menu_main
Enter را فشار دهید تا این نیز بسط داده شود. بعد سه Div دیگر برای لوگوی سایت خود و دو منو در داخل هدر خواهید داشت.
گروه‌بندی در Emmet
با Emmet شما با گذاشتن المان‌ها در پرانتز آن‌ها را گروه‌بندی می‌کنید. این کار به شما اجازه می‌دهد تا برای صفحات خود سازه‌های پیچیده بسازید. بنابراین هرچه تا الان انجام دادید خنثی کرده و فقط همان کد #header+#mainsite+footer را که از قبل داشتید نگه دارید.
#header داخل کد خود را با فرمان زیر عوض کنید:
(#header>.logo+.menu.top+.menu.main^)
شما در Emmet می‌توانید با استفاده از کاراکتر >یک لِوِل را بیاندازید و با استفاده از کاراکتر ^ یک لول بالا روید. این کار به شما اجازه می‌دهد تا وارد یک المان شده، بقیه را آنجا اضافه نموده و بعد به عقب برگردید.
نتیجه چیزی شبیه به این خواهد بود:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
فرمان بالا اینطور ترجمه می‌شود: یک Div (گروه) با ID #header اضافه کن. داخل آن، سه Div با درجه‌های .logo، .menu.top و .menu.main اضافه کنید.
یک لول به بالا بیرون از گروه برگردید و دو Div دیگر کنارش با آی‌دی‌های #mainsite و #footer اضافه کنید.
پساساختار
پستی ابتدایی روی یک سایت معمول عموماً حاوی المان‌های زیر است:
- عنوان
- تصویر
- گزیده (به عنوان یک پاراگراف از متن)
همچنین باید لینکی را ارائه دهد که بواسطه‌ی آن بازدیدکننده قادر باشد پست واقعی را خوانده و شاید لینک‌هایی که به دسته‌بندی‌ها، تگ‌ها و غیره زده شده را نیز ببیند. هرچند برای تسهیل امور، تنها از همان سه المان استفاده خواهیم کرد.
این همان کدی است که قرار است اضافه کنیم:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5
این به Emmet می‌گوید «یک Div با درجه .post درست کن. داخلش عنوان H3، یک تصویر و یک پاراگراف برای گزیده قرار بده». شما با TEXT ضمیمه‌‌شده بعد از المان، محتواش را تعریف می‌کنید. بنابراین با Post Title دارید به Emmet می‌گویید محتوای هر عنوان H3 نگهدارنده‌ی متن Post Title خواهد بود. شما می‌توانید Post Title را به نام خود یا هر رشته متن دیگری که دوست دارید تغییر دهید و وقتی کد بسط داده شد، به عنوان محتوای عناوین پست شما مورد استفاده قرار خواهد گرفت. $ کنار Post Title متغیر عددی‌ای است که در رابطه با 5 –که می‌توانید آن را خارج از پرانتز ببینید- عمل می‌کند. *5 بعد از پرانتز به Emmet می‌گوید محتواهای پرانتز را پنج بار تکرار کند. $ جایش با شماره تکرار پست عوض می‌شود. این عدد را با عدد پست‌هایی که می‌خواهید روی صفحه‌تان باشد جایگزین کنید. آن را به کد واقعی خود بیافزایید. باید ظاهر اینچنینی به خود بگیرد:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)
ساختار فوتر
برای فوتر، دو گروه را اضافه می‌کنیم- دو Div با دو درجه. .design و .copyright.
کد از این قرار است:
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))
این کار باعث خواهد شد تا دیوی با کلاس یا درجه‌ی .design ساخته شود. داخلش لینکی است با درجه .designerslink. کنارش دیو دوم افزوده‌شده است با کلاس یا درجه‌ی .copyright. داخل این دیو، پاراگرافی است از متن ساده با محتوای Copyright 2020 My Name.
نتیجه این خواهد شد:
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))
اکنون تنها کافیست Enter را زده و حالا سایت‌تان آماده است!
با یک فشار روی کلید، هر چه تا کنون دیدیم –و این یک مشت کاراکتر به شدت فشرده- را به چندین خطوط منظم سینتکس HTML آن هم به طور تمام‌صفحه تبدیل خواهد کرد.
با فشار دادن روی Ctrl + S یا بازدید از File -> Save تغییرات را در فایل اعمال کنید.
برای مشاهده کار خود، مرورگر را اجرا کرده یا از File -> Open استفاده کنید یا از فایل‌منیجر خارجی. بعد فایل HTML خود را پیدا کرده و به صورت دستی آن را در مرورگر باز کنید.
[1] structured code
منبع: کی بازار (فروشگاه آنلاین نرم افزارهای اورجینال)، با دریافت انواع لایسنس‌های معتبر از تامین‌کنندگان جهانی این امکان را برای تمام کاربران فراهم آورده است تا در چند ثانیه، از خدماتی بین‌المللی لذت ببرند. در کی بازار امکان خرید لایسنس‌های اورجینال نرم افزارهای کاربردی و امنیتی(ویندوز اورجینال، آفیس اورجینال، آنتی ویروس اورجینال، آنتی ویروس کسپرسکی، آنتی ویروس پادویش و آنتی ویروس نود 32) بصورت ارسال آنی فراهم آمده است.