[HTML] Thử code HTML nhanh hơn bằng cách sử dụng Pug

    Chào mọi người, chắc hẳn những bạn đang đọc bài viết này, ai cũng từng có lúc phải ngồi code 'chay' html hoặc css để tạo ra 1 trang web.

    Có những lúc bạn phải tạo ra vài chục cái thumbnail chứa chi tiết sản phẩm và bạn phải copy thumbnail đó vài chục lần.

    Hay đôi khi bạn cảm thấy đến 'nhũn não' vì phải tìm ra thẻ div nào đó mà mình quên thẻ đóng.

    Và bạn muốn html cũng có thể được ưu ái như css, có riêng các preprocessor để code 1 cách hiệu quả và đỡ nhàm chán hơn.

    Vậy thì còn ngần ngại gì mà không liếc sơ qua bài này và tìm hiểu về Pug - 1 template engine (công cụ giúp tách mã HTML thành các phần nhỏ hơn vả có thể sử dụng lại trên nhiều tập tin HTML).

1. Cài Đặt

    cú pháp rất đơn giản thôi:
$ npm install pug -g

2 Từ .pug thành .html

    vì bạn đã cài đặt pug nên dĩ nhiên giờ bạn sẽ viết vào file .pug
và thử copy đoạn code sau vào thử nào

doctype html
html
  head
  body
    p hello Pug, you're a joke to me

    Và làm sao để nó dịch ra html nhỉ?
Mở terminal, điều hướng đến thư mục chứa file bạn muốn dịch ra html, gõ với cú pháp như sau:
Cách 1:
$ pug <tên file của bạn>.pug

    ex:
pug index.js

    Cách 2:
$ pug -w <đường dẫn tới file của bạn> -o <đường dẫn tới folder bạn muốn đặt file html>.pug

    ex:
pug -w ./ -o ./html

    và sau khi dịch ra, bạn sẽ nhận được đoạn code html như sau:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p>hello Pug, you're a joke to me</p>
  </body>
</html>

3. Sử dụng

    Không như html thay vì dùng thẻ đóng hoặc mở, pug sử dụng thụt đầu dòng để phân biệt tag nào lồng ở trong tag nào
Điều đó làm cho code đỡ dài dòng hơn và rõ ràng hơn ex:

div
    p Đây là thẻ <p> không có thẻ <b> ở trong
    p Đây là thẻ <p> 
        b có thẻ <b> ở trong

    dịch ra html sẽ là:

<div>
    <p>Đây là thẻ <p> không có thẻ <b> ở trong</p>
    <p>Đây là thẻ <p><b> có thẻ <b> ở trong</b></p>
</div>

    và khi bạn muốn viết nhiều dòng cho 1 thẻ p

p.
    đây là thẻ p 
    có nhiều dòng

    dịch ra là:

<p>
    đây là thẻ p 
    có nhiều dòng
</p>

    Thêm id và class như thế nào trong pug???
Cũng khá là đơn giản, ví dụ thẻ p có class là blue và strong thì sẽ viết là p.blue.strong
hoặc p(class='blue strong') hoặc p.blue(class='strong'). Và nếu là id thì sẽ là p#blue#strong

    Thay đổi attribute của tag thì thế nào???
Mình sẽ lấy 1 ví dụ về tag input

input(type='checkbox' name='agreement' checked)

    dịch ra html sẽ là

<input type="checkbox" name="agreement" checked="checked" />

4. Áp dụng logic vào pug

    Nếu bạn muốn apply code của javascript vào trong pug thì trước tiên bạn phải có dấu - ở trước
ex1 :

const user = {name: 'pug', id: '123456'}

    ex2 :

 const user1 = {name: 'alaska', id: '123456'}
  const user2 = {name: 'husky', id: '123456'}

    sử dụng IF...ELSE:

.container
  if user !== {}
    h2.green= user.name
  else 
    h2.red Không có userdata
    p.description.
      cần user có thông tin
      Xin hãy đăng nhập

    html:

<div class="container">
  <h2 class="green">pug</h2>
</div>

    sử dụng SWITCH...CASE

case user.name
  when 'pug'
    p chó ngoan
  when 'alaska'
    p con ngáo
  default
    p chó hư

    html:

<p>chó ngoan</p>

    Sử dụng FOR loop

const arr = [1,2,3,4,5]
  each val, i in arr
    p= val + ': index = ' + i

    html:

<p>1: index = 0</p>
<p>2: index = 1</p> 
<p>3: index = 2</p> 
<p>4: index = 3</p> 
<p>5: index = 4</p> 

5. mixins

    Mixins: là tính năng tiện ích nhất của Pug, giúp tạo ra các khối có thể sử dụng lại (reusable block code). ex:

//- Khai báo
mixin list(arr)
 ul
    each val in arr  
        li= val
//- Use
// order = ['first', 'second', 'third']
+list(order)

    html:

<ul>
     <li>first</li>
     <li>second</li>
     <li>third</li>
</ul>

6. Inheritance: extends and block

    Tính năng thừa kế template của pug được sử dụng với thông qua 2 từ khóa là extends và block
Được sử dụng cụ thể như sau

//- Bạn có 1 layout mẫu và muốn sử dụng nhiều chỗ
//- defaultLayout.pug
html
  head
    title My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

    Để sử dụng lại defaultLayout.pug trong 1 layout khác, ví dụ như index.pug, ta dùng extends

//index.pug
extends defaultLayout.pug

//- thay block scripts của defaultLayout.pug bằng 1 block script khác
block scripts
     script(src='/jquery.js')
    script(src='/pets.js')
//- nếu ta không viết lại cho block scripts thì index.js sẽ dùng của defaultLayout.js như mặc định

    Mình vừa giới thiệu đến cho mọi người 1 số thành phần cơ bản của PUG- template engine. Bài viết cũng đã khá dài nên mình tạm thời dừng tại đây, nếu trong bài viết mình có thiếu sót gì mong các bạn góp ý để mình hoàn thiện hơn trong những bài viết tới

    Bài viêt có tham khảo https://pugjs.org/api/getting-started.html

Nguồn: Viblo

Bình luận
Vui lòng đăng nhập để bình luận
Một số bài viết liên quan