06/04/2021, 14:50

emplate Engine Pug trong Express - Express Framework

Trong bài viết này chúng ta sẽ tìm hiểu về Template Engine trong Nodejs và cách dùng Template Engine Pug để đưa vào dự án thực tế của mình. Hiện trong NodeJS có rất nhiều template, và mình sẽ liệt kê nó ở phần 1 dưới đây. Như bạn biết, bất kì một framework nào tạo ra với mục đích xây dựng ứng ...

Trong bài viết này chúng ta sẽ tìm hiểu về Template Engine trong Nodejs và cách dùng Template Engine Pug để đưa vào dự án thực tế của mình. Hiện trong NodeJS có rất nhiều template, và mình sẽ liệt kê nó ở phần 1 dưới đây.

Như bạn biết, bất kì một framework nào tạo ra với mục đích xây dựng ứng dụng web đều phải có thư viện template, nhiệm vụ của thư viện này là giúp render dữ liệu thành mã HTML để server trả kết quả về client.

1. Template Engine là gì ?

Nếu như bạn đã quá chán mới việc gõ các thẻ html bằng cách thông thường, khó quản lí các phần với nhau thì Template Engine giúp bạn loại bỏ đi các công đoạn đó. Template Engine tạo ra các khuân mẫu, cho phép bạn sử dụng các tệp mẫu tĩnh trong ứng dụng của mình.

Trong thời gian chạy, Template Engline sẽ thay thế các biến trong tệp mẫu bằng các giá trị thực và chuyển đổi mẫu thành tệp HTML được gửi đến client. Sử dụng cách này sẽ giúp thiết kế trang HTML nhanh và tổ chức các component được nhanh hơn.

template engine pug trong nodejs

Có rất nhiều Template Engine phổ biến được sử dụng rất nhiều như:

  • Mustache
  • Embedded JS Templates
  • Jade templating
  • Pug
  • HandlebarsJS

Trong Express người ta thường sử dụng các Template Engine như: Pug, EJS, Jade,...Trong bài này chúng mình sẽ đi tìm hiểu về một Template Engine khá và được sử dụng trong Express rất nhiều đó là Pug

2. Sử dụng Template Engine Pug trong Express

Pug là một template được sử dụng khá nhiều, chúng ta có thể thấy được Template Engine này cú cú pháp khá là gọn gàng và dễ hiểu giống như ngôn ngữ lập trình Python, ở đây mình có một ví dụ về Pug như sau:

doctype html  
html(lang='en')  
 head
   title Pug Pug Pug
 body
   h1 Title
   div.container
     p This is content

Sau khi được biên dịch về HTML thì sẽ có nội dung như sau :

<!DOCTYPE html>  
<html lang="en">  
 <head>
   <title>Pug Pug Pug</title>
 </head>
 <body>
   <h1>Title</h1>
   <div class="container">
     <p>This is content</p>
   </div>
 </body>
</html>

Bằng việc sử dung Template Engine giúp cho các đoạn mã dễ dàng được triển khai và mở rộng hơn, các cú pháp cũng gọn gàng hơn. Dễ dàng quản lí các phần. Như ví dụ trên sử dụng Pug đương nhiên sẽ nhanh hơn triển khai bằng html thông thường.

Cài đặt Pug

Bạn cần phải cài đặt Pug vào dự án của bạn bằng cách mở terminal và gõ dòng lệnh :

npm install --save pug

Để sử dụng Template Engine trong Express bạn cần phải khai báo thêm cho Express một thuộc tính, chúng ta sẽ khai báo 2 thuộc tính sau trong file app.js của dự án :

//Khai báo đường dẫn đến thư mục chứa các template
app.set('views', './views')
//Khai báo templateEngine sử dụng
app.set('view engine', 'pug')

Ở đây mình khai báo đường dẫn đến thư mục chứa template là thư mục views và template engine sử dụng là pug. Bạn có thể chỉnh sửa theo từng loại template engine và thư mục chứa template. Lúc này Express sẽ tự động biên dịch các tập tin pug về HTML thông thường. Khi cần sử dụng bạn chỉ cần render và còn có thể truyền dữ liệu từ controller sang view như cách thông thường.

res.render('index', { title: 'Hey', message: 'Hello there!' })

Sử dụng Pug

Ở phần cài đặt Pug mình đã khai báo đường dẫn đến thư mục chứa template là views, lúc này mình sẽ tạo một thư mục có tên là views, trong thư mục này sẽ chứa các file có đuôi là .pug, mặc định phần mở rộng của các file sử dụng pug là .pug nha các bạn. Ví dụ mình sẽ tạo một file có tên index.pug

html  
    head
        title Using Pug 
    body
        header
            h1 This is content of h1
        section
            p This is content of p 
        footer
            This is content of footer

Trong file app.js của dự án sẽ như sau:

const express = require('express')
const app = express()
//Khai báo đường dẫn đến thư mục chứa các template
app.set('views', './views')
//Khai báo templateEngine sử dụng
app.set('view engine', 'pug')
app.get('/', (req, res) => {
    res.render('index')
})
app.listen(8888)

Khởi chạy dự án express sẽ tự động render file index.pug trong thư mục views thành file HTML mà trả về cho clients

Khởi tạo class và ID vào các thẻ

