Giới thiệu JADE ( Template Engine ) Part 1

Bài đăng này đã không được cập nhật trong 8 năm

1.Jade là gì ?

Jade là 1 template engine giúp việc markup HTML trở nên nhanh chóng hơn nhiều lần so với cách viết bình thường. Bạn không cần phải quan tâm đến việc mở đóng thẻ rắc rối hay phải viết lại nhiều lần 1 đoạn HTML.

Jade

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.

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

Như ví dụ trên chúng ta có thể thấy rõ với Jade việc markup HTML đơn giản và gọn đến mức nào rồi đúng không ?

2.Cách cài đặt

Có 2 cách, thứ nhất bạn có thể dùng Node js, sau khi install node bạn mở Command Prompt và install bằng dòng lệnh : npm install jade --global

Cách thứ 2 là dùng phần mềm, như mình dùng Prepros, đấy là phần mềm biên dịch nhiều ngôn ngữ như JADE, SASS, LESS,... và hoàn toàn miễn phí

Vậy là đã kết thúc phần 1 trong series về Jade của mình, trong phần 2 mình sẽ đi vào việc giới thiệu cấu trúc của 1 file jade để áp dụng vào project.

Cám ơn bạn đã quan tâm, hẹn gặp lại !

Jade

1.Jade là gì ?

Jade

2.Cách cài đặt

Mục lục