টেমপ্লেট ইঞ্জিন কাস্টমাইজেশন এবং Layouts তৈরি করা

KoaJS একটি লঘু এবং কাস্টমাইজযোগ্য ওয়েব ফ্রেমওয়ার্ক, যা Node.js পরিবেশে ব্যবহৃত হয়। যখন আপনি KoaJS ব্যবহার করে ওয়েব অ্যাপ্লিকেশন তৈরি করেন, তখন আপনি সহজে টেমপ্লেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ তৈরি করতে পারেন। KoaJS-এ টেমপ্লেট ইঞ্জিন কাস্টমাইজ করার জন্য বেশ কিছু জনপ্রিয় টেমপ্লেট ইঞ্জিন যেমন Pug, EJS, Handlebars ইত্যাদি ব্যবহার করা যায়। এই টিউটোরিয়ালে আমরা দেখব কিভাবে KoaJS-এ টেমপ্লেট ইঞ্জিন কাস্টমাইজ এবং Layouts তৈরি করা যায়।

১. KoaJS-এ টেমপ্লেট ইঞ্জিন সেটআপ করা

Pug টেমপ্লেট ইঞ্জিন ব্যবহার করা

Pug (আগে Jade হিসেবে পরিচিত) একটি জনপ্রিয় টেমপ্লেট ইঞ্জিন, যা HTML ফাইল গুলি জেনারেট করতে ব্যবহৃত হয়। KoaJS-এ Pug ব্যবহার করার জন্য koa-pug প্যাকেজটি ইনস্টল করতে হবে। নিচে স্টেপ বাই স্টেপ নির্দেশনা দেওয়া হয়েছে।

১.১ koa-pug ইনস্টল করা

npm install koa-pug pug

১.২ Pug কনফিগারেশন এবং ব্যবহার করা

const Koa = require('koa');
const Router = require('koa-router');
const koaPug = require('koa-pug');
const path = require('path');

const app = new Koa();
const router = new Router();

// koa-pug কনফিগার করা
const pug = new koaPug({
  viewPath: path.resolve(__dirname, 'views'), // টেমপ্লেট ফাইলের পাথ
  app: app  // অ্যাপ্লিকেশনটি পাস করা
});

// রাউট হ্যান্ডলার
router.get('/', async (ctx) => {
  await ctx.render('index', { title: 'Welcome to KoaJS!' });
});

// রাউট মাউন্ট করা
app.use(router.routes()).use(router.allowedMethods());

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

এখানে, আমরা koa-pug মিডলওয়্যার ব্যবহার করে Pug টেমপ্লেট ইঞ্জিন কনফিগার করেছি। views ফোল্ডারে আমাদের পিজি টেমপ্লেট ফাইল থাকবে, এবং ctx.render() মেথডের মাধ্যমে টেমপ্লেট রেন্ডার করা হবে।

১.৩ Pug টেমপ্লেট ফাইল তৈরি করা

views ফোল্ডারে index.pug ফাইল তৈরি করুন:

html
  head
    title= title
  body
    h1= title
    p Welcome to the world of KoaJS!

এখানে, আমরা title প্যারামিটার পাস করছি এবং সেটি টেমপ্লেটে ব্যবহার করছি।

২. Layouts তৈরি করা

KoaJS-এ টেমপ্লেট ইঞ্জিন কাস্টমাইজেশনের একটি গুরুত্বপূর্ণ দিক হল Layouts তৈরি করা। Layouts মূলত একটি স্ট্যান্ডার্ড কাঠামো বা "স্ট্রাকচার" যা বিভিন্ন পৃষ্ঠার মধ্যে শেয়ার করা হয়, যেমন হেডার, ফুটার, সাইডবার ইত্যাদি। KoaJS-এ Layout তৈরি করার জন্য Pug বা EJS এর মতো টেমপ্লেট ইঞ্জিন ব্যবহার করা যায়।

২.১ Pug Layout তৈরি করা

এখন আমরা একটি সাধারণ Layout তৈরি করব, যা সকল পৃষ্ঠায় শেয়ার হবে (যেমন হেডার, ফুটার ইত্যাদি)।

প্রথমে, views/layout.pug ফাইলটি তৈরি করুন:

html
  head
    title= title
  body
    header
      h1 My Awesome Website
    main
      block content
    footer
      p © 2024 My Awesome Website

এখানে, block content অংশটি আপনি ডায়নামিক কনটেন্ট হিসেবে প্রতিটি পৃষ্ঠায় ব্যবহার করতে পারবেন।

২.২ Layout ব্যবহার করা

আপনি যখন ctx.render() কল করবেন, তখন আপনি Layout ব্যবহার করতে পারেন এবং কনটেন্ট ব্লকটি সেই Layout-এ রেন্ডার হবে।

router.get('/home', async (ctx) => {
  await ctx.render('home', { title: 'Home Page' });
});

এখন, home.pug ফাইল তৈরি করুন views/home.pug:

extends layout

block content
  h2 Welcome to the Home Page!
  p This is a dynamically generated page using KoaJS and Pug.

এখানে, আমরা extends layout দিয়ে Layout ব্যবহার করেছি এবং block content এর মধ্যে পেজের বিশেষ কনটেন্ট রেখেছি।

৩. EJS টেমপ্লেট ইঞ্জিন ব্যবহার করা

আপনি EJS (Embedded JavaScript) টেমপ্লেট ইঞ্জিনও ব্যবহার করতে পারেন KoaJS-এ। এটি একটি সহজ এবং শক্তিশালী টেমপ্লেট ইঞ্জিন যা বেশ জনপ্রিয়।

৩.১ EJS ইনস্টল করা

npm install koa-ejs ejs

৩.২ EJS কনফিগারেশন এবং ব্যবহার করা

const Koa = require('koa');
const Router = require('koa-router');
const koaEjs = require('koa-ejs');
const path = require('path');

const app = new Koa();
const router = new Router();

// koa-ejs কনফিগার করা
koaEjs(app, {
  root: path.join(__dirname, 'views'),  // টেমপ্লেট ফাইলের পাথ
  viewExt: 'ejs',  // ফাইল এক্সটেনশন
  cache: false,  // ডেভেলপমেন্টে ক্যাশ বন্ধ রাখা
  debug: true
});

// রাউট হ্যান্ডলার
router.get('/', async (ctx) => {
  await ctx.render('index', { title: 'Welcome to KoaJS with EJS!' });
});

// রাউট মাউন্ট করা
app.use(router.routes()).use(router.allowedMethods());

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

৩.৩ EJS টেমপ্লেট ফাইল তৈরি করা

views/index.ejs ফাইল তৈরি করুন:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
  <p>Welcome to the world of KoaJS with EJS!</p>
</body>
</html>

এখানে, আমরা <%= title %> ব্যবহার করে ডায়নামিক কনটেন্ট রেন্ডার করেছি।

সারাংশ

KoaJS-এ টেমপ্লেট ইঞ্জিন কাস্টমাইজেশন এবং Layout তৈরি করা খুবই সহজ এবং কার্যকর। আপনি Pug, EJS বা অন্য কোনো টেমপ্লেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ তৈরি করতে পারেন এবং Layout ব্যবহার করে ওয়েব পৃষ্ঠাগুলির মধ্যে সাধারণ কাঠামো শেয়ার করতে পারেন। KoaJS-এর নমনীয়তা এবং কাস্টমাইজেশন ক্ষমতা আপনাকে প্রয়োজনীয় টেমপ্লেটিং সলিউশন তৈরি করতে সাহায্য করে, যাতে আপনার অ্যাপ্লিকেশন আরও গতিশীল এবং স্কেলেবল হয়।