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ục views 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àm res.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)