Hướng dẫn viết HTML bằng Jade hiệu quả
Jade là gì? Jade là một template engine cho Node.js, nó khá đơn giản và biên dịch thành HTML và cực kì hữu ích cho FE developer. JADE giúp chúng ta tạo ra những đoạn code HTML nhanh hơn, sạch hơn ,DRY hơn. Cú pháp cơ bản 1: Tags Text div address i strong ==> output: ...
Jade là gì?
- Jade là một template engine cho Node.js, nó khá đơn giản và biên dịch thành HTML và cực kì hữu ích cho FE developer.
- JADE giúp chúng ta tạo ra những đoạn code HTML nhanh hơn, sạch hơn ,DRY hơn.
Cú pháp cơ bản
1: Tags
Text
div address i strong
==> output:
<div> <address></address><i></i><strong></strong> </div>
hoặc
//thêm một đoạn text ở sau thẻ được phân cách bởi một dấu space: p Hello Word! ==> <p> Hello World </p>
hoặc bạn cũng có thể dùng "|" và "." ngay sau thẻ tag cho khối text để dễ nhìn .
ví dụ:
p
|Với số lượng text nhiều thì
|để trên một dòng thật khó nhìn
==> <p>
Với số lượng text nhiều thì
để trên một dòng thật khó nhìn
</p>
Tag lồng nhau:
.wrapper
p Hello World
==> <div class="wrapper">
<p>Hello World</p>
</div>
2: Inline html
p.
This is a <b>demonstration</b> of Jade's text blocks
==> <p>This is a <b>demonstration</b> of Jade's text blocks</p>
3: Attributes
p(id="hello") Hello Word!
==> <p id="hello">Hello World</p>
// hoặc có thể thêm nhiều thuộc tính ở đây:
p(id="hello", class="world", site="kipalog") Hello World
==> <p id="hello" class="world" site="kipalog">Hello World</p>
// Xem các object như thuộc tính:
p(class=['first-class','another-class', 'last-class'])
==> <p class="first-class another-class last-class"></p>
// Có thể như một đối tượng json:
p(data-myattr={numbers: [2,4, 8], string: 'this is a string'})
==> <p data-myattr={numbers: [2,4, 8], string: 'this is a string'}></p>
4: Comment
Cú pháp comment giống css, javascript:
//a single line comment ==>
5: Khối mở rộng
ul
li.first
a(href='#') foo
li
a(href='#') bar
li.last
a(href='#') baz
6: Doctype
doctype html ==><!DOCTYPE html>
Tổng quát
Mọi cú pháp viết HTML đã tinh giản hết, không còn phải đóng mở các thẻ (tag), không phải thêm các từ khóa cơ bản như: class, div, id..., các tag bọc lồng nhau đơn giản là dùng các khoảng trắng để thể hiện (thường người ta dùng tab cho dễ nhìn), đó là bạn thụt lề các tag này vào, ra là được. Để dễ hình dung, chúng ta nhìn vào ví dụ sau:
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is a terse and simple templating language with a
strong focus on performance and powerful features.
Chuyển thành HTML sẽ như sau:
<!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> if (foo) bar(1 + 5) </script> </head> <body> <h1>Jade - node template engine</h1> <div id="container" class="col"> <p>You are amazing</p> <p>Jade is a terse and simple templating language with a strong focus on performance and powerful features.</p> </div> </body> </html>
Cài đặt
Jade rất dễ sử dụng từ viết tag, chèn text, javascript, link, add thuộc tính, rồi đặt id, class đặc biệt thú vị đó là cho sử dụng vòng lặp, hằng biến, điều kiện cũng như dữ liệu từ bên ngoài.
Tạo một thư mục JadeEx, sau đó cài đặt module của jade bằng lệnh:
$node install jade
Tạo hai file sau:
template.jade: Là file jade mà chúng ta sẽ code jade vào đó.
index.js: Là file mà chúng ta sẽ build ra html từ template là xuất ra trình duyệt.
Ở file index.js, nhiệm vụ là sử dụng jade module, đọc từ template ra và xuất ra html, chúng ta đơn giản chỉ dùng đoạn code sau:
var jade = require('jade'); var html = jade.renderFile('template.jade'); var http = require("http"); http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/html;charset=utf-8"}); response.write(html); response.end(); }).listen(8080);
Tại file template thêm đoạn code sau:
doctype html
html(lang='en')
head
title Jade
body
h1 Jade - node template engine
Output -> HTML sẽ là:
<!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> </head> <body> <h1>Jade - node template engine</h1> </body> </html>
