Trong bài viết này, tôi sẽ chia sẻ với các bạn cách xây dựng Blog Template với Gulp 4, Pug, Sass.

1. Chuẩn bị tài nguyên

Chúng ta cần một số ảnh để hiển thị trên giao diện, trong bài hướng dẫn chúng ta có thể tìm kiếm một số ảnh phù hợp từ google. Tất cả các hình ảnh trên sẽ được lưu ở thư mục assets/image

2. Xây dựng phần hiển thị danh sách blog

2.1. Khai báo danh sách nội dung và đường dẫn ảnh

Thêm đoạn code sau vào file index.pug. 

Ở đây chúng ta khai báo biến mảng blogs để giữ danh sách các blog, bao gồm title, subTitle và imgCover. Từ danh sách nào chúng ta sẽ đổ ra giao diện danh sách blog với nội dung tương ứng

2.2. Xây dựng khung html với pug

Với bố cục giao diện như trên, chúng ta sẽ viết pug như sau:

Như các bạn đã thấy, với pug, ở đây chúng ta có thể sử dụng vòng lặp, ngoài ra pug còn có biểu thức điều kiện, toán tử, … Đến đây chúng ta đã thấy danh sách đã được hiển thị ra nhưng chưa được đẹp, việc làm đẹp sẽ bắt đầu ở bước tiếp theo.

** Nếu tất cả thư mục và file nằm trong assets/images chưa được copy vào thư mục dist/assets/images, chúng ta cần fix lại đoạn code sau ở file gulp.js. Sau đó chạy lại lệnh gulp serve để chạy chế độ live reload.

 

2.3. Styling giao diện

Các bạn đưa đoạn code sau vào file style.sass

Vậy là chúng ta đã có một giao diện như sau:

Xây dựng Blog Template

Kết: Ở phần 2 này chúng ta đã tập làm quen với pug và sass, dùng pug và sass để build phần giao diện danh sách blog. Ở phần tiếp theo, chúng ta sẽ xây dựng phần Carousel Banners của template.

Chúc các bạn thành công!

Link Github: https://github.com/nguyentd92/gulpjs-demo

Author: Nguyễn Thành Danh

Xem thêm các bài viết chia sẻ, hướng dẫn học lập trình tại đây.

 


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.