12/08/2018, 14:12

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.png

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>
0