Ở bài trước mình đã liệt kê các bài viết mà bạn nên đọc để hiểu cấu trúc giao diện nukeviet thuận tiện cho việc xây dựng giao diện nukeviet hoàn chỉnh
Ở đây có 2 cách xây dựng giao diện.
- Bạn viết hoàn toàn mới
- Copy giao diện default và tiến hành sửa lại.
Nhưng mình khuyên các bạn nên sử dụng cách số 2 vì bạn đỡ mất công viết từng dòng lệnh.
Các bước thực hiện
Bước 1: Công việc đầu tiên cũng khá là dễ dàng đó là bạn vào thư mục themes sau đó đặt tên cho một thư mục mà bạn muốn. Nhưng thư mục này sẽ là tên giao diện mà bạn sử dụng.
Bước 2: Tiếp đến bạn copy các file
- config.ini
- config.json
- config.php
- config_default.php
- default.jpg
- index.html
- theme.php
Ý nghĩa của các file thì các bạn đọc bài: Cấu trúc themes khi thiết kế giao diện website NukeViet
Chép sang thư mục mà bạn vừa tạo tên theme
Bước 3: Bạn copy toàn bộ thư mục system sang thư mục mà bạn vừa tạo.
Bước 4: Tạo thư mục layout ở theme vừa tạo sau đó chép các file sang gồm có:
- block.no_title.tpl
- footer_extended.tpl
- footer_only.tpl
- header_extended.tpl
- header_only.tpl
- index.html
- các file ghi là layout….
- simple.tpl
Lưu ý: với những file layout thì tùy vào cách bố trí giao diện mà bạn copy file đó sang thay vì copy sang hết mà không sử dụng làm tăng số lượng file không sử dụng trên theme.
Bước 5: Bạn vào mục language copy các file ngôn ngữ cần thiết. Ví dụ tôi xây dựng website tiếng Việt thì tôi vào đó và copy các file sau
- admin_vi.php
- index.html
- vi.php
Bước 6: Bạn tiếp tục copy file js bằng cách vào mục js copy file
- main.js
- bootstrap.min.js
sang thư mục js ở theme của bạn. Lưu ý ngoài ra bạn có thể copy các file khác trong trường hợp theme của bạn sử dụng đến.
Bước 7: Vào thư mục images copy các file icon ảnh cần thiết cho giao diện và dĩ nhiên là copy bắt buộc thư mục icons sang theme của bạn bao gồm cả file index.html ngang hàng với thư mục icons
Bước 8: Copy file css trong thư mục css sang giao diện của bạn với các file cơ bản sau
- admin.css
- bootstrap.min.css
- bootstrap.non-responsive.css
- bootstrap-theme.min.css
- style.css
- style.non-responsive.css
- style.responsive.css
- index.html
Ngoài ra bạn cũng có thể sao chép các file khác nhưng với file như
- bootstrap.non-responsive.css
- style.non-responsive.css
mà giao diện site sử dụng thiết lập pc, responsive, mobile thì copy sang. Trường hợp bạn chỉ sử dụng responsive thì không cần copy sang và nên sửa file theme.php loại bỏ đoạn code thành phần gọi 2 file này.
Bước 9: Đối với thư mục blocks nếu bạn cần sử dụng blocks nào thì bạn copy sang tương ứng với block đó. Nếu không thì không cần sử dụng.
