[HTML] Thử Code HTML Nhanh Hơn Bằng Cách Sử Dụng Pug - Viblo

Trang chủ » Cài đặt File Html » [HTML] Thử Code HTML Nhanh Hơn Bằng Cách Sử Dụng Pug - Viblo

Có thể bạn quan tâm

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

Từ khóa » Cài đặt File Html