Chủ đề: TIN HỌC / Hãy thử Code web tĩnh dễ hơn với Pug

Hãy thử Code web tĩnh dễ hơn với Pug
Sau đây, chúng tôi xin hướng dẫn bạn làm project static web cho học viên lớp Web Frontend, học phần HTML CSS JS cơ bản.
 
 
Xin chú ý: Pug ở đây là 1 View Template Engine (chứ không phải là 1 chú chó), có thể dùng ở cả phía Server lẫn Client. Trong bài viết này sẽ hướng dẫn sử dụng Pug phía client cho Frontend Dev.
 
Xem thêm: lập trình php
 
Tạo khung project
 
 
Khi giao diện website đã hoàn thành xong, chúng ta bất đầu xây dựng khung project. Ví dụ, cấu trúc thông thường của project web tĩnh:
 
Xem thêm: lập trình java
 
Với cấu trúc trên chúng ta có mỗi file HTML tương ứng với 1 trang tĩnh. Trong cùng 1 website thì các trang tĩnh có thể dùng chung các thành phần giống nhau (header, footer, sidebar, ...), dẫn đến việc code bị trùng lặp khó bảo trì. Trong 1 trang tĩnh cũng có thể có số lượng code rất lớn (ví dụ trang chủ, landing page) thì cũng sẽ khó đọc và bảo trì. Do đó chúng ta nên chia nhỏ các file html ra tương tự như khi chia nhỏ các file CSS và Javascript. Ví dụ:
 
Mặc định trong HTML không cho phép nhúng 1 file HTML khác, trừ khi dùng Javascript thao tác với DOM. Và Pug sẽ giúp chúng ta làm việc này bằng cách code HTML theo cú pháp của Pug (ngắn gọn hơn HTML thuần và cho phép include file) sau đó dùng pug-cli để chuyển từ Pug template sang code HTML. Lúc này cấu trúc project sẽ có dạng như sau:
 
Cài đặt
 
Để sử dụng Pug chúng ta sẽ cần cài đặt lên máy qua 2 bước sau:
 
- Bước 1: Cài đặt NodeJS trên trang nodejs.org, nên chọn bản LTS (Long Term Support - Recommended for most users). Sau khi cài xong chúng ta sẽ có luôn npm dùng để cài các thư viện rất hữu ích trong việc phát triển web, trong đó có Pug.
 
- Bước 2: Cài đặt Pug qua NPM (chú ý ở đây mình cài pug-cli để chạy các lệnh của pug qua command line):
 
Sử dụng pug-cli
 
- Tạo khung project như bình thường, nhưng không có file HTML, chúng ta sẽ code bằng template engine Pug rồi dùng pug-cli để tạo ra các file HTML.
 
- Tạo thêm 1 thư mục là template (hoặc đặt tên khác cũng được, không bắt buộc). Thư mục này sẽ chứa các file template Pug, còn file HTML được tạo ra thì sẽ nằm ở bên ngoài như bình thường. Trong thư mục template cũng có thể chia nhỏ ra thành nhiều thư mục con để gom nhóm các file nếu như số lượng file lớn (ví dụ ở đây mình tạo thêm thư mục template-part để chứa các template nhỏ là các thành phần nhỏ trong 1 trang).
 
- Sau khi tạo xong các file .pug thì chúng ta bật terminal tại thư mục gốc của project và chạy lệnh sau để bật pug-cli:
 
pug -w ./template -o ./ -P
 
Khi chạy lệnh thành công thì chương trình sẽ theo dõi thay đổi ở file .pug và tự động render ra file .html ở bên ngoài. Chú ý các options trong lệnh trên:
 
-w (watch - những file cần theo dõi thay đổi để render ra HTML), trong trường hợp này là tất cả các file trong thư mục template.
 
-o (output - nơi xuất ra những file HTML được render từ file pug), trong trường hợp này là thư mục hiện tại (thư mục gốc của project, nơi chạy lệnh trên).
 
