Pug là gì

Bài viết giải đáp làm cho project static website mang lại học tập viên lớp Web Frontover, học phần HTML CSS JS cơ bản.Bạn vẫn xem: Pug là gì

Note: Pug sống đó là 1 View Template Engine (chđọng chưa phải thương hiệu 1 các loại chó), có thể dùng làm việc cả phía Server lẫn Client. Trong nội dung bài viết này đã lí giải áp dụng Pug phía client mang lại Frontover Dev.

Bạn đang xem: Pug là gì

Tạo khung project

Sau Khi đã thi công dứt giao diện trang web, chúng ta sẽ bắt đầu chế tạo size project. Ví dụcấu tạo thường thì của một project web tĩnh:


*

Với cấu trúc bên trên bọn họ có mỗi tệp tin HTML tương xứng với cùng một trang tĩnh. Trong cùng 1 trang web thì các trang tĩnh hoàn toàn có thể cần sử dụng thông thường những yếu tắc giống như nhau (header, footer, sidebar, ...), dẫn đến việc code bị trùng lặp khó khăn duy trì. Trong 1 trang tĩnh cũng hoàn toàn có thể tất cả con số code rất cao (ví dụ trang chủ, landing page) thì cũng biến thành khó khăn đọc cùng duy trì. Do kia họ nên chia nhỏ tuổi những tệp tin html ra tựa như nlỗi Khi phân tách nhỏ các file CSS với Javascript. Ví dụ:


*

Mặc định trong HTML ko được cho phép nhúng 1 file HTML khác, trừ khi sử dụng Javascript thao tác làm việc cùng với DOM. Và Pug để giúp chúng ta thao tác này bằng cách code HTML theo cú pháp của Pug (ngắn gọn rộng HTML thuần và chất nhận được include file) kế tiếp dùng pug-cli nhằm chuyển từ bỏ Pug template sang code HTML. Trong thời điểm này kết cấu project sẽ sở hữu được dạng nlỗi sau:


*

Cài đặt

Để sử dụng Pug chúng ta đã buộc phải download để trên thiết bị qua 2 bước sau:

- Bước 1:Cài đặt NodeJS bên trên tranghttps://nodejs.org, hãy lựa chọn bản LTS (Long TermSupport- Recommended for most users). Sau Lúc thiết lập dứt chúng ta sẽ có luôn npm dùng để làm cài những tlỗi viện rất có ích vào Việc cải cách và phát triển website, trong số đó tất cả Pug.

- Bước 2:Cài đặt Pug qua NPM (để ý tại chỗ này bản thân thiết lập pug-cli nhằm chạy những lệnh của pug qua comm& line):

npm install -g pug-cli

Sử dụng pug-cli

- Tạo size project như thông thường, nhưng không tồn tại tệp tin HTML, họ sẽ code bởi template engine Pug rồi cần sử dụng pug-cli nhằm tạo thành những tệp tin HTML.

Xem thêm: Cái Đầu Lạnh Nghĩa Là Gì - Wikipedia:Giữ Một Cái Đầu Lạnh

- Tạo thêm 1 thư mục là template (hoặc đánh tên khác cũng rất được, ko bắt buộc). Tlỗi mục này sẽ cất những file template Pug, còn file HTML được tạo nên thì vẫn nằm tại vị trí bên ngoài nlỗi thông thường. Trong thư mục template cũng có thể chia nhỏ dại ra thành những thỏng mục con nhằm gom team những file ví như nhỏng con số file bự (ví dụ ở đây bản thân tạo thành thêm thư mục template-part nhằm cất các template nhỏ tuổi là những yếu tắc nhỏ tuổi trong 1 trang).

- Sau khi chế tác chấm dứt các tệp tin .pug thì bọn họ bật terminal trên thư mục gốc của project cùng chạy lệnh sau để bật pug-cli:

pug -w ./template -o ./ -PLúc chạy lệnh thành công xuất sắc thì chương trình đang theo dõi và quan sát biến đổi sinh sống file .pug với trường đoản cú độngrender ra file .html nghỉ ngơi bên phía ngoài. Crúc ý các options vào lệnh trên:

lấy ví dụ như code

- Tạo 1 file là layout.pug đặt trong tlỗi mục template/template-part, file này đã là size giao diện bình thường mang lại cục bộ website (nếu website có nhiều mẫu mã layout thì tạo thành các file layout):


*

Cú pháp của template tương tự code HTML dẫu vậy tối giản đi, chỉ việc thương hiệu thẻ, không yêu cầu thẻ đóng, cơ mà nên để ý thụt chiếc đúng. Ngoài ra có thể cần sử dụng include để nhúng câu chữ 1 file này vào file không giống (ví dụ nhúng câu chữ thực đơn.pug với footer.pug vào layout.pug).

Xem thêm: Làm Thế Nào Để Cài Đặt Microsoft Office 2013, Cài Office 2013

- Tạo 1 tệp tin là index.pug bên trong tlỗi mục template(Home, đang render ra trang index.html). Trang này "kế thừa" (extends)layout bên trên và chỉ còn biến hóa câu chữ các block:


*

- Sau lúc tạo thành xong những trang thì chạy lại lệnh pug nlỗi chỉ dẫn phần thiết lập. Nếu sẽ chạy rồi thì nên tắt đi chạy lại lúc có thêm tệp tin template mới bằng cách bnóng Ctrl + C

Xong phần cài đặt và cấu hình thiết lập project, phần tiếp theo sau là học qua một số cú pháp cơ bạn dạng của Pug (không cần biết hết) với "cắt HTML CSS trường đoản cú bối cảnh gồm sẵn" các bạn hãy từ làm cho nốt nhé, nội dung bài viết cho đó là thừa lâu năm rồi.


Chuyên mục: Hỏi Đáp