Templating ใน Koa.js เป็นกระบวนการสร้างและแสดงหน้าเว็บที่ใช้รูปแบบ (template) สำหรับแสดงข้อมูลในหน้าเว็บไซต์ของคุณ มีหลายแพ็กเกจและตัวเลือกในการใช้ Templating ใน Koa.js อย่างรวดเร็ว, คำตอบนี้จะแนะนำใช้ koa-views และ nunjucks ในการสร้างและแสดงหน้าเว็บ:
ติดตั้งแพ็กเกจ
koa-viewsและnunjucks:ใช้คำสั่ง npm เพื่อติดตั้งแพ็กเกจ
koa-viewsและnunjucks:1
npm install koa-views nunjucks
หรือถ้าคุณใช้ Yarn:
1
yarn add koa-views nunjucks
กำหนด middleware สำหรับ
koa-views:ในแอปพลิเคชัน Koa.js ของคุณ, ใช้
koa-viewsเป็น middleware และกำหนดการตั้งค่าของ Templating Engine (ในที่นี้เราใช้ nunjucks):1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24const Koa = require('koa');
const views = require('koa-views');
const path = require('path');
const app = new Koa();
// กำหนด middleware สำหรับ koa-views
app.use(views(path.join(__dirname, 'views'), {
extension: 'njk', // รูปแบบของไฟล์แม่แบบ
map: { njk: 'nunjucks' }, // ใช้ nunjucks เป็น Templating Engine
}));
// ตั้งค่า nunjucks หรือ Templating Engine ตามความต้องการ
const nunjucks = require('nunjucks');
nunjucks.configure(path.join(__dirname, 'views'), { autoescape: true });
// กำหนด route สำหรับแสดงหน้าเว็บ
app.use(async (ctx) => {
await ctx.render('index', { title: 'Welcome', message: 'Hello, Koa.js!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});สร้างแม่แบบ (Template):
สร้างไฟล์แม่แบบ (template) ในโฟลเดอร์
viewsโดยใช้ส่วนของ Templating Engine ที่คุณได้กำหนด (ในที่นี้คือ nunjucks) เพื่อแสดงข้อมูลตามต้องการ:1
2
3
4
5
6
7
8
9
10
11<!-- views/index.njk -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>เรียกใช้แอปพลิเคชัน:
เมื่อคุณรันแอปพลิเคชัน Koa.js และเข้าที่ http://localhost:3000, คุณจะเห็นหน้าเว็บที่แสดงข้อความ “Hello, Koa.js!” ที่ถูกแสดงผลจากแม่แบบ nunjucks.
นี่คือวิธีการใช้ Templating ใน Koa.js โดยใช้ koa-views และ nunjucks. คุณสามารถปรับแต่งแม่แบบและการแสดงผลข้อมูลตามความต้องการของโปรเจกต์ของคุณ.