Công việc thiết kế giao diện cho NukeViet hoàn chỉnh sẽ cần 3 công đoạn với các chức danh và yêu cầu cụ thể như sau
Bảng phân hạng chức danh và công việc của VINADES.,JSC | |||||
---|---|---|---|---|---|
STT | Công việc | Chức danh | Yêu cầu chuyên môn | Phần mềm cần thiết | Sản phẩm của của công việc |
1 | Vẽ (Design) | Chuyên viên đồ họa (Designer) | Vẽ giao diện web dưới dạng Layout có thể cắt HTML được | Photoshop hoặc các phần mề đồ họa tương đương | File đồ họa gốc và ảnh jpg hoặc PNG toàn trang |
2 | Cắt (Cut) | Kỹ thuật viên | Cắt giao diện đã được vẽ ra HTML | Photoshop hoặc các phần mề đồ họa tương đương, các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor…) | Trang web được thể hiện dưới dạng HTML |
2.1 | Hợp chuẩn HTML (Valid) | Kỹ thuật viên | Chuẩn hóa giao diện đã cắt đạt chuẩn W3C | Các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor…) | HTML đạt các chuẩn xHTML 1.0 và CSS 2.1 |
3 | Ghép giao diện | Kỹ thuật viên | Ghép HTML vào hệ thống NukeViet | Các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor…) | Giao diện được ghép đúng như được thiết kế, hợp chuẩn và không bị xung đột javascript với NukeViet (khi kéo thả block và sử dụng một số chức năng khác) |
Bài viết này hướng dẫn công việc Ghép giao diện cho hệ thống NukeViet 3. Các công việc khác là đặc thù chuyên môn chung nên không được hướng dẫn chi tiết tại tài liệu này.
Các theme được đặt trong thư mục themes/
. Mặc định hệ thống NukeViet có bốn theme. Tên của thư mục chứa theme bao gồm chữ cái, chữ số, dấu – và dấu _ . Cấu trúc của một theme bao gồm:
Để xây dựng một giao diện cơ bản từ giao diện đã có ta tiến hành copy một theme đã có, đặt lại tên theme, xóa các phần sau:
css
, giữ lại admin.css, icons.css, ie6.css, index.html, sitemap.xsl, sitemapindex.xsl, tab_info.css
.Bước tiếp theo cấu hình lại cho theme bằng cách mở file config.ini
Chỉnh lại CSS và các ảnh để được giao diện theo ý.
Nếu muốn xây dựng giao diện riêng cho mỗi module, tiến hành copy thư mục có tên module trong thư mục images, modules và file ten-module.css tương ứng vào theme mới sau đó chỉnh sửa CSS và các file ảnh để được giao diện theo ý muốn.
Lưu ý:
Ví dụ:
$xtpl->assign( 'TITLE', ‘Tiêu đề trang’ );
Để hiển thị từ “tiêu đề trang” thì trong file tpl ta cần viết {TITLE}.
Nếu dữ liệu xuất dạng mảng thì các phần tử ở các cấp được phân cách bằng dấu chấm.
Ví dụ:
$xtpl->assign( 'TITLE', array( “title” => “Tiêu đề”, “id” => 1 ) );
Để xuất chữ Tiêu đề thì trong file tpl cần đặt {TITLE.title}.
{THEME_PAGE_TITLE}, {THEME_META_TAGS}, {THEME_CSS}, {THEME_SITE_RSS}, {THEME_SITE_JS}, {THEME_MY_HEAD}, {THEME_ERROR_INFO}, {CLICK_SHOW_QUERIES}, {SHOW_QUERIES_FOR_ADMIN}, {THEME_ADMIN_MENU}, {THEME_MY_FOOTER}, {THEME_FOOTER_JS}.
Ngoài các phần cơ bản, NukeViet cũng cung cấp môi trường giúp người dùng tối ưu hóa đến mức tối đa các giao diện:
themes/ten-theme/modules
sau đó chỉnh sửa các function cho các funcs.layout.ten-lay-out.tpl
rồi đặt vào thư mục layout. Để thêm mới một template tiến hành tạo file mới có tên block.ten-template.tpl
rồi đặt vào thư mục layout
.