Tạo Template Trong Node.js Với Handlebars
Khi bạn xây dựng một ứng dụng web, việc gửi thư điện tử chào mừng cá nhân hóa cho người dùng mới là rất cần thiết. Nếu bạn trực tiếp nhúng nội dung email trong mã JavaScript, phương pháp này có thể đủ tốt cho các ứng dụng nhỏ, nhưng khi bạn mở rộng quy mô, nó trở nên không hiệu quả.
Handlebars, một công cụ tạo template (templating engine), là giải pháp lý tưởng để giúp bạn:
- Tạo template có thể tái sử dụng
- Chèn dữ liệu động vào nội dung
- Giữ cho mã nguồn sạch sẽ và dễ bảo trì
Trong bài viết này, bạn sẽ tìm hiểu cách sử dụng Handlebars trong Node.js để tạo ra các template, giúp bạn tạo nội dung HTML hoặc văn bản động trở nên đơn giản và linh hoạt hơn.
Cài Đặt Handlebars Trong Node.js
Để bắt đầu sử dụng Handlebars trong Node.js, bạn cần tích hợp nó vào dự án của mình. Hãy làm theo các bước sau:
1. Cài Đặt Handlebars
Mở terminal và chạy lệnh sau để thêm Handlebars vào dự án:
npm install handlebarsSau khi cài đặt, bạn đã sẵn sàng để tạo và render template động trong Node.js.
2. Cấu Trúc Dự Án Cơ Bản
Tạo một cấu trúc thư mục đơn giản như sau để làm việc với Handlebars:
project/
├── templates/
│ └── welcome.hbs
├── index.js
└── package.jsonThư mục templates/ sẽ chứa các tệp Handlebars (.hbs), còn file index.js sẽ đảm nhiệm logic để render template.
Tạo Template Đầu Tiên
Handlebars sử dụng các tệp văn bản với phần mở rộng .hbs, trong đó chứa các biểu thức động (placeholders) được định dạng bằng dấu ngoặc kép {{ }}.
1. Định Nghĩa Template
Bạn tạo file templates/welcome.hbs với nội dung sau:
<h1>Chào Mừng, {{name}}!</h1>
<p>Cảm ơn bạn đã gia nhập chúng tôi vào {{date}}.</p>Trong Handlebars, {{name}} và {{date}} là các placeholders. Khi template được render, chúng sẽ được thay thế bằng dữ liệu thực tế mà bạn cung cấp.
2. Render Template Trong Node.js
Tiếp theo, bạn sẽ sử dụng Node.js để tải và render template Handlebars. Thêm đoạn mã sau vào file index.js:
import fs from 'fs';
import handlebars from 'handlebars';
const templateString = fs.readFileSync('./templates/welcome.hbs', 'utf8');
const template = handlebars.compile(templateString);
const data = {
name: 'Alex',
date: '24 tháng 2 năm 2025'
};
const output = template(data);
console.log(output);Chạy lệnh này với node index.js và bạn sẽ thấy:
<h1>Chào Mừng, Alex!</h1>
<p>Cảm ơn bạn đã gia nhập chúng tôi vào 24 tháng 2 năm 2025.</p>Hàm compile của Handlebars giúp chuyển template thành một hàm có thể tái sử dụng. Khi bạn truyền vào một đối tượng dữ liệu, nó sẽ thay thế các placeholder ({{ }}) bằng giá trị thực tế.
Làm Việc Với Helpers và Logic Trong Handlebars
Handlebars không chỉ hỗ trợ thay thế dữ liệu đơn giản mà còn cho phép bạn sử dụng logic thông qua các helpers. Bạn có thể sử dụng helpers có sẵn hoặc tự định nghĩa như sau:
1. Sử Dụng Helpers Có Sẵn
Handlebars cung cấp một số helpers tích hợp sẵn, chẳng hạn như:
- if → Kiểm tra điều kiện
- each → Lặp qua mảng
- unless → Ngược lại của
if
Ví dụ, để hiển thị danh sách sở thích nếu có, hãy cập nhật file templates/welcome.hbs:
<h1>Chào Mừng, {{name}}!</h1>
{{#if interests}}
<p>Sở thích của bạn:</p>
<ul>
{{#each interests}}
<li>{{this}}</li>
{{/each}}
</ul>
{{else}}
<p>Chưa có sở thích nào được liệt kê.</p>
{{/if}}Cập nhật file index.js để truyền danh sách sở thích:
const data = {
name: 'Alex',
interests: ['lập trình', 'đọc sách', 'đi bộ']
};
const output = template(data);
console.log(output);Kết quả sẽ là:
<h1>Chào Mừng, Alex!</h1>
<p>Sở thích của bạn:</p>
<ul>
<li>lập trình</li>
<li>đọc sách</li>
<li>đi bộ</li>
</ul>Trong Handlebars, helper if và each giúp bạn xử lý điều kiện và lặp qua danh sách một cách linh hoạt.
Tạo Custom Helper Trong Handlebars
Để mở rộng chức năng của template, bạn có thể tự tạo custom helper. Ví dụ, một helper để viết hoa chữ cái đầu tiên trong tên người dùng:
import fs from 'fs';
import handlebars from 'handlebars';
handlebars.registerHelper('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
});
const templateString = fs.readFileSync('./templates/welcome.hbs', 'utf8');
const template = handlebars.compile(templateString);
const data = { name: 'alex' };
const output = template(data);
console.log(output);Cập nhật file welcome.hbs để sử dụng custom helper:
<h1>Chào Mừng, {{capitalize name}}!</h1>Kết quả sẽ là:
<h1>Chào Mừng, Alex!</h1>Custom helpers giúp mở rộng tính năng của Handlebars, giữ cho template sạch sẽ và xử lý các định dạng phức tạp trong mã nguồn.
Tích Hợp Handlebars Với Express
Handlebars tích hợp rất tốt với Express.js, giúp bạn tạo ra các template phía server một cách dễ dàng.
1. Cài Đặt Express và Express-Handlebars
Chạy lệnh sau:
npm install express express-handlebarsGói express-handlebars tích hợp Handlebars vào Express một cách dễ dàng.
2. Cấu Hình Express
Thiết lập máy chủ cơ bản trong file index.js:
import express from 'express';
import { engine } from 'express-handlebars';
const app = express();
app.engine('hbs', engine({ extname: '.hbs' }));
app.set('view engine', 'hbs');
app.set('views', './templates');
app.get('/', (req, res) => {
res.render('welcome', { name: 'Alex' });
});
app.listen(3000, () => console.log('Server đang chạy trên cổng 3000'));Đảm bảo bạn đã đặt file welcome.hbs trong thư mục templates. Truy cập vào http://localhost:3000, và bạn sẽ thấy template được hiển thị trực tiếp trên trình duyệt. Phương thức res.render sẽ biên dịch và gửi template cùng với dữ liệu cung cấp, giúp phát triển web trở nên đơn giản hơn.
Lưu ý: Đặt extname: '.hbs' trong tùy chọn của engine để khớp với phần mở rộng tệp của bạn, vì Express mặc định sử dụng .handlebars.
Kết Luận
Qua bài viết này, bạn đã thấy rằng Handlebars giúp bạn quản lý nội dung động một cách dễ dàng, từ việc tạo email chào mừng cho đến các trang HTML hoặc các nội dung văn bản khác. Nó cũng giúp việc duy trì và cập nhật nội dung trở nên thuận tiện hơn thông qua việc tách biệt template khỏi logic, khiến mã nguồn của bạn dễ đọc và bảo trì hơn.
source: viblo
