cách bố trí giao diện

Ở 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 Hướng dẫn xây dựng giao diện cho website NukeViet Ở đâ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.

cách bố trí giao diện

Sao chép các thành phần cần thiết cho việc xây dựng theme nukeviet