Ngày 29 / Tiết 1 / Thời lượng 30 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Chúng ta tiếp tục chỉnh sửa giao diện Astra phiên bản cao cấp. Đến thời điểm này có lẽ bạn đã nhận ra, việc chỉnh sửa theme là hoạt động cần sự tỉ mỉ, điều chỉnh những thứ nho nhỏ, và kết quả lớn sau cùng mà chúng ta đạt được sẽ đến từ những thứ nhỏ đó tập hợp lại.
Chỉnh sửa bố cục chung của trang chuyên mục (category)
Bạn vào Astra > Customize > Blog > Blog / Aarchive để tiến hành cài đặt.
Những phần giống phiên bản miễn phí sẽ không được nói lại, chúng ta chỉ nói về phần khác biệt.
Đầu tiên, ở ô bên phải bạn truy cập vào chuyên mục bất kỳ trên website, ở cột bên trái, bạn kéo xuống phần Grid Layout:
Hãy thử lần lượt, bật dần tất cả các tùy chọn, và bạn sẽ thấy thay đổi:
- Add Space Between Posts: khi được bật nó sẽ bổ sung lề giữa các bài trong chuyên mục. Đây là lựa chọn tốt, vì nó sẽ làm danh sách bài trong chuyên mục có sự phân biệt rõ ràng hơn:
- Enable Date Box: khi được bật, nó sẽ thêm ngày xuất bản vào ảnh, trông nổi bật và khá đẹp mắt. Tuy nhiên tôi cho rằng chỉ các website có tính thời sự thì mới nên bật hiệu ứng này:
- Remove Featured Image Padding: khi được bật, nó sẽ loại bỏ lề của ảnh, làm ảnh đầy ra 2 bên, cách này chỉ đẹp nếu bạn có ảnh đủ lớn (ít nhất 800px chiều rộng), còn không bạn sẽ thấy ảnh bị thụt thò, trông xấu đi.
—
Tiếp đến chúng ta sẽ thử điều chỉnh cấu trúc của trang chuyên mục. Theo mặc định nó có cấu trúc 1 cột (1 Cloumn), giờ bạn hãy thử đổi nó sang 2 cột:
- Bạn sẽ thấy chuyên mục được chia làm 2 cột như thế này:
- Bạn sẽ ngay lập tức nhận ra là chiều cao các cột (cho phần nội dung) sẽ ít khi bằng nhau, và tạo ra nhiều khoảng trống trắng không đều, trông không được đẹp lắm.
- Thiết kế này sẽ ổn hơn khi bạn bật tùy chọn Masonry Layout, các cột sẽ được sắp xếp xen kẽ để không tạo ra các khoảng trống không đều.
- Tùy chọn 2 cột cũng đảm bảo ảnh đủ lớn để bạn bật tùy chọn Remove Featured Image Padding, vì lúc này cột chỉ bằng 1/2 thông thường, và ảnh đại diện chắc chắn đủ rộng cho không gian này (ảnh đại diện tối thiểu là 640px rồi):
- Bạn có thể làm cấu trúc 2 cột đẹp hơn, cân hơn bằng cách tăng chiều rộng của website ở phần Astra > Customize > Global > Container, tăng Container Width lên 1200px để xem sự thay đổi. Khi chiều rộng tăng lên, mức độ chênh nhau về khoảng trắng dư thừa sẽ giảm đi.
Demo kết quả trang chuyên mục 2 cột: website-demo.b-cdn.net/2cot/
- Highlight First Post: là kiểu làm nổi bật bài viết đầu tiên trong cấu trúc 2 cột, hiệu ứng này chỉ được thể hiện khi bạn không chọn Masonry Layout.
Số lượng từ xem trước của bài viết và Việt hóa Read More
Bay giờ vẫn ở Astra > Customize > Blog > Blog / Aarchive, bạn kéo xuống dưới phần Excerpt Count để thay đổi số từ mặc định mà bạn muốn người đọc xem trước.
- Con số mặc định là 55, bạn có thể thay đổi thành 30 và 70 để xem sự khác biệt. Cá nhân tôi thì chọn con số 35, để số lượng từ quá lớn sẽ làm khó người đọc khi họ thường cần phải lướt nhanh trong chuyên mục để chọn bài.
- Ở phần Read More Text, bạn nên Việt hóa nó thành ‘Đọc thêm’ hoặc ‘Xem tiếp’ thay vì để mặc định là từ tiếng Anh
Read More >>. - Nếu muốn link Đọc thêm này có dạng nút bấm (button) thì bạn bật tùy chọn Display Read More as Button, còn không thì bạn để như mặc định.
Thử thêm thiết kế khác
- Từ nãy giờ chúng ta thử cấu trúc một cột và hai cột, nó vẫn đang sử dụng Layout mặc định là ảnh ở trên rồi văn bản ở dưới (tùy chọn này ở khu vực BLOG LAYOUT):
- Giờ bạn thử đổi sang layout ảnh bên trái, văn bản bên phải (đây là layout các trang báo chí thích dùng):
- Bạn sẽ thấy trang chuyên mục có cấu trúc mới như thế này:
- Bây giờ để nó đẹp, cân đối hơn giữa chiều cao văn bản và chiều cao ảnh, bạn cần điều chỉnh số lượng từ hiển thị ra bên ngoài, có thể hạ xuống 15 – 20 từ cho tùy chọn Excerpt Count.
- Ngoài ra có thể cần tắt hết thông tin Meta (hiển thị ngày tháng xuất bản, tác giả, bình luận) để hạn chế thông tin trong không gian nhỏ hẹp dành cho văn bản (nó nằm ở phần POSTS STRUCTURE ngay bên dưới):
- Thiết kế này cũng sẽ đẹp hơn nếu độ rộng nội dung của nó lớn hơn thông thường một chút (tức là cũng nên để Container Width cỡ 1200px).
- Thiết kế mới của trang chuyên mục giờ sẽ trông ổn hơn, giống như thế này:
Demo kết quả thiết kế ảnh trái, văn bản phải trong chuyên mục: website-demo.b-cdn.net/left-image
Vậy bạn nên chọn kiểu thiết kế nào?
Kiểu nào cũng ổn cả, từ một cột, hai cột, hay là kiểu bạn vừa đọc xong. Miễn là bạn thấy đẹp, phù hợp sau khi căn chỉnh cẩn thận thì bất kỳ kiểu nào cũng tốt.
Cá nhân tôi chọn kiểu truyền thống, một cột.
Đánh số trang trong chuyên mục
Cuối cùng chúng ta đi đến phần Post Pagination và Post Pagination Style.
- Mặc định Post Pagination để là Number, nghĩa là các bài trong chuyên mục được phân thành các trang. Ví dụ nó có 30 bài trong chuyên mục A, thì chuyên mục đó sẽ có 3 trang (mặc định mỗi trang hiển thị 10 bài post), bạn sẽ thấy số lượng trang này ở cuối mỗi chuyên mục, và người dùng click vào con số tương ứng để xem các bài cũ hơn trong chuyên mục đó:
- Với Post Pagination là Number, thì ở phần Post Pagination Style bạn sẽ có 3 lựa chọn: Default (mặc định), Square (vuông), Circle (tròn). Đây là các hình dạng cho số phân trang, ví dụ khi tôi chọn hình tròn:
- Giờ nếu bạn chọn Infinite Scroll ở Post Pagination, nó sẽ không có các con số này nữa, mà khi người dùng cuộn chuột xuống cuối, website sẽ tự hiển thị các bài viết cũ hơn (Infinite Scroll có nghĩa là cuộn vô hạn). Bạn cần nhấn Publish rồi tự kiểm tra xem có thích tính năng này không.
- Với tùy chọn Infinite Scroll bạn lại có 2 tùy chọn cho phần Post Pagination Style, một là cuộn vô tận (Scroll, mặc định), hai là có nút để kích hoạt tải bài khác (Click), bạn thử trực tiếp sẽ hiểu rõ hơn.
Về mặt cá nhân tôi thích kiểu Post Pagination là Number (đánh số), và Post Pagination Style là Circle (tròn).
Demo kết quả trang chuyên mục 1 cột: website-demo.b-cdn.net/1cot/
Bài tiếp >>> Hướng dẫn chỉnh sửa theme Astra, bản cao cấp [phần 3]