Dưới đây tôi đã vẽ ra một khung cấu trúc giao diện Drupal 7, sau đó sẽ giải thích cho từng thành phần trên đó, hy vọng sẽ giúp các bạn hiểu rõ cấu trúc và tự thiết kế riêng cho mình một giao diện như ý.
LƯU Ý:
1, page.tpl.php về cơ bản là nơi bố trí chính, chứa toàn bộ website (bạn không nên thêm các thẻ body trong trang này). Nếu bạn đang bắt đầu từ một tập tin HTML, bạn có thể đổi tên nó page.tpl.php và bắt đầu gõ vào các yếu tố cần thiết. Bạn có thể xem những yếu tố ở đây.
2, trong Drupal 7 tất cả mọi thứ chứa nội dung là một khu vực (region), ngay cả những khu vực chứa block "content".
3, node.tpl.php là đại diện theo chủ đề của một mục nội dung.
4, block.tpl là một phần của nội dung có thể được viết bằng HTML hoặc được tạo ra từ một mô-đun. (Giống như các khối chức năng đăng nhập hay tin mới nhận, ...)
5, region.tpl là những khu vực chứa trong đó nhiều khối block. Chúng được quy định tại các tập tin .info. Và được gọi trong page.tpl.php
- Khi tạo ra các tập tin theme.info, bắt đầu từ Drupal 7, bạn cần một khu vực được gọi là "content" hoặc các chủ đề sẽ hiển thị.
- Dưới đây là một danh sách các tập tin nhân tpl:
html.tpl.php
page.tpl.php
region.tpl.php
block.tpl.php
node.tpl.php
comment-wrapper.tpl.php
comment.tpl.php
field.tpl.php
page.tpl.php
region.tpl.php
block.tpl.php
node.tpl.php
comment-wrapper.tpl.php
comment.tpl.php
field.tpl.php
Có nhiều tập tin tpl hơn nhưng đây là những tập tin sử dụng nhiều nhất.
* BẮT ĐẦU TẠO MỘT THEME CƠ BẢN:
Trước tiên chúng ta tạo một thư mục "giaodiencuatoi_v1" theo đường dẫn sau:
/sites/all/themes/giaodiencuatoi_v1
Sau đó, bạn tạo ra những tập tin thiết lập thông tin như thongtingiaodien.info với những thông tin đơn giản sau:
name = "Giao dien v1 2012"
description = "Thiet ke boi M.r.Nghi Nguyen"
version = "1.0"
core = "7.x"
engine = "phptemplate"
stylesheets[all][] = "css/html5reset.css"
stylesheets[all][] = "style.css"
description = "Thiet ke boi M.r.Nghi Nguyen"
version = "1.0"
core = "7.x"
engine = "phptemplate"
stylesheets[all][] = "css/html5reset.css"
stylesheets[all][] = "style.css"
scripts[] = "scripts/main.js"
regions[top] = Top
regions[right] = Right
regions[content] = Content
regions[footer] = Footer
regions[right] = Right
regions[content] = Content
regions[footer] = Footer
(ST)
Không có nhận xét nào:
Đăng nhận xét