ExpressJS-এ Layouts এবং Partials ব্যবহৃত হয় ওয়েব পেজগুলোর পুনরায় ব্যবহারযোগ্য অংশগুলো (যেমন: হেডার, ফুটার, সাইডবার) সহজে পরিচালনা করতে। Layouts মূলত একটি ওয়েব পেজের কাঠামো (structure) তৈরি করে, যেখানে Partials হল ছোট ছোট টেমপ্লেট, যা বিভিন্ন জায়গায় পুনরায় ব্যবহার করা যায়।
এগুলো ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও মডুলার এবং স্কেলেবল করতে পারেন, যেখানে একই অংশ বার বার ব্যবহার করা হয়।
Layouts কী?
Layouts হল একটি মূল টেমপ্লেট যা পেজের সাধারণ কাঠামো নির্ধারণ করে (যেমন হেডার, ফুটার, সাইডবার ইত্যাদি)। আপনি ওয়েব পেজের অন্যান্য অংশগুলোর জন্য dynamic content এক জায়গায় প্রবাহিত করতে পারেন।
Layouts-এর সুবিধা:
- ওয়েব পেজের কাঠামো এক জায়গায় রাখার মাধ্যমে কোড রিপিটেশন কমিয়ে আনা যায়।
- পেজের মূল অংশ পরিবর্তন করলে তা স্বয়ংক্রিয়ভাবে সব পেজে প্রভাব ফেলবে।
Partials কী?
Partials হল ছোট টেমপ্লেট ফাইল, যা Layouts বা অন্য টেমপ্লেটগুলির মধ্যে পুনরায় ব্যবহার করা যায়। উদাহরণস্বরূপ, আপনি হেডার, ফুটার বা নেভিগেশন বার একাধিক পেজে ব্যবহার করতে পারেন।
Partials-এর সুবিধা:
- কোডের পুনরাবৃত্তি কমায়।
- ছোট অংশ হিসেবে কোড মেইনটেইন করা সহজ হয়।
ExpressJS-এ Layouts এবং Partials ব্যবহার
ExpressJS-এ EJS (Embedded JavaScript) টেমপ্লেট ইঞ্জিন ব্যবহার করে Layouts এবং Partials সহজে ব্যবহার করা যায়। এখানে আমরা দেখব কিভাবে Layouts এবং Partials ব্যবহার করতে হয়।
১. EJS ইনস্টল করা
প্রথমে আপনাকে EJS টেমপ্লেট ইঞ্জিন ইনস্টল করতে হবে, কারণ এটি ExpressJS-এ Layouts এবং Partials ব্যবহার করার জন্য জনপ্রিয় ইঞ্জিন।
npm install ejs
২. Express অ্যাপ কনফিগার করা
আপনি EJS টেমপ্লেট ইঞ্জিন ব্যবহার করার জন্য Express অ্যাপ্লিকেশনটি কনফিগার করতে পারেন। app.js বা server.js ফাইলে নিচের কোডটি যোগ করুন:
const express = require('express');
const app = express();
const path = require('path');
// EJS টেমপ্লেট ইঞ্জিন সেট করা
app.set('view engine', 'ejs');
// ভিউ ফোল্ডারের পাথ নির্ধারণ করা
app.set('views', path.join(__dirname, 'views'));
// স্ট্যাটিক ফাইল সেবা
app.use(express.static(path.join(__dirname, 'public')));
// রুট রাউট
app.get('/', (req, res) => {
res.render('index', { title: 'Express with Layouts and Partials' });
});
// সার্ভার চালু করা
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
এখন, Express অ্যাপ্লিকেশনটি EJS ব্যবহার করে টেমপ্লেট রেন্ডার করবে।
৩. Layouts ফাইল তৈরি করা
আপনি একটি Layout ফাইল তৈরি করতে পারেন যা সমস্ত পেজের কাঠামো ধারণ করবে। views/layouts ফোল্ডারে একটি layout.ejs ফাইল তৈরি করুন:
views/layouts/layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<header>
<h1>My Website Header</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<!-- এখানে dynamic content render হবে -->
<main>
<%- body %>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
এখানে <%- body %> দিয়ে মূল কনটেন্ট যোগ করা হবে, যেটি প্রতিটি পেজে ভিন্ন ভিন্ন থাকবে।
৪. Partials ফাইল তৈরি করা
এখন, আপনি একটি Partial তৈরি করতে পারেন যেটি যেকোনো পেজে পুনরায় ব্যবহার করা যাবে। উদাহরণস্বরূপ, একটি header.ejs partial তৈরি করতে পারেন:
views/partials/header.ejs
<header>
<h1>My Website Header</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
এটা পরে আপনার Layout বা অন্য যেকোনো পেজে ব্যবহার করা যাবে।
৫. Layouts এবং Partials ব্যবহার করা
এখন, আপনার মূল পেজগুলির জন্য Layouts এবং Partials ব্যবহার করতে পারেন। উদাহরণস্বরূপ, views/index.ejs ফাইল তৈরি করুন:
views/index.ejs
<%- include('partials/header') %>
<h2>Welcome to My Website!</h2>
<p>This is the home page.</p>
<%- include('partials/footer') %>
এখানে, include ট্যাগ ব্যবহার করে আপনি header.ejs এবং footer.ejs প Partial ফাইলগুলি লোড করেছেন।
এখন, আপনি app.js-এ রেন্ডার করা পেজটিতে Layouts ব্যবহার করতে পারেন।
views/index.ejs এর পরিবর্তন (Layouts ব্যবহার)
<%- layout('layouts/layout') %>
<h2>Welcome to My Website!</h2>
<p>This is the home page.</p>
এখানে, layout ট্যাগ ব্যবহার করে Layout ফাইল লোড করা হয়েছে।
৬. Partials ফাইল তৈরি করা
views/partials/footer.ejs
<footer>
<p>© 2024 My Website</p>
</footer>
৭. app.js-এ body অংশে ডাটা পাঠানো
এখন, index.ejs ফাইল রেন্ডার করার সময় আপনার ডাটা body অংশে পাঠানো হবে:
app.get('/', (req, res) => {
res.render('index', { title: 'Express with Layouts and Partials' });
});
সারাংশ
ExpressJS-এ Layouts এবং Partials ব্যবহার করা একাধিক টেমপ্লেটের পুনরায় ব্যবহারযোগ্য অংশগুলো ম্যানেজ করতে সাহায্য করে। Layouts পুরো পেজের কাঠামো সংজ্ঞায়িত করে, যেখানে Partials ছোট ছোট টেমপ্লেট, যেমন হেডার, ফুটার, সাইডবার ইত্যাদি ব্যবহার করার সুবিধা দেয়। EJS টেমপ্লেট ইঞ্জিন ব্যবহার করে আপনি সহজেই Layouts এবং Partials তৈরি করে Express অ্যাপ্লিকেশনকে আরও মডুলার ও স্কেলেবল করতে পারেন।
Read more
