داشتن HTML تمیز و سازماندهی و بخش بندی شده، چیزی است که هدف و خواسته همه مشتری هاست ما به عنوان توسعه دهندگان Front-end است. بنابراین با Pug – قبلا به نام “Jade” بود و زمانی که به عنوان یک علامت تجاری ثبت شده، و در نتیجه تغییر نام مورد نیاز بود به Pug تغییر نام داد. – یک موتور Preprocessor قالب بندی با عملکرد بالا و ویژگی های غنی است که برای رسیدن به این هدف مناسب می باشد.
درست مانند SASS، یک پیش پردازنده Preprocessor است
و به همین ترتیب به شما کمک می کند تا تسک خود را انجام دهید مانند تعویض کردن کار تکراری با ارائه ویژگی هایی که در HTML ساده موجود نیست. همچنین توانایی نوشتن اسناد دینامیک و قابل استفاده مجدد HTML را فراهم می کند. Pug یک زبان قالب سازی HTML متن باز برای Node.js (جاوا اسکریپت سمت سرور) است که کاملا رایگان برای استفاده و ارائه دهنده سریع، آسان و سرگرم کننده HTML می باشد.
برای شروع کار با pug شما باید حتما روی سیستم خودتون Node.js رو نصب داشته باشین و اگر ندارید و یا مطمئن نیستیدبا دستور زیر چک کنید :
اگر در جواب یک عدد گرفتین در cli شما در سیستم node رو دارید ولی در کل پیشنهاد می کنم node آخرین ورژن روی سیستم داشته باشید. در ادامه برای شروع کار با pug ابتدا با دستور زیر توسط سیستم مدیریت پکیج های نصبی npm که در node موجود است pug روی سیستم خودتون نصب کنید کاملا شبیه SASS :
با ذستور بالا شما pug رو در سیستم خودتون نصب کردید برای اطمینان کد زیر برای گرقتن version در ترمینال cli تایپ کنیذ : و خروجی رو چک کتید
باید چیزی شبیه به زیر باشد :
حالا که مطمئن شدیم pug نصب است نوبت به ایجاد فایل برای مشاهد تغییرات هستیم همانند SASS شما نیاز در جای کد PUG بزنید و در جای خروجی به روز شده HTML رو دریافت کنید برای این کار یک پوشه برای INDEX.PUG و در داخل اون یک پوشه که در اون قایل HTML خروجی قرار دارد ایجاد می کنیم : مانند زیر در CLI تایپ کنید
بررسی دستور بالا -w به سیستم فرمان به روز رسانی لحظه میده که با تغییر فایل خروجی رو تغییر دهد o- محل خروجی مشخص می کند و P- مشخص می کند کد مرتب نمایش داده شود . همانطور که در کد گفتم شما باید یک پیغام دریافت کنید مثل بالا و فایل index.html اتوماتیک در پوشه html ساخته شده باشد.
خوب بریم دستور زیر بزنیم در index.pug ببینم چی میشه :
اگر همه چی درست زده باشید الان یک فایل index.html در پوشه html شما به شکل زیر ایجاد شده :
تبریک شما اولین کد خودتون با pug زدین
حالا بریم نحوه نوشتن کد با pug آشنا بشیم ابتدا نکنه خیلی مهم :
-
زبان pug دارای ویژگی whitespace sensitive هست یعنی فاصله در این زبان دارای معنی خاص است
-
pug از فاصله برای تعیین اولویت والد و فرزندی (parent/child) در TAG های HTML استفاده می کند :
یک مثال ساده :
یعنی یک DIV با کلاس remark که درونش یک TAG نوشتاری P با مقدار Pug racks هست که خروجی در فایل index.html میشود :
خوب یا کمی دقت در کد pug و خروجی تقریبا همه چی خودتون متوجه میشد :
که کلاسها در pug با . مشخص می شوند id ها با # و درون سازی با فاصله گذاری در ابتدا و فاصله در خط مقدار تگ روی مشخص می کنه attribute ها هم با پرانتز مشخص می شوند و نکته اینکه pug تگ بستن نداره .
برای وارد کردن متن شما چند روش دارید :
- با فاصله در خط مورد نظر
- با دات بعد از تگ یا پرانتز درصورت داشتن Attribute
- با کراکتر | برای ایجاد خط جدید
نکته آخر اینکه شما با pug می تونید js و Express هم بنویسید به همین سادگی امیدوارم آموزش فوق برای مفید باشه !
منبع : https://www.sitepoint.com/a-beginners-guide-to-pug
خوشحال میشم اگر بتونم کمی در جهت یادگیری بیشتر شما داشته باشم پس با من در تماس باشید در صورت نیاز .
دیدگاه خود را بنویسید لغو پاسخ