Giới thiệu

Trong quá trình xây dựng website, đôi khi bạn cần chỉnh sửa một số thành phần giao diện như header, footer, menu, trang chủ hoặc các trang nội dung để phù hợp với nhu cầu sử dụng thực tế.
Đối với các website được xây dựng bằng EzyPlatform, bạn có thể sử dụng tính năng Template Explorer để xem cấu trúc giao diện, xác định vị trí các file template và tiến hành chỉnh sửa nhanh chóng mà không cần truy cập trực tiếp vào source code của server.Trong bài viết này, chúng ta sẽ tập trung vào cách tùy chỉnh giao diện website thực tế.

Sử dụng Template Explorer để tùy chỉnh giao diện

Bạn có thể sử dụng template để tùy chỉnh giao diện nhanh chóng, thay vì tùy chỉnh thủ công theo từng giai đoạn.Bạn có thể tìm hiểu thêm chi tiết tại đây: Hướng dẫn sử dụng tính năng Template Explorer trên EzyPlatform. Đầu tiên, tại giao diện quản trị EzyPlatform, bạn truy cập vào menu Các trang → Trình xem mẫu. 0.png Sau khi truy cập thành công, hệ thống sẽ hiển thị danh sách các nhóm giao diện hiện có như Giao diện, Plugin web và Plugin quản trị.

Mở giao diện website đang sử dụng

Tại mục Giao diện, bạn nhấn vào biểu tượng mở rộng để xem danh sách các giao diện hiện có trên website. 0.1.png Tiếp theo, chọn giao diện mà website của bạn đang sử dụng. Trong ví dụ này là giao diện Publishing và bạn thực hiện như ảnh dưới đây. 0.5.png

Copy file footer và dán vào VS code để tùy chỉnh giao diện

Sau khi tìm thấy file footer.html, nhấn vào tên file để xem nội dung và copy lại nội dung. 1.png Sau đó, bạn vào VS code dán đoạn mã này vào khung chat AI.Trong trường hợp này, ví dụ bạn muốn giao diện gọn gàng hơn, có thể loại bỏ phần giới thiệu này. 2.png 3.png

Kiểm tra hiển thị sau khi chỉnh sửa

Sau khi chỉnh sửa, Footer sẽ chỉ còn các nhóm nội dung quan trọng như: 4.png

Tùy chỉnh khu vực mạng xã hội

Ngoài ra, bạn cũng có thể tùy chỉnh phần Theo dõi trong Footer.Trong ví dụ này, biểu tượng Facebook đang hiển thị khá nhỏ và chưa đủ nổi bật. 4.1.png Lúc này, bạn có thể vào VS code và tùy chỉnh lại biểu tượng như ảnh dưới đây. 5.png

Kiểm tra giao diện sau khi chỉnh sửa

Sau khi hoàn tất các thay đổi, hãy truy cập lại website để kiểm tra kết quả hiển thị thực tế. 6.png
  • Lưu ý: Nếu giao diện chưa cập nhật ngay, bạn có thể thực hiện làm mới trình duyệt hoặc publish lại giao diện để hệ thống áp dụng phiên bản mới nhất.
👉 Nếu trong quá trình cài đặt bạn gặp khó khăn cần hỗ trợ cài đặt nhanh hoặc xử lý lỗi kỹ thuật? Hãy Inbox Fanpage chính thức của Young Monkeys để được hỗ trợ nhanh chóng nhé!