Chúng ta có thể tạo các thẻ với các id và class bằng cách thêm dấu chấm (.) cho classdấu thăng (#) cho id:

PUG

h1.welcome
p#content
span.note#note_1

HTML

<h1 class="welcome"></h1>
<p class="content"></p>
<span class="note" id="note_1"></span>

Thêm thuộc tính vào các thẻ

Các thuộc tính thẻ tương tự như HTML (các thuộc tính cách nhau bằng dấu phẩy), nhưng giá trị của chúng chỉ là JavaScript thông thường.

PUG

a(href='Zaidap.com.net') Zaidap.com
|
|
a(class='button' href='Zaidap.com.net') Zaidap.com
|
|
a(class='button', href='Zaidap.com.net', class="btn") Zaidap.com

HTML

<a href="Zaidap.com.net">Zaidap.com</a>
<a class="button" href="Zaidap.com.net">Zaidap.com</a>
<a class="button" href="Zaidap.com.net" class="btn">Zaidap.com</a>

Thuộc tính Style

Thuộc tính style có thể là một chuỗi, giống như bất kỳ thuộc tính bình thường nào; nhưng nó cũng có thể là một object

PUG

//Giá trị của thuộc tính style là một object
a(style={color: 'red', background: 'green'})

//Giá trị của thuộc tính style là một chuỗi
a(style="color: red; background: "green")

HTML

<a style="color:red;background:green;"></a>
<a style="color:red;background:green;"></a>

Biến trong Pug

Pug cho phép bạn khai báo và sử dụng các biến, để khai báo các biến bạn thêm kí tự ngạch ngang ( - ) và khởi tao các biến như trong javascript. Để lấy giá trị của biến ta thêm dấu bằng ( = ) trước.

PUG

- var Zaidap.com = 'Learn Nodejs'
h1=Zaidap.com

HTML

<h1>Learn Nodejs</h1>

Biểu thức điều kiện và switch case

Chúng ta có thể sử dụng các biểu thức điều kiện if else trong PUG. Trong file .pug ta có nội dung như sau :

- var isLogin = true
if isLogin 
    h1(style={color: 'green'}) Welcome to Zaidap.com
else
    h1(style={color: 'red'}) Login please !!!

HTML

<h1 style="color:red;">Login please</h1>

Ngài ra Pug còn hỗ trợ chúng ta làm việc với swith case

- var girlFriends = 3
case girlFriends
  when 0
    p you have no girlfriends
  when 1
    p you have a girlfriends
  default
    p Ohh !!! you have #{friends} girlfriends

HTML

<p>Ohh !!! you have 3 girlfriends</p>

Comment trong Pug

Pug cung cấp cho chúng ta cú pháp để comment code. Để hiện thị comment trên code html đã render tra sử dụng 2 dấu gạch chéo ( // )

// Zaidap.com.net - pug 
p foo
p bar
<!-- Zaidap.com.net - pug-->
<p>foo</p>
<p>bar</p>

Nếu bạn chỉ muốn comment trong file pug mà ko muốn pug render ra html sử dụng dấu gạch chéo và dấu gạch ngang kết hợp với nhau ( //- )

//- Zaidap.com.net - pug 
p foo
p bar
<p>foo</p>
<p>bar</p>

Template Inheritance

Pug hỗ trợ việc mở rộng các đoạn mã bằng cách thừa kế, Template Inheritance hoạt động dựa vào 2 từ khóa blockextends, chức năng này cho phép bạn mở rộng các phần của dự án. Đơn giản phư phân chia bố cục layout. Sau đây mình sẽ dùng Template Inheritance để tạo một bố cục đơn giản. Chúng ta có thể dùng từ khóa append để thêm giá trị vào block.

File layout.pug chứa các block của chứa các phần để chia bố cục

html
  head
    title Fretuts.net
  body
    block header
    block body
    block footer
      #footer
        p some footer content

File index.pug để thay thế, ghi đè, thêm giá trị các block trong layout.pug

//- page-a.pug
extends layout.pug
block header 
    h1 Header
block body
    h1 body 
block append footer 
    p Them gia tri vao block footer 

Lúc này khi file index.pug được render ra HTML như sau:

<html>
<head>
    <title>Fretuts.net</title>
</head>
<body>
    <h1>Header</h1>
    <h1>body </h1>
    <h1 id="footer">Footer</h1>
    <p>Them gia tri vao block footer </p>
</body>
</html>

Mixins

Mixins cho phép bạn tạo các khối Pug có thể tái sử dụng, đây là một tính năng khá hay giúp bạn có thể dùng lại các đoạn mã giống nhau nhiều lần. Nó giống như function trong ngôn ngữ lập trình, bạn có thể thêm các tham số vào nó bằng cách để các tham số trong dấu ngoặc tròn (

mixin list(first, second, third)
  ul
    li=first
    li=second
    li=third
+list('free', 'tuts', '.net')
+list('lap trinh', 'nodejs', '.tai Zaidap.com.net')

HTML

<ul>
  <li>free</li>
  <li>tuts</li>
  <li>net</li>
</ul>
<ul>
  <li>lap trinh</li>
  <li>nodejs</li>
  <li>tai Zaidap.com.net</li>
</ul>

Trên đây là những kiến thức cơ bản về Template Engine Pug và cách sử dụng nó trong ExpressJS. Mong bài viết này có thể giúp ích cho bạn cho việc lập trình với NodeJS, cảm ơn bạn đã quan tâm bài viết này.

Bài tiếp
0