Pug là gì

      519

Bài viết chỉ dẫn có tác dụng project static web mang đến học viên lớp Web Frontend, học phần HTML CSS JS cơ phiên bản.

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

Note: Pug ở đó là 1 View Template Engine (chđọng chưa phải tên 1 nhiều loại chó), hoàn toàn có thể sử dụng ở cả phía Server lẫn Client. Trong nội dung bài viết này đã giải đáp áp dụng Pug phía client đến Frontend Dev.

Tạo size project

Sau Lúc sẽ xây dựng hoàn thành bối cảnh website, chúng ta sẽ bắt đầu thành lập size project. Ví dụcấu tạo thông thường của 1 project web tĩnh:

*

Với kết cấu bên trên chúng ta bao gồm mỗi file HTML tương xứng với 1 trang tĩnh. Trong thuộc 1 website thì những trang tĩnh hoàn toàn có thể cần sử dụng phổ biến các thành phần như thể nhau (header, footer, sidebar, ...), dẫn đến sự việc code bị trùng lặp cạnh tranh bảo trì. Trong 1 trang tĩnh cũng có thể bao gồm số lượng code không hề nhỏ (ví dụ trang chủ, landing page) thì cũng trở thành nặng nề gọi cùng gia hạn. Do kia họ buộc phải phân chia nhỏ tuổi các tệp tin html ra tương tự như nlỗi Lúc phân chia bé dại các tệp tin CSS và Javascript. Ví dụ:

*

Mặc định trong HTML không được cho phép nhúng 1 file HTML không giống, trừ khi sử dụng Javascript thao tác làm việc cùng với DOM. Và Pug để giúp họ làm việc này bằng phương pháp code HTML theo cú pháp của Pug (nđính thêm gọn hơn HTML thuần và chất nhận được include file) sau đó cần sử dụng pug-cli để đưa tự Pug template quý phái 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 họ đã cần cài đặt bỏ trên thiết bị qua 2 bước sau:

- Cách 1:Cài đặt NodeJS trên tranghttps://nodejs.org, hãy chọn phiên bản LTS (Long TermSupport- Recommended for most users). Sau khi tải kết thúc bọn họ sẽ có được luôn npm dùng để mua những tlỗi viện khôn xiết bổ ích trong vấn đề phát triển web, trong số đó gồm Pug.

- Bước 2:Cài đặt Pug qua NPM (chú ý ở chỗ này mình cài pug-cli nhằm chạy những lệnh của pug qua command line):

npm install -g pug-cli

Sử dụng pug-cli

- Tạo form project nlỗi bình thường, nhưng không có tệp tin HTML, bọn họ vẫn code bằng template engine Pug rồi cần sử dụng pug-cli để tạo ra các tệp tin HTML.

- Tạo thêm một tlỗi mục là template (hoặc đánh tên khác cũng rất được, ko bắt buộc). Thỏng mục này vẫn đựng các tệp tin template Pug, còn tệp tin HTML được tạo nên thì đang nằm ở bên ngoài nhỏng thông thường. Trong thỏng mục template cũng có thể phân chia nhỏ tuổi ra thành những thỏng mục nhỏ để gom nhóm các tệp tin trường hợp như số lượng tệp tin Khủng (ví dụ tại đây bản thân sản xuất thêm thỏng mục template-part nhằm chứa những template bé dại là những yếu tắc nhỏ dại trong một trang).

- Sau Lúc tạo nên hoàn thành các tệp tin .pug thì họ bật terminal tại thỏng mục nơi bắt đầu của project và chạy lệnh sau nhằm bật pug-cli:

pug -w ./template -o ./ -Pkhi chạy lệnh thành công thì lịch trình đang quan sát và theo dõi thay đổi làm việc file .pug cùng từ bỏ độngrender ra tệp tin .html sinh sống phía bên ngoài. Crúc ý những options vào lệnh trên:

-w (watch - phần lớn tệp tin buộc phải quan sát và theo dõi biến hóa nhằm render ra HTML), vào trường hợp này là tất cả các tệp tin vào tlỗi mục template.

Xem thêm: Cách Chơi Vua Tam Quốc Hấp Dẫn Mới Nhất, Vua Tam Quốc Hấp Dẫn Mới Nhất

-o (output - vị trí xuất ra hầu như file HTML được render trường đoản cú file pug), trong ngôi trường phù hợp này là thỏng mục bây giờ (thư mục cội của project, địa điểm chạy lệnh trên).-P (pretty - xuất ra HTML bao gồm format code). Option này hoàn toàn có thể bỏ đi nếu không yêu cầu format rất đẹp, code xuất ra vẫn dồn hết lại thành 1 loại.

lấy ví dụ như code

- Tạo 1 file là layout.pug đặt trong thỏng mục template/template-part, tệp tin này vẫn là size bối cảnh thông thường cho toàn bộ website (ví như website có không ít thứ hạng layout thì tạo ra các file layout):

*

Cú pháp của template tựa như code HTML mà lại tối giản đi, chỉ cần thương hiệu thẻ, ko phải thẻ đóng góp, nhưng nên chú ý thụt dòng đúng. Ngoài ra hoàn toàn có thể cần sử dụng include để nhúng nội dung 1 tệp tin này vào tệp tin khác (ví dụ nhúng câu chữ menu.pug và footer.pug vào layout.pug).

- Tạo 1 tệp tin là index.pug bên trong thư mục template(Home, sẽ render ra trang index.html). Trang này "kế thừa" (extends)layout bên trên còn chỉ đổi khác ngôn từ các block:

*

- Các trang không giống thì làm cho giống như Home.

- Sau lúc sinh sản xong xuôi những trang thì chạy lại lệnh pug nlỗi hướng dẫn phần setup. Nếu vẫn chạy rồi thì nên tắt đi chạy lại Khi gồm thêm file template new bằng cách bấm Ctrl + C

Xong phần setup và tùy chỉnh cấu hình project, phần tiếp theo là học tập qua một số cú pháp cơ bạn dạng của Pug (ko nên biết hết) với "cắt HTML CSS trường đoản cú đồ họa có sẵn" chúng ta hãy tự làm cho nốt nhé, bài viết đến đây là quá dài rồi.