سلام عزیزان ، امیدوارم حالتون خوب باشه ? من اینبار دست پر تر برگشتم و قرار هست یکی از مطالبی که بشخصه از طرفدارهای پروپارقصش هستم رو باهاتون به اشتراک بزارم و پیشاپیش امیدوارم مورد استقبالتون قرار بگیره . همونطور که میدونین HTML بطور عادی استاتیک یا ایستا هست ، یعنی اگر بخوایم در داخل قالبمون داده های پویایی نمایش بدیم ، باید از جاوااسکریپت یا تکنولوژی های مشابه اون استفاده کنیم . خوب اینجاست که Template Engine ها پا به میدون میزارن و خیلی از مشکلات ما رو حل میکنن ! اما خوب یک موتور قالب اصلا چی هست و چه کاری رو برای ما انجام میده که باید بهش توجه کنیم ? با من همراه باشید ...
یک Template Engine یا اصطلاحا یک موتور قالب ، در ساده ترین حالت یک برنامه ای هست که قالب های نوشته شده به زبان های مختلف رو به HTML واقعی کامپایل میکنه . به عبارت دیگه یک Template Engine داده هایی رو از یک منبع خارجی دریافت میکنه و اونهارو به Template موردنظرمون تززیق میکنه تا نهایتا یک قالب داینامیک داشته باشیم !
نحوه ی عملکرد یک Template Engine به اینصورته که منطق و ظاهر برنامه رو از هم جدا میکنه و اونهارو در داخل یک محیط ایزوله قرار میده ! برای درک بهتر ساختار مدل معروفی مثل MVC رو تصور کنید :) همونطور که میدونید در مدل MVC نحوه ی نمایش عناصر صفحه ، مربوط به View هست و منطق برنامه توسط Controller مدیریت میشه . حالا وظیفه ی Template Engine هم دقیقا همینه که مقادیر مورد نیاز View رو برای ما بارگذاری میکنه .
پس تا اینجا فهمیدیم که برای رندر کردن صفحات HTML بصورت داینامیک ، به یک موتور رندرینگ نیاز داریم . تقریبا هر فریمورک قدرتمندی که در دنیای وب فعالیت داره ، حداقل یک Template Engine یا موتور قالب داره که خوشبختانه در Nodejs هم موتورهای قالب متعددی وجود دارن و موتور قالب هایی که ما قصد داریم در ادامه باهاشون آشنا بشیم ، به ترتیب 3 موتور قالب Handlebars ، PUG و EJS هستن که هر کدومشون پیکربندی ها ، قابلیت ها و سینتکس منحصر به فرد خودشون رو دارن !
راستی همونطور که از تاپیک این مقاله مشخصه برای اینکه محتوامون زیادی طولانی نشه ، قصد دارم محتوای این مقاله رو به 3 قسمت تقسیم کنم و تو هر قسمت به یکی از 3 موتور قالبی که گفتم اشاره کنم ، پس تو این قسمت صرفا با موتور قالب پرطرفدار و کاربردی Pug.js آشنا میشیم :)
برای شروع ، ساختار پروژه و قطعه کدهای از پیش تعریف شده ی زیر رو در نظر بگیریم :
همونطور که تا اینجا فهمیدیم ، به طور کلی وظیفه موتور های قالب (Template Engines) ، جایگزینی مقادیر دریافت شده از سمت سرور در قالب (Template) هست که توسط Controller در اختیار موتور قالب قرار میگیرن . Pug.js یکی از Template Engine های کاربردی Node.js هست و یکسری ویژگی های قدرتمندی مثل شرط ها ، حلقه ها ، include ها و . . . داره که با استفاده از اون ها میتونیم بر اساس ورودی کاربر یا داده های مرجع ، کدهای قالبمون رو به HTML تبدیل کنیم . برای نصب این موتور قالب ، باید تو محیط ترمینال دستور زیر رو اجرا کنیم :
npm i pug
بعد از نصب PUG ، نیازی به هیچگونه ایمپورت کردنی نیست و برای استفاده از اون تنها کافیه که بصورت زیر از متد set استفاده کنیم :
اما این یعنی چی ? ما از طریق متد ( )app.set یک چیزی رو به صورت گلوبال به Express میفهمونیم تا بتونیم در هر جایی که بهش نیاز داشتیم ازش استفاده کنیم . مثلا در دستور اول موتور قالب PUG رو به Express معرفی کردیم و بهش گفتیم که آقا ( منظور از آقا ، Express بزرگوار هست ) برای رندر کردن Template ها باید از موتور قالب PUG استفاده کنی و در دستور بعدی هم بهش گفتیم قالب هایی که برای رندر کردن باید دنبالشون بگردی ، در داخل فولدری بنام views قرار دارن !
به نکته ای که در اینجا باید بهش توجه کنیم این هست که پارامتر اول متد مربوط به معرفی موتور قالب (دستور اول) و پارامتر اول متد مربوط به معرفی فولدر قالب ها (دستور دوم) در قطعه کد بالا ثابت هست !
توجه : متد مربوط به معرفی فولدر قالب ها در قطعه کد بالا رو بصورت زیر هم میتونیم بنویسیم :
چون Express بصورت پیشفرض خودش میدونه قالب هایی که باید رندر بشن در داخل فولدری به نام views قرار دارن ، اما اگر ما قالب هامون در داخل یک فولدر دیگه ای به نام Templates قرار بدیم ، حتماً باید اسم فولدر قالب هارو توی پارامتر دوم متد ( )app.set ذکر کنیم ، پس حواستون به این مورد باشه رفقا :)
برای شروع کار با موتور قالب PUG ، یک فولدر جدید به نام views و در داخل پوشه ی views هم یک فایل جدید به نام index.pug ایجاد میکنیم . حالا اگر تو ویرایشگری مثل vscode علامت ! ( از فیچرهای پلاگین Emmet ) رو تایپ کنیم و بعد Enter رو بزنیم ، فرمت اولیه سند PUG رو بصورت زیر خواهیم دید :
که ما این قطعه کد رو بصورت زیر تغییر میدیم :
حالا که قالبمون رو داریم ، برای رندر کردنش باید در داخل فایل app.js به اینصورت عمل کنیم :
همونطور که میبینید به متد ( )res.render فقط اسم قالب index رو دادیم ، یعنی نیازی به هیچ گونه آدرس دهی و دادن پسوند خاصی نیست ! حالا اگر در داخل مرورگر به آدرس localhost:3000 بریم ، همچین چیزی رو خواهیم دید :
و بعد اگر از صفحه مون یک inspect بگیریم ، میبینیم که کل محتوای قالبمون به HTML واقعی تبدیل شدن . حالا سوالی که پیش میاد این هست که چطور میتونیم پیام Hello World ی که توی صفحه مرورگر نمایش داده شده و همچنین عنوان پروژه مون که pug هست رو به صورت داینامیک تغییرشون بدیم ? برای این منظور تنها کافیه آبجکتی از داده هایی که نیاز داریم رو به صورت key/value به پارامتر دوم متد ( )app.render پاس بدیم ! یعنی مثلاً به این صورت :
حالا بعد از اینکه دیتاهامون رو به سمت قالبمون ارسال کردیم ، برای استفاده از اونها باید در داخل فایل index.pug به اینصورت عمل کنیم :
حالا اگر به مرورگر بریم میبینیم که عنوان صفحه با newTitle و متن Hello World هم با متن Hi Guys جایگزین شده :
قبل از آشنایی با ساختار حلقه ها در PUG ، ابتدا در داخل فایل app.js یک آرایه بصورت زیر تعریف میکنیم و اون رو هم به سمت قالبمون میفرستیم :
حالا اگر بخوایم در داخل قالبمون از حلقه ها استفاده کنیم ( روی آرایه ای که فرستادیم پیمایش کنیم ) باید به صورت زیر از ساختار each . . . in استفاده کنیم :
خروجی :
حالا اگر بخوایم در داخل قالب مون از شرط ها استفاده کنیم ، مثلا اگر بخوایم نام افراد رو تنها در صورت برقرار بودن شرط خاصی رندر کنیم ، باید به این صورت عمل کنیم :
همونطور که میدونیم اگر بخوایم یک سایت بزرگی رو پیاده سازی کنیم ، اکثر مواردی که تو قالب هامون هست ، برای بعضی از صفحات پروژه مون تکراریه و اگر بخوایم برای هر قالبی این موارد رو از دوباره بنویسیم ، با حجم زیادی از کدهای تکراری مواجه خواهیم شد و این خوب نیست ! برای رفع این مشکل میتونیم از Layout ها استفاده کنیم ، یعنی میتونیم موارد تکراری رو در داخل فایل های جدا قرار بدیم تا هرجایی که نیاز داشتیم ازشون استفاده کنیم و از نوشتن کدهای تکراری جلوگیری کنیم ! برای این منظور ابتدا یک فولدر جدید به نام layouts و در داخل اون هم یک فایل جدید به نام main.pug ایجاد میکنیم و سپس موارد تکراری رو از فایل index.pug به این فایل منتقل میکنیم ( مثلاً همونطور که میدونیم قطعه کد زیر در همه ی قالب ها مشترکه ، پس اونو در داخل فایل main.pug قرار میدیم ) :
از طرفی در برخی شرایط هم نیاز داریم که برای هر قالبی استایل های خاصی رو اعمال کنیم ، چون ممکنه در یک قالب فرمی داشته باشیم که استایل های منحصر به فرد خودش رو داره ! برای این منظور یعنی برای تفکیک استایل های هر قالب ، باید بصورت زیر از ویژگی Block ها در PUG استفاده کنیم :
همونطور که میبینیم برای body هم از یک block استفاده کردیم ، چراکه هر قالبی قطعا محتوای منحصر به فرد خودش رو داره ! حالا برای اینکه در داخل فایل index.pug بتونیم از این layout استفاده کنیم ، باید بصورت زیر عمل کنیم ( به نحوه ی استفاده از block ها و ایمپورت کردن فایل main.pug توجه کنید ) :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، میبینیم که همه چیز به درستی و مثل قبل کار میکنه :
خوب دوستان به پایان این مقاله رسیدیم و امیدوارم لذت کافی رو برده باشین . واقعا برای تهیه ی این مقاله زمان زیادی صرف شده و تمام سعیم بر اینه دو مقاله ی بعدی که مرتبط با این مطلب هستن رو هم به همین صورت باهاتون به اشتراک بزارم! برای ادامه ی این سفر نیازمند حمایت و نظراتتون هستم :) خلاصه که حتما با نظر دادن و به اشتراک گذاشتن ازم حمایتم کنید تا پرانرژی تر پیش بریم :) دمتون گرم
