Mô tả chi tiết tính năng Template Explorer
Back to ezyarticleTemplate Explorer là công cụ quản lý file template trực quan trong EzyPlatform, cho phép người dùng duyệt, tổ chức và quản lý toàn bộ các file template của hệ thống theo cấu trúc thư mục phân cấp (plugin → module → thư mục con → file).
Ngoài chức năng xem cấu trúc thư mục và nội dung file, Template Explorer còn giúp quản lý cấu trúc giao diện của website thông qua hệ thống template. Người dùng có thể nhanh chóng xác định các template đang được sử dụng, tùy chỉnh giao diện theo nhu cầu và tái sử dụng các mẫu template có sẵn để xây dựng trang web mới mà không cần thiết kế lại từ đầu.
Để truy cập Template Explorer, vào menu Pages ở thanh điều hướng bên trái, sau đó chọn Template Explorer.
Giao diện chính
Khi mở Template Explorer, màn hình hiển thị bảng Folder And File List — danh sách toàn bộ thư mục và file được tổ chức theo ba nhóm plugin chính:
| Nhóm | Mô tả |
|---|---|
| Theme | Chứa các template giao diện (theme) của hệ thống. |
| Web Plugin | Chứa các template dùng cho phía người dùng cuối (frontend). |
| Admin Plugin | Chứa các template dùng cho trang quản trị (Backend/Admin). |
Mỗi nhóm được đánh dấu bằng nhãn Plugin ở cột bên phải, kèm theo số phiên bản của từng module.
Cấu trúc thư mục
Mỗi module có cấu trúc thư mục riêng biệt tùy theo chức năng — không phải module nào cũng có đủ ba thư mục
messages/, static/, templates/. Hệ thống chỉ tạo những thư mục thực sự cần thiết cho module đó.| Thư mục | Chức năng |
|---|---|
| messages/ | Chứa các file ngôn ngữ / i18n (.properties). |
| static/ | Chứa các file tĩnh: CSS, JavaScript, hình ảnh. |
| templates/ | Chứa các file template HTML/view để render giao diện. |
Theme
Theme là nơi chứa toàn bộ giao diện của website. Trong ví dụ trên, theme Freestyle có cấu trúc như sau:
| Thư mục/File | Chức năng |
|---|---|
messages/ | Chứa các file ngôn ngữ (i18n). |
messages.properties | Ngôn ngữ mặc định của theme. |
messages_vi.properties | Bản dịch tiếng Việt của theme. |
static/ | Chứa tài nguyên tĩnh. |
static/css/ | Các file CSS. |
static/images/ | Hình ảnh của giao diện. |
static/js/ | Các file JavaScript. |
templates/ | Chứa các template hiển thị giao diện. |
templates/account/ | Template liên quan đến tài khoản người dùng. |
templates/fragments/ | Các thành phần giao diện dùng chung (header, footer, menu...). |
templates/orders/ | Template liên quan đến đơn hàng. |
templates/pages/ | Template cho các trang nội dung. |
templates/posts/ | Template cho bài viết. |
page.html | Template trang mặc định của theme. |
Vai trò của Theme
Theme quyết định:
- Bố cục giao diện website.
- Màu sắc và phong cách hiển thị.
- Header, Footer, Menu.
- Trang bài viết, trang sản phẩm, trang nội dung.
- Các thành phần giao diện dùng chung.
- Tái sử dụng các template giao diện có sẵn để xây dựng nhanh các trang mới.
Mọi thay đổi trong Theme sẽ ảnh hưởng trực tiếp đến giao diện website.
Web Plugin
Web Plugin chứa các thành phần hoạt động ở phía người dùng cuối (Frontend). Ví dụ trong hệ thống:
| Plugin | Chức năng |
|---|---|
| ECommerce | Chức năng thương mại điện tử. |
| EzyArticle | Quản lý bài viết và blog. |
| EzyMail | Chức năng email. |
| EzySeo | Hỗ trợ SEO. |
| EzySupport | Hệ thống hỗ trợ khách hàng. |
| Graphql | Cấu hình GraphQL API. |
Mỗi plugin có thể chứa các thư mục:
| Thư mục | Chức năng |
|---|---|
| messages/ | File ngôn ngữ. |
| static/ | CSS, JS, hình ảnh. |
| templates/ | Template giao diện frontend. |
Một số trường hợp đặc biệt
- EzyMail: Hiển thị
No Files Or Folders- Điều này có nghĩa plugin hiện chưa có file tùy chỉnh nào trong Template Explorer và đang sử dụng giao diện mặc định được đóng gói bên trong plugin.
- EzySeo chỉ có:
static/- Do plugin này chủ yếu cung cấp CSS và JavaScript phục vụ SEO nên không cần template giao diện riêng.
- Graphql có thêm thư mục:
graphql.properties- Đây là thư mục cấu hình GraphQL đặc thù, không phải cấu trúc chuẩn của các plugin thông thường.\
Vai trò của Web Plugin
Web Plugin chịu trách nhiệm:
- Hiển thị dữ liệu cho người dùng.
- Render giao diện frontend.
- Cung cấp các chức năng như bài viết, sản phẩm, SEO, hỗ trợ khách hàng,...
- Mở rộng tính năng của website.
- Tái sử dụng các template chức năng đã được xây dựng sẵn.
- Tùy biến giao diện từng module mà không cần thay đổi mã nguồn của plugin.
Các thay đổi trong Web Plugin chỉ ảnh hưởng tới giao diện và trải nghiệm của người dùng cuối.
Admin Plugin
Admin Plugin chứa các thành phần phục vụ cho trang quản trị hệ thống. Các plugin thường gặp:
| Plugin | Chức năng |
|---|---|
| ECommerce | Quản trị thương mại điện tử. |
| EzyArticle | Quản lý nội dung và bài viết. |
| EzyMail | Quản lý email. |
| EzySeo | Cấu hình SEO. |
| EzySupport | Quản lý hỗ trợ khách hàng. |
| Freestyle | Quản lý theme Freestyle trong Admin. |
| Graphql | Quản lý cấu hình GraphQL. |
Cấu trúc phổ biến:
| Thư mục | Chức năng |
|---|---|
| messages/ | File ngôn ngữ cho trang quản trị. |
| static/ | CSS, JS và tài nguyên quản trị. |
| templates/ | Template giao diện Admin. |
| scripts/ | Các script xử lý dành cho Admin. |
Một số plugin còn có thêm các thư mục riêng theo chức năng. Ví dụ:
ECommerce/ ├── ecommerce/ ├── messages/ ├── scripts/ ├── static/ └── templates/
Vai trò của Admin Plugin
Admin Plugin chịu trách nhiệm:
- Hiển thị giao diện quản trị.
- Quản lý dữ liệu hệ thống.
- Cấu hình các plugin.
- Cung cấp các màn hình quản trị cho quản trị viên.
Các thay đổi trong Admin Plugin chỉ ảnh hưởng đến khu vực quản trị và không tác động trực tiếp tới giao diện người dùng.
Vai trò của Template Explorer trong quản lý giao diện
Template Explorer không chỉ là công cụ duyệt file mà còn là trung tâm quản lý cấu trúc giao diện của hệ thống. Thông qua Template Explorer, quản trị viên có thể:
- Xác định chính xác template đang được sử dụng cho từng chức năng.
- Theo dõi mối liên hệ giữa Theme và các Plugin.
- Tái sử dụng các template hiện có để xây dựng trang mới hoặc triển khai website mới nhanh hơn.
- Chuẩn hóa cấu trúc giao diện giữa nhiều dự án khác nhau.
- Hỗ trợ bảo trì, nâng cấp và kiểm soát phiên bản template dễ dàng hơn.
Nhờ cơ chế tổ chức theo plugin và thư mục phân cấp, Template Explorer giúp việc quản lý giao diện trở nên trực quan, giảm thời gian phát triển và tăng khả năng tái sử dụng các thành phần giao diện trong toàn bộ hệ thống EzyPlatform.
Thao tác trong Template Explorer
Mở rộng / Thu gọn thư mục
- Nhấn biểu tượng − bên trái tên nhóm/thư mục để thu gọn.
- Nhấn biểu tượng + để mở rộng và xem các thư mục con bên trong.
- Nút ^ (mũi tên lên) ở góc phải bảng Folder And File List dùng để thu gọn toàn bộ danh sách.
Xem nội dung file
- Nhấn trực tiếp vào tên file để mở popup hiển thị nội dung file ngay trong trình duyệt — không cần tải về hay dùng editor ngoài.
Số phiên bản (Version)
- Mỗi module hiển thị số phiên bản ở cột bên phải (ví dụ: 1.0.6 với EzyArticle). Đây là phiên bản của plugin tương ứng, giúp kiểm soát việc cập nhật template khi nâng cấp hệ thống.
Lưu ý quan trọng
- Cấu trúc thư mục mỗi module là khác nhau — không nên giả định module nào cũng có đủ
messages/,static/,templates/. - Module hiển thị "No Files Or Folders" nghĩa là đang dùng template mặc định từ code; có thể thêm file tùy chỉnh vào nếu cần ghi đè.
- Không xóa hoặc đổi tên các thư mục chuẩn đang có — hệ thống phụ thuộc vào tên thư mục để load đúng file.
- Khi chỉnh sửa file trong templates/, nên sao lưu bản gốc trước để có thể khôi phục nếu cần.
- File messages.properties là file ngôn ngữ mặc định (tiếng Anh); luôn duy trì đủ các key trong file này trước khi thêm file ngôn ngữ khác.
- Khi dịch sang tiếng Việt (messages_vi.properties), chỉ cần khai báo các key cần ghi đè — key nào không có trong file ngôn ngữ phụ sẽ tự động fallback về file mặc định.
- Thay đổi trong Web Plugin chỉ ảnh hưởng đến giao diện người dùng; thay đổi trong Admin Plugin chỉ ảnh hưởng đến trang quản trị.
- Sau khi chỉnh sửa template, có thể cần xóa cache hoặc restart server để các thay đổi có hiệu lực.