Sử dụng Template Engines trong Nodejs Express - [Express Tutorial - Part 5/10] 😊 (Series: Bí kíp Javascript - PHẦN 27)
Using Template Engines with Express
Template engine cho phép bạn sử dụng các tệp Template tĩnh trong ứng dụng của mình. Trong lúc ứng dụng chạy, Template engine thay thế các biến trong tệp Template
bằng các value
thực tế và chuyển Template thành tệp HTML
được gửi đến Client
. Cách tiếp cận này giúp thiết kế một trang HTML
dễ dàng hơn.
Một số Template engine phổ biến hoạt động với Express
là Pug, Mustache và EJS. Express application generator sử dụng Jade làm mặc định, nhưng nó cũng hỗ trợ một số ứng dụng khác.
Xem Template Engines list (Express wiki) để biết danh sách các Template engine mà bạn có thể sử dụng với Express
. Xem thêm So sánh các Template Engines JavaScript: Jade, Mustache, Dust và hơn thế nữa....
Lưu ý : Jade đã được đổi tên thành Pug. Bạn có thể tiếp tục sử dụng Jade trong ứng dụng của mình và nó sẽ hoạt động tốt. Tuy nhiên, nếu bạn muốn có bản cập nhật mới nhất cho Template engine, bạn phải thay thế Jade bằng Pug.
Để hiển thị tệp Template, hãy đặt các Application Setting Properties sau, đặt trong ứng dụng mặc định app.js
được tạo bởi trình tạo:
views
, thư mục chứa các tệp Template. Vd:app.set('views', './views')
. Điều này mặc định là thư mụcviews
trong thư mục gốc của ứng dụng.view engine
, Template engine để sử dụng. Ví dụ:app.set('view engine', 'pug')
để sử dụng Template engine Pug.
Sau đó cài đặt gói npm Template engine tương ứng; ví dụ để cài đặt Pug:
$ npm install pug --save
Các Template engine tuân thủ nhanh như
Jade
vàPug
xuất một hàm được đặt tên__express(filePath, options, callback)
, hàm này được gọi bằng hàmres.render()
để hiển thị Template.Một số Template engine không tuân theo quy ước này. Thư viện Consolidate.js tuân theo quy ước này bằng cách mapping tất cả các Template engine Node.js phổ biến và do đó hoạt động liền mạch trong Express.
Sau khi công cụ view engine
được đặt, bạn không phải chỉ định công cụ hoặc load mô-đun Template engine trong ứng dụng của mình; Express
load nội bộ mô-đun, như được hiển thị bên dưới (cho ví dụ trên).
app.set('view engine', 'pug')
Tạo tệp Template Pug có tên index.pug
trong thư mục views
, với nội dung sau:
html
head
title= title
body
h1= message
Sau đó, tạo một Route
để hiển thị tệp index.pug
. Nếu thuộc tính view engine
không được đặt, bạn phải chỉ định phần mở rộng của tệp view
. Nếu không, bạn có thể bỏ qua nó.
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})
Khi bạn request tới '/'
, tệp index.pug
sẽ được hiển thị dưới dạng HTML
.
Lưu ý: Bộ đệm ẩn của view engine không lưu vào bộ đệm nội dung của output
của Template, chỉ bản thân Template bên dưới. Chế độ xem vẫn được hiển thị lại với mọi request ngay cả khi bộ nhớ cache được bật.
Để tìm hiểu thêm về cách Template engine hoạt động trong Express, hãy xem: “Developing template engines for Express”.
Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.
Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.
Momo: NGUYỄN ANH TUẤN - 0374226770
TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)
All rights reserved