Code html không nhàm chán hơn với 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) (U・ᴥ・U) 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

    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> 
  1. ໒( ̿・ ᴥ ̿・ )ʋ 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
(❍ᴥ❍ʋ) V●ω●V V✪ω✪V V✪⋏✪V ∪ ̿–⋏ ̿–∪ ∪・ω・∪ ໒( ●ᴥ ●)ʋ ໒( = ᴥ =)ʋ ໒( ̿・ ᴥ ̿・ )ʋ ໒( ̿❍ ᴥ ̿❍)ʋ ▽・ェ・▽ノ”
Bài viêt có tham khảo https://pugjs.org/api/getting-started.html