-P (pretty - xuất ra HTML có format code). Option này có thể bỏ đi nếu không cần format đẹp, code xuất ra sẽ dồn hết lại thành 1 dòng.
 
Ví dụ code
 
- Tạo 1 file là layout.pug đặt trong thư mục template/template-part, file này sẽ là khung giao diện chung cho toàn bộ website (nếu website có nhiều kiểu layout thì tạo nhiều file layout):
 
Cú pháp của template tương tự code HTML nhưng tối giản đi, chỉ cần tên thẻ, không cần thẻ đóng, nhưng cần chú ý thụt dòng đúng. Ngoài ra có thể dùng include để nhúng nội dung 1 file này vào file khác (ví dụ nhúng nội dung menu.pug và footer.pug vào layout.pug).
 
- Tạo 1 file là index.pug nằm trong thư mục template (trang chủ, sẽ render ra trang index.html). Trang này "kế thừa" (extends) layout trên và chỉ thay đổi nội dung các block:
 
- Các trang khác thì làm tương tự trang chủ.
 
- Sau khi tạo xong các trang thì chạy lại lệnh pug như hướng dẫn phần cài đặt. Nếu đã chạy rồi thì phải tắt đi chạy lại khi có thêm file template mới bằng cách bấm Ctrl + C
 
 
Xong phần cài đặt và thiết lập project, phần tiếp theo là học qua 1 số cú pháp cơ bản của Pug (không cần phải biết hết) và "cắt HTML CSS từ giao diện có sẵn" các bạn hãy tự làm nốt nhé, bài viết đến đây là quá dài rồi.







Trang: 1  


Trả lời nhanh

Các thảo luận cùng chuyên mục Các thảo luận cùng chuyên mục

 Tiêu đềBài cuốiTrả lờiXem
Lý do lập trình viên bị từ chối tuyển dụng ?
bởi thetvbytesoft
9/8/2019 7:10 PM
bởi thetvbytesoft
05
Cosmos cho ra đời 3 ngôn ngữ mã hóa
bởi thetvbytesoft
9/6/2019 7:10 PM
bởi thetvbytesoft
09
Amazon tuyển dụng kỹ sư blockchain
bởi thetvbytesoft
9/5/2019 6:45 PM
bởi thetvbytesoft
054
Giá trị Blockchain lên hơn tới 3.1 tỷ đô la vào năm 2030
bởi thetvbytesoft
9/4/2019 6:44 PM
bởi thetvbytesoft
062
IBM cung cấp Blockchain Platform mới để quản lý dữ liệu
bởi thetvbytesoft
9/3/2019 6:54 PM
bởi thetvbytesoft
053

Kiểm thử dễ dàng hơn với EasyMock

Bắt chước các giao diện, các lớp và các ngoại lệ bằng khung công tác đối tượng giả (mock-object) mã nguồn mở Elliotte Rusty Harold, Giáo sư, Polytechnic University Tóm tắt: Hãy cùng Elliotte Rusty Harold xem xét một số kiểm thử đơn vị khó thực hiện, được làm cho trở nên dễ dàng hơn thông qua... Xem chi tiết

Trồng rau đậu, hoa màu


Cây làm thuốc, con làm thuốc

Rau hoa quả làm thuốc (Thảo dược)


Nước tưới và tưới nước

Tưới nước và tiết kiệm nước tưới

Bảo quản, chế biến sau thu hoạch



































NÔNG HỌC TRÊN FACEBOOK
HÃY KẾT NỐI VỚI NÔNG HỌC
Giỏ hàng

Bạn chưa bỏ gì vào giỏ hàng

Lịch sử hóa đơn

