Hãy tưởng tượng bạn đang xây dựng một ứng dụng web cần gửi email chào mừng cá nhân hóa cho người dùng mới. Việc hardcode nội dung email trực tiếp trong file JavaScript có thể hoạt động tốt khi thử nghiệm nhỏ, nhưng không hiệu quả khi ứng dụng mở rộng.
Đây là lúc Handlebars, một templating engine, phát huy tác dụng. Nó 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ẽ, dễ bảo trì
Trong bài viết này, bạn sẽ học cách sử dụng Handlebars trong Node.js để tạo template, giúp việc tạo HTML hoặc nội dung động trở nên đơn giản và linh hoạt hơn.
Cài đặt Handlebars trong Node.js
Để 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 cùng thực hiện từng bước thiết lập.
1. Cài đặt Handlebars
Mở terminal và chạy lệnh sau để thêm Handlebars vào dự án:
npm install handlebars
Đúng vậy! Việc cài đặt gói handlebars giúp bạn có thể tạo và render template động trong Node.js.
Bây giờ, hãy tiếp tục với cách thiết lập và sử dụng Handlebars trong dự án Node.js!
2. Cấu trúc dự án cơ bản
Sau khi cài đặt Handlebars, hãy tạo một cấu trúc thư mục đơn giản để làm việc. Dưới đây là một ví dụ:
project/
├── templates/
│ └── welcome.hbs
├── index.js
└── package.json
Thư mục templates/ sẽ chứa các tệp Handlebars (.hbs), còn index.js sẽ đảm nhận 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 biểu thức động (placeholders) được định dạng bằng dấu ngoặc kép {{ }}.
1. Định nghĩa Template
Tạo file templates/welcome.hbs và thêm nội dung sau:
<h1>Welcome, {{name}}!</h1>
<p>Thanks for joining us on {{date}}.</p>
Đúng vậy! Trong Handlebars, {{name}} và {{date}} là các placeholder động. Khi template được render, chúng sẽ được thay thế bằng dữ liệu thực tế mà chúng ta cung cấp.
2. Render Template trong Node.js
Bây giờ, hãy sử dụng Node.js để tải và render template Handlebars. Tại file index.js, hãy thêm vào đoạn code:
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: 'February 24, 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>Welcome, Alex!</h1>
<p>Thanks for joining us on February 24, 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 helpers tùy chỉnh.
1. Sử dụng Helpers có sẵn
Handlebars cung cấp nhiều 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ó - Cập nhật file templates/welcome.hbs:
<h1>Welcome, {{name}}!</h1>
{{#if interests}} <p>Your interests:</p> <ul> {{#each interests}} <li>{{this}}</li> {{/each}} </ul>
{{else}} <p>No interests listed yet.</p>
{{/if}}
Cập nhật file index.js để truyền danh sách sở thích:
const data = { name: 'Alex', interests: ['coding', 'reading', 'hiking']
}; const output = template(data);
console.log(output);
Và đây là output:
<h1>Welcome, Alex!</h1>
<p>Your interests:</p>
<ul> <li>coding</li> <li>reading</li> <li>hiking</li>
</ul>
Trong Handlebars, helper if và helper each giúp 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
Bạn có thể tạo custom helper trong Handlebars để mở rộng chức năng của template. Ví dụ, nếu bạn muốn viết hoa chữ cái đầu tiên trong tên người dùng, bạn có thể tạo một helper tùy chỉnh.
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);
Update file welcome.hbs để sử dụng nó:
<h1>Welcome, {{capitalize name}}!</h1>
Output:
<h1>Welcome, Alex!</h1>
Custom helpers giúp mở rộng Handlebars, giữ template sạch sẽ và đảm nhận các định dạng phức tạp trong code.
Tích hợp Handlebars với Express
Handlebars kết hợp rất tốt với Express.js, giúp bạn tạo server-side templates một cách dễ dàng.
1. Cài đặt Express & Express-Handlebars
Chạy code:
npm install express express-handlebars
Gói express-handlebars điều chỉnh Handlebars cho Express.
2. Cấu hình Express
Trong index.js, thiết lập một máy chủ cơ bản:
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 running on port 3000'));
Đặt tệp welcome.hbs vào thư mục templates như trước. Khi truy cập http://localhost:3000, template sẽ đượ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 được cung cấp, giúp quá trình phát triển web trở nên dễ dàng 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
Như bạn có thể thấy, Handlebars giúp quản lý nội dung động một cách dễ dàng cho các email, 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 thuận tiện hơn bằng cách tách biệt template khỏi logic.