KoaJS একটি শক্তিশালী এবং কাস্টমাইজযোগ্য ওয়েব ফ্রেমওয়ার্ক, তবে এতে ডায়নামিক HTML পেজ রেন্ডার করার জন্য কোনো বিল্ট-ইন সাপোর্ট নেই। তবে, আপনি Templating Engines (যেমন: Pug, EJS, Handlebars) ব্যবহার করে KoaJS অ্যাপ্লিকেশনে ডায়নামিক HTML পেজ রেন্ডার করতে পারেন। এখানে আমরা দেখব কিভাবে KoaJS-এ Pug (পূর্বে Jade) টেম্পলেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ রেন্ডার করা যায়।
১. Pug টেম্পলেট ইঞ্জিন ইনস্টল করা
প্রথমে আপনাকে Pug ইনস্টল করতে হবে, যা একটি জনপ্রিয় টেম্পলেট ইঞ্জিন। এটি HTML কোডে ডায়নামিক ডেটা ইনজেক্ট করার জন্য ব্যবহৃত হয়।
ইনস্টলেশন:
npm install pug
এছাড়া, KoaJS-এ Pug টেম্পলেট ইঞ্জিন ব্যবহার করার জন্য koa-views প্যাকেজটি ইনস্টল করতে হবে, যা KoaJS অ্যাপ্লিকেশনের সাথে টেম্পলেট রেন্ডারিং সরবরাহ করে।
npm install koa-views
২. Pug টেম্পলেট ইঞ্জিন কনফিগার করা
এখন আপনি koa-views এবং Pug কে কনফিগার করে টেম্পলেট রেন্ডারিং চালু করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেওয়া হল।
উদাহরণ কোড:
const Koa = require('koa');
const path = require('path');
const koaViews = require('koa-views'); // টেম্পলেট ইঞ্জিন ব্যবহারের জন্য
const app = new Koa();
// koa-views কনফিগারেশন
app.use(koaViews(path.join(__dirname, '/views'), {
extension: 'pug' // Pug টেম্পলেট ইঞ্জিন ব্যবহার
}));
// রুট হ্যান্ডলার
app.use(async (ctx) => {
const title = 'Welcome to KoaJS with Pug';
await ctx.render('index', { title }); // 'index.pug' টেম্পলেট রেন্ডার করা
});
// অ্যাপ চালু করা
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
এখানে, koa-views মিডলওয়্যার ব্যবহার করে Pug টেম্পলেট ইঞ্জিন কনফিগার করা হয়েছে এবং index.pug টেম্পলেট রেন্ডার করা হচ্ছে। ctx.render() মেথডের মাধ্যমে টেম্পলেট রেন্ডার করা হয় এবং সেখানে ডায়নামিক ডেটা (যেমন title) পাঠানো হয়।
৩. Pug টেম্পলেট তৈরি করা
এখন, views ফোল্ডারে একটি index.pug টেম্পলেট তৈরি করতে হবে। এই টেম্পলেটে ডায়নামিক ডেটা ইনজেক্ট করা হবে।
views/index.pug:
doctype html
html
head
title= title
body
h1= title
p Welcome to KoaJS with Pug Template Engine!
এখানে, title ডায়নামিক ডেটা হিসেবে পাস করা হচ্ছে এবং তা টেম্পলেটে রেন্ডার হবে। আপনি যদি অ্যাপ চালান, তাহলে পেজটি একটি শিরোনামসহ ডায়নামিকভাবে রেন্ডার হবে।
৪. অতিরিক্ত ডায়নামিক ডেটা পাস করা
আপনি যদি আরো ডায়নামিক ডেটা পাস করতে চান, যেমন লিস্ট বা অবজেক্ট, তাহলে আপনি সেগুলোও পাস করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হল, যেখানে একটি অ্যারে পাস করা হয়েছে:
উদাহরণ কোড:
app.use(async (ctx) => {
const title = 'Welcome to KoaJS with Pug';
const users = [
{ name: 'John', age: 28 },
{ name: 'Jane', age: 32 },
{ name: 'Joe', age: 40 }
];
await ctx.render('index', { title, users });
});
views/index.pug:
doctype html
html
head
title= title
body
h1= title
p Welcome to KoaJS with Pug Template Engine!
ul
each user in users
li= user.name + ' - ' + user.age
এখানে, users অ্যারে কন্টেন্টটি টেম্পলেটে রেন্ডার হবে, যেখানে প্রত্যেকটি ব্যবহারকারীর নাম এবং বয়স দেখানো হবে।
৫. কাস্টম টেম্পলেট ডিরেক্টরি
আপনি চাইলে টেম্পলেট ডিরেক্টরি কাস্টমাইজ করতে পারেন। যদি আপনার টেম্পলেটগুলি অন্য কোনো ডিরেক্টরিতে থাকে, তাহলে koa-views কনফিগারেশন পরিবর্তন করতে হবে।
উদাহরণ:
app.use(koaViews(path.join(__dirname, 'templates'), {
extension: 'pug'
}));
এখানে templates ডিরেক্টরি থেকে টেম্পলেট ফাইলগুলি রেন্ডার করা হবে।
সারাংশ
KoaJS-এ Pug টেম্পলেট ইঞ্জিন ব্যবহার করে ডায়নামিক HTML পেজ রেন্ডার করা সম্ভব। আপনি koa-views এবং Pug প্যাকেজগুলি ইনস্টল এবং কনফিগার করে আপনার অ্যাপ্লিকেশনে ডায়নামিক টেম্পলেট রেন্ডারিং কার্যকরীভাবে ব্যবহার করতে পারেন। টেম্পলেটের মধ্যে ডায়নামিক ডেটা ইনজেক্ট করার মাধ্যমে আপনি ওয়েব পেজে কাস্টমাইজড কন্টেন্ট দেখাতে পারবেন।
Read more