GIÁ NÔNG SẢN
Lợn hơi
55,000/Kg
Điều hạt thô
26,000/Kg
Đường Biên Hoà (loại xuất khẩu)
21,000/Kg
Muối hạt
5,500/Kg
Muối iốt
6,000/Kg
Gà Tam Hoàng hơi
72,000/Kg
Gà Công nghiệp hơi
45,000/Kg
Thịt nạc đùi bò
220,000/Kg
Thịt bò thăn
260,000/Kg
Thịt lợn đùi
85,000/Kg
Thịt nạc
95,000/Kg
Trứng vịt
34,000/Kg
Trứng gà công nghiệp
25,000/Kg
Vừng vàng loại 1
65,000/Kg
Đậu đen loại 1
50,000/Kg

Xem giá các mặt hàng khácXem giá các mặt hàng khác

Bọc răng sứ mức giá bao nhiêu tiền
by hiennguyenthu
Ngoại hình nội thất phòng khách ngập tràn ánh sáng cho chung cư
by giaydep2306
Giá niềng răng hàm trên bao nhiêu tiền? Chỉ hàm trên?
by tieuvu2000
Niềng răng thưa giá bao nhiêu tiền? Bảng giá Nha Khoa SunShine
by tieuvu2000
Niềng răng đẹp cỡ nào? Đẹp hơn lên nhiều không?
by tieuvu2000
HOA LAN BÍ KÍP

Hoa Lan Bí Kíp #35
Chiêu số 35: Nên thay chậu ít nhất mỗi 2 năm một lần và chỉ tưới sau một tuần lễ.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #25
Chiêu số 25: Dùng hoa lan làm quà tặng thật không công bằng với cây và người nhận (chủ mới), nếu họ không biết chăm sóc cây



theo hoalanvietnam.org

Hoa Lan Bí Kíp #82
Chiêu số 82: Khi tưới phải đợi cho khô rồi mới tưới và tưới cho thật đẫm, hoặc tưới đi rồi tưới lại.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #13
Chiêu số 13: Cây lan có đốm, chấm hay sọc đen, nâu chưa chắc là đã bị vi rút, nhiểm trùng hay nấm nếu cây non vẫn xanh tốt.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #38
Chiêu số 38: Lợi dụng sự giảm giá, hãy mua những cây lan hoa đã tàn, ta sẽ có những cây Hồ-Điệp khác nhau. Suốt năm bạn có đủ bông hoa đẹp khoe sắc.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #42
Chiêu số 42: Cymbidiums thích ẩm nhưng lại ghét nước, và thích khô ráo nhưng lại ghét vừa khô vừa nóng.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #63
Chiêu số 66: Nếu bạn muốn khử trùng mà không dùng đến lửa thì dùng 10% thuốc tẩy giặt Chlorox (bleach) hay 3% nước Oxy già (H2O2) pha với nước.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #80
Chiêu số 80: Lan không ưa không khí tù hãm và ưa có sự lay chuyển không khí cho nên cần một chiếc quạt nhỏ có thể xoay chuyển được (oscillating).



theo hoalanvietnam.org

Hoa Lan Bí Kíp #69
Chiêu số 69: Nhúng những đồ dùng để cắt cây vào sữa nước sẽ giảm lây Virus.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #39
Chiêu số 39: Rễ lan được coi như buồng phổi. Chúng cũng cần không khí để thở. Giữ cho chúng đừng bị ngộp trong đất trồng.



theo hoalanvietnam.org

chợ nông sản

Hãy khám phá chức năng mới của chúng tôi: tạo gian hàng, đăng sản phẩm để rao bán trực tuyến một cách miễn phí.

Cơ hội để bạn mở rộng kinh doanh, tìm kiếm đối tác và tăng doanh số nhanh nhất.

Bạn cũng đang kinh doanh trong lĩnh vực nông sản?

Tham gia ngay

KỸ THUẬT THỦY SẢN

Kỹ thuật nuôi tôm



Kỹ thuật nuôi cá


Các chuyên đề khác

Video clip nông nghiệp, thủy sản
Hỏi - đáp, thảo luận
Tin tức về các kỹ thuật mới
Các cơ quan khuyến nông - ngư
Các cơ sở đào tạo & nghiên cứu
Sách, giáo trình và website

WEBSITE LIÊN KẾT