مکانیزم قالب‌بندی دسته‌بندی، طرح‌بندی‌های شما را از منطق کدتان جدا می‌کند و به خوبی با NestJS ادغام می‌شود.
با افزایش پیچیدگی یک برنامه، نیازهای آن نیز افزایش می یابد. در برخی مواقع، ارائه فایل‌های HTML ایستا ممکن است مانع پیشرفت شود یا عملکرد برنامه را متوقف کند. در عوض، می‌خواهید محتوای پویا را ارائه دهید، کاری که قالب‌بندی موتورهایی مانند Handlebars امکان‌پذیر است.
Handlebars یک موتور قالب حداقل و بدون منطق برای NodeJS است. این گسترش موتور قالب سبیل است. از آنجایی که این یک موتور بدون منطق است، می‌توانید از آن برای جدا کردن دقیق ارائه از کدهای زیرین استفاده کنید.
Handlebars به عنوان یک موتور قالب از چارچوب NestJS پشتیبانی زیادی دارد.
موتور قالب چیست؟
موتور قالب ابزاری است که تگ های HTML و یک زبان برنامه نویسی را برای ایجاد یک قالب HTML با حداقل کد ترکیب می کند.
موتور قالب در زمان اجرا داده ها را به قالب HTML تزریق می کند تا نمای نهایی را در مرورگر ارائه دهد.
ممکن است راه اندازی یک موتور قالب مانند Handlebars برای شما پیچیده باشد، زیرا شامل مراحل زیادی است. با این حال، چارچوب سرور Express که NestJS به طور پیش فرض از آن استفاده می کند، از Handlebars پشتیبانی عالی دارد.
مرحله 1: یک برنامه NestJS ایجاد کنید
دستور زیر را اجرا کنید تا یک Nest Application جدید را داربست کنید:
nest new <name of your app>
مرحله 2: نصب Handlebars
برای نصب Handlebars با استفاده از مدیریت بسته npm دستور زیر را اجرا کنید:
npm install express-handlebars@^5.3.0@types/express-handlebars@^5.3.0
مرحله 3: نمونه Express را پیکربندی کنید
به فایل main.ts خود بروید و NestExpressApplication را از @nestjs/platform-express وارد کنید.
NestExpressApplication را به عنوان یک نوع عمومی به متد ایجاد اختصاص دهید.
اینطوری:
const app = await NestFactory.create<NestExpressApplication>(AppModule)
ارسال NestExpressApplication به آبجکت برنامه به آن امکان دسترسی به روش‌های انحصاری ExpressJS را می‌دهد. برای پیکربندی ویژگی های Handlebars خاص به این روش ها نیاز دارید.
مرحله 4: دسته ها را پیکربندی کنید
ابتدا باید مکان هایی را مشخص کنید که برنامه شما HTML و سایر فایل های ثابت (شیوه ها، تصاویر و غیره) را در آنجا پیدا می کند. شما می توانید فایل های HTML خود را به ترتیب در یک پوشه “views” و سایر فایل های ثابت را در یک پوشه “public” ذخیره کنید.
برای مشخص کردن مکان‌ها، با وارد کردن join from path شروع کنید. سپس در داخل تابع bootstrap، محل استایل ها را تنظیم کنید.
اینطوری:
app.useStaticAssets(join(__dirname, '..', 'public'))
تابع join تعداد دلخواه آرگومان رشته ای را می گیرد، به آنها می پیوندد و مسیر حاصل را عادی می کند. __dirname مسیر پوشه ای را که فایل main.ts در آن قرار دارد برمی گرداند.
در مرحله بعد، مکان فایل های HTML خود را تنظیم کنید، مانند:
app.setBaseViewsDir(join(__dirname, '..', 'views'));
سپس، Handlebars را در فایل main.ts خود وارد کنید:
import * as hbs from'express-handlebars';
برای پیکربندی ویژگی های Handlebars مانند نام برنامه افزودنی و غیره به واردات hbs نیاز دارید.
نام پسوند فایل پیش فرض برای Handlebars .handlebars است.
این نام برنامه افزودنی طولانی است، اما می‌توانید آن را با فراخوانی app.engine پیکربندی کنید. app.engine یک تابع پوشش بومی حول روش express.engine است. دو آرگومان نیاز دارد: ext و یک تابع callback. برای کسب اطلاعات بیشتر در مورد آن، به مستندات Express در app.engine مراجعه کنید.
() app.engine را فراخوانی کنید و به عنوان اولین آرگومان، رشته ‘hbs’ را ارسال کنید. سپس، به عنوان آرگومان دوم، تابع hbs را فراخوانی کرده و در یک شیء پیکربندی با نام extname تنظیم شده روی “hbs” ارسال کنید. این تنظیم نام برنامه افزودنی را از .handlebars به .hbs تغییر می دهد.
app.engine('hbs', hbs({ extname: 'hbs' }));
در نهایت، موتور دید را روی Handlebars مانند زیر تنظیم کنید:
app.setViewEngine('hbs');
مرحله 5: پوشه ها را ایجاد کنید
در پوشه اصلی پروژه خود، دو پوشه جدید ایجاد کنید. شما از اولین، عمومی، برای ذخیره شیوه نامه ها برای برنامه خود استفاده خواهید کرد. در نماها، تمام فایل های HTML خود را ذخیره خواهید کرد.
این کار راه اندازی محیط توسعه شما را به پایان می رساند. در بخش بعدی مروری بر سینتکس Handlebars و استفاده از آن در برنامه NestJS خواهید داشت.
نحو فرمان
این بخش قسمت اعظم نحوی از دسته فرمان را که برای سرویس دهی به فایل های خود به صورت پویا نیاز دارید، پوشش می دهد.
یاوران
کمک کننده ها توابعی هستند که خروجی را تغییر می دهند، روی داده ها تکرار می کنند و خروجی شرطی را ارائه می دهند.
Handlebars دو نوع کمک کننده (Block و Built-in) ارائه می دهد و شما می توانید کمک کننده های سفارشی را متناسب با نیاز خود ایجاد کنید.
با پیچاندن آن در پرانتزهای مجعد دوتایی، کمکی را نشان می دهید. پیشوند نام آن را با یک هش (#) برای یک تگ کمکی بازکننده و یک اسلش رو به جلو (/) برای یک تگ بسته‌کننده قرار دهید.
مثلا:
{{!-- if the value is true, the div will be rendered else, it won't --}}
{{#if value}}
<div>The value has been rendered</div>
{{/if}}
اگر یک Helper سفارشی ایجاد می‌کنید، باید آن را در شیء پیکربندی hbs خود در فایل main.ts ثبت کنید تا بتوانید از آن در برنامه خود استفاده کنید.
// main.ts
import { customHelper } from'./helpers/hbs.helpers';
// Inside the bootstrap function
app.engine('hbs', hbs({ extname: 'hbs', helpers: { customHelper } }));
اصطلاحات
عبارات واحد یک الگوی فرمان هستند. استفاده شما از عبارات بسته به پیچیدگی کار متفاوت است. شما می توانید آنها را به تنهایی در یک الگو استفاده کنید، آنها را به عنوان ورودی به کمک کنندگان ارسال کنید و موارد دیگر.
عبارات را با پرانتزهای مجعد دوتایی نشان دهید، به عنوان مثال:
<h1>{{message}}</h1>
جزئی
جزئی به یک قطعه HTML از پیش ذخیره شده اشاره دارد زیرا در چندین فایل HTML ظاهر می شود. به عنوان مثال، نوارهای ناوبری و فوترها. می توانید آن محتوا را در یک فایل ذخیره کنید و در صورت لزوم آن را اضافه کنید.
همانند فایل‌های استاتیک و HTML خود، باید یک فهرست جزئی نیز در شیء پیکربندی app.engine خود تنظیم کنید.
دایرکتوری جزئی خود را با افزودن کد زیر به شی پیکربندی خود ثبت کنید:
// main.ts
partialsDir: join(__dirname, '..', 'views/partials'),
با استفاده از نحو تماس جزئی می توانید به یک جزئی دسترسی داشته باشید. در پرانتزهای فرفری دوتایی، یک علامت بزرگتر از (>) و به دنبال آن نام جزئی وارد کنید.
مثلا:
{{> nameOfPartial}}
طرح بندی ها
طرح‌بندی Handlebars یک صفحه HTML است که برای تنظیم متا داده یا ساختار کلی برای سایر صفحات HTML در برنامه استفاده می‌شود. به عنوان یک محفظه با یک مکان نگهدار عمل می کند که می توانید داده های پویا را به آن تزریق کنید.
مثلا:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Templating in NestJS with Handlebars</title>
</head>
<body>
<header>
{{!-- Navbar Partial --}}
{{>navbar}}
</header>
<div>
{{!-- Body Placeholder --}}
{{{body}}}
</div>
{{!-- Footer Partial --}}
{{>footer}}
</body>
</html>
هنگامی که کد خود را اجرا می کنید، Handlebars محتویات فایل .hbs را که می خواهید رندر کنید، دریافت می کند و آنها را به مکان نگهدارنده بدنه تزریق می کند. سپس نتیجه را به عنوان صفحه نهایی HTML ارائه می کند.
شما باید دایرکتوری layouts خود را در شیء پیکربندی app.engine خود ثبت کنید و یک فایل طرح بندی پیش فرض تنظیم کنید. یک فایل طرح‌بندی پیش‌فرض، فایل طرح‌بندی است که Handlebars از آن استفاده می‌کند، اگر طرح‌بندی خاصی را تعریف نکنید.
کد زیر را به شی پیکربندی خود اضافه کنید تا یک طرح بندی پیش فرض را اعلام کنید و یک دایرکتوری layouts را ثبت کنید:
defaultLayout: 'Name of the layout file',
layoutsDir: join(__dirname, '..', 'views/layouts'),
رندر کردن یک فایل hbs
در فایل کنترلر، Res decorator را از @nestjs/common و Response را از express وارد کنید.
سپس در کنترلر مسیر خود، یک آرگومان، Res. یک نوع Response را به res اختصاص دهید و آن را با دکوراتور Res حاشیه نویسی کنید. دکوراتور Res روش‌های مدیریت پاسخ بومی Express را نشان می‌دهد و رویکرد استاندارد NestJS را غیرفعال می‌کند.
سپس متد render را در res فراخوانی کنید و نام فایلی را که می خواهید رندر کنید به عنوان اولین آرگومان ارسال کنید. برای آرگومان دوم، یک شی حاوی نام طرح و مقدار جایگزین برای عبارت ارسال کنید.
اگر طرح‌بندی ارائه نکنید، Handlebars از چیدمان پیش‌فرض در شی پیکربندی app.engine شما استفاده می‌کند.
@Get()
getHello(@Res() res: Response){
return res.render('Name of file', { layout: 'name of layout', message: 'Hello World' });
}
جایگزینی برای فرمان
Handlebars یک ابزار قالب بندی عالی با بسیاری از ویژگی های مفید مانند کمک کننده ها و طرح بندی ها است. با این حال، بسته به نیاز خود، می‌توانید جایگزینی مانند EJS (جاوا اسکریپت جاسازی شده)، Pug یا Mustache را انتخاب کنید.