از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای Handlebars: Templating Engine برای Node/JavaScriptدر این مقاله قصد داریم روش استفاده از موتور قالب Handlebars با Node.js و Express را بررسی کنیم. ما توضیح خواهیم داد که موتورهای قالب چیست و چگونه می توان از Handlebars برای ایجاد برنامه های وب ارائه شده در سمت سرور (SSR) استفاده کرد. همچنین روش پیکربندی …
سرفصلهای مطلب
معرفی
در این مقاله قصد داریم روش استفاده از موتور قالب Handlebars با Node.js و Express را بررسی کنیم. ما توضیح خواهیم داد که موتورهای قالب چیست و چگونه می توان از Handlebars برای ایجاد استفاده کرد سمت سرور ارائه شده است برنامه های وب (SSR)
همچنین در مورد روش پیکربندی Handlebars با Express.js چارچوب و روش استفاده از کمک های داخلی برای ایجاد صفحات پویا. در نهایت، ما نگاهی به روش ایجاد یک کمک کننده سفارشی در صورت نیاز خواهیم داشت.
موتور قالب چیست؟
در دهه 90 که اینترنت به دنیا معرفی شد، بیشتر برای اهداف علمی مانند انتشار مقالات تحقیقاتی و به عنوان کانال ارتباطی بین دانشگاه ها و دانشمندان استفاده می شد. بیشتر صفحات وب در آن زمان ثابت بودند. یک وب ثابت page برای هر کاربر یکسان است و تغییر نمی کند روی بر اساس هر کاربر اگر قرار است چیزی تغییر کند روی آ page، به صورت دستی انجام می شد.
در دنیای مدرن، همه چیز بسیار تعاملی تر و متناسب با هر کاربر است. امروزه تقریباً همه به اینترنت دسترسی دارند. اکثر برنامه های وب امروزی پویا هستند. مثلا، روی فیسبوک من و شما در هنگام ورود به سیستم، فیدهای خبری بسیار متفاوتی را مشاهده خواهیم کرد page از همان الگو پیروی می کند (یعنی پست های متوالی با نام کاربری در بالای آنها)، اما محتوا متفاوت خواهد بود.
این کار یک موتور قالب است – قالب برای فید خبری تعریف شده و سپس بر اساس آن است روی کاربر فعلی و پرس و جو به پایگاه داده، قالب با محتوای دریافتی پر می شود.
ما می‌توانیم از موتورهای قالب هم در بک‌اند و هم در جلویی استفاده کنیم. اگر از موتور قالب در backend برای تولید HTML استفاده کنیم، آن را صدا می کنیم رندر سمت سرور (SSR).
دسته دسته
Handlebars هم برای قالب‌های بک‌اند و جلویی محبوب است. به عنوان مثال، فریمورک محبوب front-end اخگر از Handlebars به عنوان موتور قالب استفاده می کند.
Handlebars پسوندی از سبیل زبان قالب که بیشتر متمرکز است روی سادگی و حداقل قالب.
استفاده از Handlebars با Node.js
برای شروع، یک پوشه خالی ایجاد کنید، خط فرمان را در داخل آن پوشه باز کنید و سپس اجرا کنید npm init -y برای ایجاد یک پروژه Node.js خالی با تنظیمات پیش فرض.
قبل از شروع، باید کتابخانه های Node.js مورد نیاز را نصب کنیم. می توانید نصب کنید بیان و فرمان اکسپرس ماژول ها با اجرای:
$ npm install --save express express-handlebars
توجه داشته باشید: هنگام استفاده از Handlebars سمت سرور، احتمالاً از یک ماژول کمکی مانند استفاده خواهید کرد express-handlebars که Handlebars را با چارچوب وب شما ادغام می کند. در این مقاله بیشتر تمرکز خواهیم کرد روی نحو الگو، به همین دلیل است که ما از آن استفاده می کنیم express-handlebars، اما در صورتی که شما الگو را مدیریت می کنید تلفیقی و تفسیر خودتان، می خواهید آن را بررسی کنید مرجع API کامپایل همچنین.
سپس، بیایید ساختار دایرکتوری پیش‌فرض Handlebars را دوباره بسازیم. این views پوشه شامل تمام الگوهای Handlebars است:
.
├── app.js
└── views
├── home.hbs
└── layouts
└── main.hbs
این layouts پوشه داخل views پوشه حاوی طرح‌بندی‌ها یا بسته‌بندی‌های قالب خواهد بود. این طرح‌بندی‌ها شامل ساختار HTML، شیوه نامه‌ها و اسکریپت‌هایی هستند که بین قالب‌ها به اشتراک گذاشته می‌شوند.
این main.hbs فایل طرح اصلی است. این home.hbs فایل نمونه ای از قالب Handlebars است که می خواهیم بر اساس آن بسازیم.
در ادامه، قالب ها و پوشه های بیشتری اضافه خواهیم کرد.
در مثال ما از یک اسکریپت برای ساده نگه داشتن آن استفاده خواهیم کرد. اجازه دهید import کتابخانه های مورد نیاز در ما app.js فایل:
const express = require('express');
const exphbs = require('express-handlebars');
سپس، بیایید یک برنامه Express ایجاد کنیم:
const app = express();
اکنون، ما می توانیم پیکربندی کنیم express-handlebars به عنوان موتور دید ما:
app.engine('hbs', exphbs({
defaultLayout: 'main',
extname: '.hbs'
}));
app.set('view engine', 'hbs');
به طور پیش فرض، پسوند برای قالب های Handlebars است .handlebars. اما در تنظیمات اینجا، آن را به تغییر داده ایم .hbs از طریق extname پرچم گذاری کنید زیرا کوتاهتر است.
بیایید شامل بوت استرپ اسکریپت ها و سبک ها در main.hbs چیدمان:
<html lang="en">
<head>
<!-- <meta> tags> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Book Face</title>
</head>
<body>
<div class="container">
{{{body}}}
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/(email protected)/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
و حالا بیایید خودمان را تغییر دهیم home.hbs برای درج پیام:
<h1>Hello World from Handlebars</h1>
تا بتوان به این امر رسید page، باید یک کنترل کننده درخواست را پیکربندی کنیم. بیایید آن را در root مسیر:
app.get('/', (req, res) => {
res.render('home');
});
در نهایت، ما فقط باید شروع به گوش دادن کنیم روی یک پورت برای درخواست ها:
app.listen(3000, () => {
console.log('The web server has started روی port 3000');
});
می توانیم برنامه را با آن اجرا کنیم node app.js در consoleبا این حال، ما همچنین می توانیم از ابزاری مانند استفاده کنیم گره. با nodemon، هر بار که تغییری ایجاد می کنیم، نیازی به راه اندازی مجدد سرور نداریم – وقتی کد را تغییر می دهیم، nodemon سرور را تازه می کند.
بیایید آن را نصب کنیم:
$ npm i -g nodemon
و اجرای برنامه با nodemon از طریق زیر انجام می شود:
$ nodemon app.js
بیایید از برنامه ما از طریق مرورگر بازدید کنیم:
با وجود همه چیز، اجازه دهید برخی از ویژگی های Handlebars را بررسی کنیم.
ویژگی های زبان Handlebars
به منظور به نمایش گذاشتن برخی از ویژگی های Handlebars، ما یک فید رسانه اجتماعی ایجاد می کنیم. فید داده ها را از یک آرایه ساده بیرون می کشد و یک پایگاه داده را شبیه سازی می کند.
فید حاوی پست هایی با تصاویر و نظرات خواهد بود. اگر نظری وجود ندارد روی یک تصویر – a “اولین کسی باشید که نظر می دهد روی پیام این پست” ظاهر می شود.
بیایید خود را به روز کنیم home.hbs برای شروع:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Book Face</a>
</nav>
<div class="posts">
<div class="row justify-content-center">
<div class="col-lg-7" style="margin-top: 50px;">
<div class="card">
<img src="https://picsum.photos/500/500"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Posted by Janith Kasun</h5>
<ul class="list-group">
<li class="list-group-item">This is supposed to be a comment</li>
<li class="list-group-item">This is supposed to be a comment</li>
</ul>
</div>
</div>
</div>
</div>
</div>
همانطور که در این قالب Handlebars مشاهده می کنید، ما یک را اضافه کرده ایم navbar و الف card با برخی از مقادیر مکان‌دار رمزگذاری‌شده.
ما page اکنون به این شکل است:
انتقال پارامترها به قالب ها
حال، بیایید این مقادیر کدگذاری شده را از قسمت حذف کنیم page خود و آنها را از اسکریپت به page. اینها بعداً با مقادیر نظرات در آرایه جایگزین می شوند:
app.get('/', function (req, res) {
res.render('home', {
post: {
author: 'Janith Kasun',
image: 'https://picsum.photos/500/500',
comments: ()
}
});
});
این post شامل فیلدهایی مانند author، image، و comments. ما می توانیم به post در قالب Handlebars ما {{post}}:
<div class="posts">
<div class="row justify-content-center">
<div class="col-lg-7" style="margin-top: 50px;">
<div class="card">
<img src="{{post.image}}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Posted by {{post.author}}</h5>
<ul class="list-group">
<li class="list-group-item">This is suppose to be a comment</li>
<li class="list-group-item">This is suppose to be a comment</li>
</ul>
</div>
</div>
</div>
</div>
</div>
با ارجاع به این مقادیر با هندلری که رندر می کند page، آنها درج شده اند روی سمت سرور و کاربر به ظاهر HTML ایستا با این مقادیر از قبل ارائه می شود.
استفاده از شرایط
از آنجایی که ما منطق شرطی داریم، یعنی نمایش نظرات در صورت وجود و یک پیام در صورت عدم وجود، بیایید ببینیم چگونه می توانیم از شرطی ها در قالب های Handlebars استفاده کنیم:
<div class="posts">
<div class="row justify-content-center">
<div class="col-lg-7" style="margin-top: 50px;">
<div class="card">
<img src="{{post.image}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Posted by {{post.author}}</h5>
{{#if post.comments}}
<ul class="list-group">
<!-- Display comment logic -->
</ul>
{{else}}
<ul class="list-group">
<li class="list-group-item">Be first to comment روی this post!</li>
</ul>
{{/if}}
</div>
</div>
</div>
</div>
</div>
اکنون، فقط باید “اولین نظر برای نظر باشید” را ببینید روی این پست” بخش ارائه شده است روی شما page از آنجایی که آرایه نظرات خالی است:
این #if یک کمک کننده داخلی در Handlebars است. اگر عبارت if برگردد true، بلوک داخل #if بلوک ارائه خواهد شد. اگر false، undefined، null، ""، 0، یا () برگردانده می شوند، بلوک ارائه نمی شود.
آرایه ما خالی است (()) بنابراین بلوک ارائه نمی شود.
#if فقط یک شرط را می پذیرد و نمی توانید از نحو مقایسه جاوا اسکریپت استفاده کنید (===). اگر نیاز به استفاده از چند شرط یا نحو اضافی دارید، می توانید یک متغیر در کد ایجاد کنید و آن را به قالب منتقل کنید. علاوه بر این، می توانید کمک کننده خود را تعریف کنید که در قسمت آخر انجام خواهیم داد.
استفاده از حلقه ها
از آنجایی که یک پست می‌تواند حاوی چندین نظر باشد، برای عبور از همه آنها و ارائه آنها به یک حلقه نیاز داریم. بیایید ابتدا آرایه خود را با چند نظر پر کنیم:
app.get('/', function (req, res) {
res.render('home', {
post: {
author: 'Janith Kasun',
image: 'https://picsum.photos/500/500',
comments: (
'This is the first comment',
'This is the second comment',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec fermentum ligula. Sed vitae erat lectus.'
)
}
});
});
و اکنون، در قالب خود، از آن استفاده خواهیم کرد #each حلقه برای عبور از همه آنها:
<div class="posts">
<div class="row justify-content-center">
<div class="col-lg-7" style="margin-top: 50px;">
<div class="card">
<img src="{{post.image}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Posted by {{post.author}}</h5>
{{#if post.comments}}
<ul class="list-group">
{{#each post.comments}}
<li class="list-group-item">{{this}}</li>
{{/each}}
</ul>
{{else}}
<ul class="list-group">
<li class="list-group-item">Be first to comment روی this post</li>
</ul>
{{/if}}
</div>
</div>
</div>
</div>
</div>
درون #each حلقه، می توانید استفاده کنید this برای ارجاع به عنصری که در تکرار فعلی است. در مورد ما، به رشته ای اشاره دارد که سپس رندر می شود:
اگر آرایه ای از اشیاء دارید، می توانید به هر ویژگی آن شی نیز دسترسی داشته باشید. به عنوان مثال، اگر مجموعه ای از افراد وجود دارد، می توانید به سادگی استفاده کنید this.name برای دسترسی به name رشته.
اکنون، بیایید پارامترهای قالب خود را تغییر دهیم تا حاوی چندین پست باشد:
app.get('/', function (req, res) {
res.render('home', {
posts: (
{
author: 'Janith Kasun',
image: 'https://picsum.photos/500/500',
comments: (
'This is the first comment',
'This is the second comment',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec fermentum ligula. Sed vitae erat lectus.'
)
},
{
author: 'John Doe',
image: 'https://picsum.photos/500/500؟2',
comments: (
)
}
)
});
});
حالا می توانیم یک هم قرار دهیم #each برای تکرار از طریق پست ها:
<div class="posts">
<div class="row justify-content-center">
{{#each posts}}
<div class="col-lg-7" style="margin-top: 50px;">
<div class="card">
<img src="{{this.image}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Posted by {{this.author}}</h5>
{{#if this.comments}}
<ul class="list-group">
{{#each this.comments}}
<li class="list-group-item">{{this}}</li>
{{/each}}
</ul>
{{else}}
<ul class="list-group">
<li class="list-group-item">Be first to comment روی this post</li>
</ul>
{{/if}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
استفاده از جزئی
تقریباً همه صفحات وب دارای بخش های مختلفی هستند. در سطح پایه، اینها هستند سرتیتر، بدن، و پاورقی بخش ها از آنجایی که سربرگ و پاورقی معمولاً بین بسیاری از صفحات به اشتراک گذاشته می‌شوند، این مورد در آن وجود دارد همه صفحات وب به زودی بسیار آزاردهنده و به سادگی زائد خواهند شد.
خوشبختانه، ما می توانیم از Handlebars برای تقسیم بندی این بخش ها در قالب ها و به سادگی استفاده کنیم عبارتند از این الگوها به عنوان “جزئی” در خود صفحات.
در مورد ما، چون پاورقی نداریم، a را بسازیم header.hbs و الف posts.hbs فایل در a partials فهرست راهنما:
.
├── app.js
└── views
├── home.hbs
├── layouts
| └── main.hbs
└── paritials
└── header.hbs
└── posts.hbs
سپس، کد هدر را به داخل منتقل می کنیم header.hbs فایل:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Book Face</a>
</nav>
و کد فید را وارد کنید posts.hbs فایل:
<div class="posts">
<div class="row justify-content-center">
{{#each posts}}
<div class="col-lg-7" style="margin-top: 50px;">
<div class="card">
<img src="{{this.image}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Posted by {{this.author}}</h5>
{{#if this.comments}}
<ul class="list-group">
{{#each this.comments}}
<li class="list-group-item">{{this}}</li>
{{/each}}
</ul>
{{else}}
<ul class="list-group">
<li class="list-group-item">Be first to comment روی this post</li>
</ul>
{{/if}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
و اکنون، ما می‌توانیم اینها را در فهرست قرار دهیم home.hbs فایل:
{{>header}}
{{>posts posts=posts}}
کاربر تفاوتی نمی بیند، اما ما home.hbs فایل در حال حاضر بسیار تمیزتر است. وقتی صفحات وب پیچیده ای داشته باشید، این بسیار مفید می شود.
در اینجا، ما به سادگی شامل header.hbs پرونده و گذشت الف posts پارامتر به posts زمینه از posts.hbs فایل.
کاری که این کار انجام می دهد این است که از آن عبور می کند posts از کنترل کننده ما به posts پارامتر در posts.hbs page فایل.
ساختن یک Helper سفارشی
همانطور که می بینید روی را page، ما یک نظر داریم که دو خط مصرف می کند. بیایید یک راهنمای سفارشی برای خلاصه کردن آن متن ایجاد کنیم.
برای انجام این کار، در پیکربندی Handlebars، می توانیم توابع کمکی خود را تعریف کنیم. در مورد ما، نظرات را به 64 کاراکتر برش می دهیم:
app.engine('hbs', exphbs({
defaultLayout: 'main',
extname: '.hbs',
helpers: {
getShortComment(comment) {
if (comment.length < 64) {
return comment;
}
return comment.substring(0, 61) + '...';
}
}
}));
حالا بیایید از این کمک کننده در خود استفاده کنیم posts.hbs الگوی خلاصه کردن نظرات:
<div class="posts">
<div class="row justify-content-center">
{{#each posts}}
<div class="col-lg-7" style="margin-top: 50px;">
<div class="card">
<img src="{{this.image}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Posted by {{this.author}}</h5>
{{#if this.comments}}
<ul class="list-group">
{{#each this.comments}}
<li class="list-group-item">{{getShortComment this}}</li>
{{/each}}
</ul>
{{else}}
<ul class="list-group">
<li class="list-group-item">Be first to comment روی this post</li>
</ul>
{{/if}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
مطمئناً به اندازه کافی، نظرات بریده شده است روی ما page اکنون:
نتیجه
در این مقاله، ما اصول اولیه Handlebars – یک موتور قالب برای Node.js و جاوا اسکریپت جلویی را پوشش دادیم. با استفاده از Handlebars، می‌توانیم صفحات وب پویا ایجاد کنیم که رندر شوند روی سمت سرور یا سمت مشتری با استفاده از شرط ها، حلقه ها، جزئی ها و توابع کمکی سفارشی Handlebars، صفحات وب ما چیزی فراتر از HTML ایستا می شوند.
کد نیز موجود است روی GitHub، مثل همیشه. همچنین می توانید اطلاعات بیشتری پیدا کنید روی دسته در آنها صفحه وب رسمی.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-21 06:08:03
