Tìm hiểu về JADE/PUG

JADE/PUG là một template engine cực kỳ mạnh được phát triển với ý tưởng dựa trên Haml. Thực thi cùng với JavaScript và NodeJS. Thay đổi hoàn toàn cách viết HTML với những cú pháp hoàn toàn mới và tức nhiên sẽ giải quyết những vấn đề mà HTML không để làm được. Dù mới nhưng không có nghĩa nó sẽ rất khó để có thể đọc và hiểu, trong khi phương châm của các lập trình viên ngày nay là “Write less, do more” và JADE/PUG đã làm được điều đó. Với JADE/PUG, bạn sẽ code HTML một cách nhanh hơn và sạch hơn.

Dự án ban đầu được mang tên là “JADE” một cái tên rất đẹp “Ngọc Bitch”, tuy nhiên cái tên JADE là bị đụng bản quyền với một công ty phần mềm lớn. Sau khi trao đổi với các dev và maintainer thì cái tên “PUG” (Chó mặt xệ) được ra đời. Và tất cả các bản release sau đều đổi thành PUG với cú pháp mạnh mẽ, linh hoạt và rõ ràng hơn JADE.

  • Template engine cực kỳ mạnh.
  • Giản lược cách viết các thẻ HTML, không sợ mở thẻ ở chỗ này mà quên đóng thẻ ở chỗ khác.
  • Có thể kế thừa và tái sử dụng (không phải copy/paste).
  • Vì mang tính kế thừa, nên sửa một chỗ, có thể cập nhật ở những chỗ khác mà không sợ thiếu sót.
  • Điều quan trong cuối cùng là JADE/PUG thông minh hơn HTML.

API docs

Cài đặt, thiết lập môi trường

Yêu cầu: NodeJS

npm install -g pug pug-cli

Tạo một file index.pug như sau:

doctype html
*html(lang="en")
**head
***title Index
**body
***h1 Hello World

Sau đó mở command lên chạy lệnh

pug index.pug -p

Kết quả

[!DOCTYPE html]
*[html lang="en"]
**[head]
***[title]Index[/title]
**[/head]
**[body]
***[h1]Hello World[/h1]
**[/body]
*[/html]

JADE/PUG khá là nhạy cảm với indent là tab hay space, tab thì tab hết còn space thì là space hết (space có thể 2-space hoặc 4-space).

Bạn có thể compile bằng CMD như cách ở trên tuy nhiên trên thực tế khi làm project thì chúng ta sẽ sử dụng Node để render hoặc dùng Gulp/Webpack/Grunt ... để compile (tuỳ theo nhu cầu thực tế). Phần này sẽ được nói chi tiết hơn trong bài viết khác.

Cú phápCode (*.pug)Compile (*.html)
Comment
// Bao Nguyen
p Hello


Hello
Unbuffered Comment
//- Bao Nguyen
p Hello
Hello
Block Comment
// Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam deserunt cumque modi accusamus expedita quis mollitia iste.
p Hello


Hello
Plain Text
p This is plain old text content.
This is plain old text content.
Attributes
a(href='google.com') Google
a#main.abc(href='google.com', class="active") Google
Google
Google
Attributes
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
[body class="authed"][/body]
Iteration
ul
*each val, index in {1:'one',2:'two',3:'three'}
**li= index + ': ' + val
    
*
  • 1: one
    • 
*
  • 2: two
    • 
*
  • 3: three
    •
Includes

index.pug

doctype html
*html
**include includes/head.pug
**body
***h1 My Site
***p Welcome to my super lame site.
***include includes/foot.pug

includes/head.pug

head
*title My Site
*script(src='/js/jquery.js')
*script(src='/js/app.js')

includes/foot.pug

footer#footer
*p Copyright (c) foobar

Kết quả

[!DOCTYPE html]
*[html]

**[head]
***[title]My Site[/title]
***[script src="/js/jquery.js"][/script]
***[script src="/js/app.js"][/script]
**[/head]

**[body]
***[h1]My Site[/h1]
***[p]Welcome to my super lame site.[/p]
***[footer id="footer"]
****[p]Copyright (c) foobar[/p]
***[/footer]
**[/body]

*[/html]
TOP