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
010
Cosmos cho ra đời 3 ngôn ngữ mã hóa
bởi thetvbytesoft
9/6/2019 7:10 PM
bởi thetvbytesoft
016
Amazon tuyển dụng kỹ sư blockchain
bởi thetvbytesoft
9/5/2019 6:45 PM
bởi thetvbytesoft
066
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
064
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
058

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

Địa chỉ trung tâm tiếng anh tốt ở bắc ninh
by hacentre
Niềng răng mất bao lâu và bao nhiêu tiền ?
by boygarung
Thế nào là một đôi GIÀY DA Oxford?
by camnguyen194
Thùng rác 60 Lít có kích thước 47x42x65cm
by camnguyen194
Phẫu thuật mí mắt dưới
by cottonbou
HOA LAN BÍ KÍP

Hoa Lan Bí Kíp #64
Chiêu số 63: Dùng nhiều phân có hại hơn là dùng vừa đủ. Đừng tưởng bón quá nhiều phân là làm cho cây mau lớn mà là giết cây



theo hoalanvietnam.org

Hoa Lan Bí Kíp #6
Chiêu số 6: Mỗi vườn, mỗi vùng có tiểu khí hậu khác nhau, cho nên việc thay đổi cách trồng và tưới theo vườn người khác nên cân nhắc cẩn trọng.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #46
Chiêu số 46: Quan trọng nhất vẫn là thoáng khí vì sẽ gỉảm thiểu bệnh tật gây ra vì tưới quá nhiều, hay vì quá nóng hay quá ẩm. Nên kiếm một cái quạt nhỏ cho những cây để trong nhà.



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 #65
Chiêu số 64: Nếu hồ nghi, cứ dùng phân 20-20-20 là an toàn hơn cả.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #1
Chiêu số 1: Những nguyên tắc cơ bản cho người trồng lan: - Khô nhưng không hạn. - Ẩm nhưng không ướt.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #75
Chiêu số 75: Ngoài ra khi cây đã đâm chồi hoa hay ra nụ không cần bón phân nữa.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #67
Chiêu số 67: Cây lan có củ mầm cần một thời gian khô ráo sau khi tưới và ngược lại với những cây không có củ mầm.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #48
Chiêu số 48: Cái rây bột có thể dùng làm cái rổ trồng lan mà lại rẻ tiền.



theo hoalanvietnam.org

Hoa Lan Bí Kíp #74
Chiêu số 74: Nên nhớ chỉ bón ¼ hay ½ một thìa cà phê gạt cho 1 gallon nước (4 lít). Nên áp dụng câu Weekly và Weekly, nghĩa là bón rất loãng và bón mỗi tuần một lần.



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