Cấu trúc giao diện Drupal cơ bản

Cấu trúc giao diện của Drupal là tập hợp các file mẫu (template). Mỗi file có nhiệm vụ xử lý dữ liệu riêng. Thực tế Drupal có rất nhiều mẫu. Tuy nhiên trong bài viết này Thủ Thuật Việt Nam chỉ giới thiệu các thành phần chính cấu tạo nên giao diện.

Với các file mẫu này chúng ta hoàn toàn có thể xây dựng được các giao diện hoàn chỉnh.

Các thành phần cơ bản trong giao diện Drupal

1. Giao_dien.info : Quy định các thông tin cơ bản về về giao diện. Các thông tin chính cần cung cấp

- name : Tên giao diện

- core : Giao diện tương thích với phiên bản Drupal nào

- stylesheets : Đường dẫn đến các file css sẽ sử dụng

- scripts : Đường dẫn đến các file javascript sẽ sử dụng

- regions : Khai báo các region sẽ sử dụng.

Ví dụ mẫu:

name = Giao diện cho Mobile
core = 7.x 

stylesheets[all][] = css/base.css
stylesheets[all][] = css/style.css 

scripts[] = js/ttvn.js 

regions[content] = Content
regions[header] = Header
regions[footer] = Footer 

2. page.tpl.php : Là nơi chứa bố cục chính của toàn bộ website. Toàn bộ các thành phần mã nằm trong thẻ "body" được đặt ở đây.

Ví dụ mẫu (sử dụng khai báo ở mục 1):

<div id="wrap">
	<div id="header">
		<?php if($page['header']) print render($page['header']); ?>
	</div>

	<div id="content">
		<?php if($page['content']) print render($page['content']); ?>
	</div>

	<div id="footer">
		<?php if($page['footer']) print render($page['footer']); ?>
	</div>
</div>

3. node.tpl.php : Là template chứa nội dung chi tiết của một thành phần.

Trong drupal các nội dung content được đưa ra giao diện qua block "Main page content". Chúng ta sẽ đặt block này vào region "Content".

Trong file page.tpl.php xếp nội dung hiển thị vào thẻ id="content".

Trong file node.tpl.php sẽ xử lý chi tiết nội dung này

Cấu trúc giao diện Drupal cơ bản

Ví dụ mẫu

<div class="node">
	<?php if (!$page): ?>
		<!-- Nếu là trang mục lục chỉ liệt kê tiêu đề -->
		<a href="#"><?php print $title; ?> 
(Còn tiếp)

Tags: