Giới thiệu

Template Explorer là công cụ giúp quản trị viên và lập trình viên dễ dàng quản lý, xem cấu trúc và chỉnh sửa các file giao diện (template) của website ngay trên hệ thống EzyPlatform. Thông qua tính năng này, bạn có thể nhanh chóng kiểm tra các file HTML, Fragment, Template của Theme hoặc Plugin mà không cần truy cập trực tiếp vào máy chủ.
Trong bài viết này, bạn sẽ được hướng dẫn chi tiết cách sử dụng Template Explorer, cách xem cấu trúc thư mục, kiểm tra mã nguồn giao diện và chỉnh sửa template thông qua Visual Studio Code.

Template Explorer là gì?

Template Explorer là trình quản lý cấu trúc giao diện được tích hợp sẵn trong EzyPlatform, cho phép:
  • Xem toàn bộ cấu trúc thư mục Theme và Plugin.
  • Kiểm tra các file giao diện đang được website sử dụng.
  • Xem nội dung source code trực tiếp trên hệ thống.
  • Xác định vị trí cần chỉnh sửa giao diện.
  • Kết nối với mã nguồn để chỉnh sửa nhanh bằng Visual Studio Code.

Truy cập tính năng Template Explorer

Từ giao diện quản trị EzyPlatform: Pages → Template Explorer. Giao diện hiển thị danh sách các Theme và Plugin đang được cài đặt trên hệ thống.
6.png

Xem cấu trúc thư mục Template

Sau khi mở Template Explorer, nhấn biểu tượng "+" để mở rộng cây thư mục.Hệ thống sẽ hiển thị như giao diện bên dưới.
7.png
Mỗi plugin sẽ chứa các thư mục giao diện riêng để phục vụ từng chức năng trên website.
8.png

Xem nội dung file Template

Để xem nội dung một file giao diện:
  1. Mở thư mục cần kiểm tra.
  2. Chọn file muốn xem.
Khi nhấn vào file header.html, hệ thống sẽ hiển thị mã nguồn trực tiếp.Ví dụ như ảnh dưới đây.
9.png
10.png

Sao chép đoạn mã Header hiện tại

Nếu menu chưa có mục Đăng kí thi viết truyện, bạn cần bổ sung thêm mục này vào phần Header
4.png
Bạn cần quay lại trang Admin và sao chép lại đoạn mã nguồn của Header.
5.png
Tiếp theo, quay lại Visual Studio Code, mở file đang chứa cấu trúc Header. Tại khung AI Chat trong Visual Studio Code và dán đoạn mã vừa sao chép vào ví dụ như ảnh dưới đây.
0.png

Bổ sung menu mới vào Header bằng AI trong Visual Studio Code

Sau khi đã tạo xong trang Đăng ký thi viết truyện, bạn cần kiểm tra lại giao diện ngoài website. Nếu truy cập vào đường dẫn nhưng website hiển thị lỗi 404 – Không tìm thấy trang, nguyên nhân có thể là do trang mới chưa được gắn vào menu điều hướng hoặc chưa có liên kết truy cập trực tiếp từ Header.
0.1.png

Sử dụng AI trong Visual Studio Code để tùy chỉnh nội dung Template

Sau khi đã xác định được file cần chỉnh sửa thông qua Template Explorer, bạn có thể mở source code bằng Visual Studio Code và sử dụng AI để hỗ trợ tùy chỉnh nội dung nhanh hơn, chính xác hơn.
1.png
Sau khi AI đã thêm nội dung vào mục, bạn cần kiểm tra lại giao diện ngoài website.
2.png

Bổ sung nội dung hướng dẫn thêm form đăng ký bên phải

Trong quá trình tùy chỉnh, bạn có thể tiếp tục yêu cầu AI tùy chỉnh, AI sẽ giữ lại phần nội dung hướng dẫn ở bên trái và thêm form đăng ký ở bên phải theo bố cục 2 cột.
3.png

Kiểm tra giao diện sau khi AI cập nhật

Sau khi AI đã chỉnh sửa thêm form đăng ký, bạn cần kiểm tra lại giao diện ngoài website.
4.png

Lưu ý

  • Khi dùng AI trong VS Code, bạn nên chia nhỏ yêu cầu để dễ kiểm soát kết quả.
  • AI có thể hỗ trợ viết nội dung nhanh, nhưng bạn vẫn cần kiểm tra lại để đảm bảo nội dung phù hợp với mục tiêu SEO.
  • Nếu website đang hoạt động chính thức, bạn không nên chỉnh sửa trực tiếp trên môi trường production khi chưa kiểm tra kỹ.
  • Sau khi lưu file trong VS Code, bạn nên quay lại trình duyệt và tải lại trang để kiểm tra kết quả.
👉 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é!