Welcome to uruad | Welcome My Forum

[Hoca]

Ở 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.

1. Bạn viết hoàn toàn mới
2. 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 web site 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 format ở 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à format….
• easy.tpl

Lưu ý: với những file format 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 web site 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

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 photos 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
• model.css
• model.non-responsive.css
• model.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
• model.non-responsive.css

mà giao diện web site sử dụng thiết lập laptop, responsive, cellular 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.

Có liên quan​