header-object

Template trong Joomla (1)

Giống như module, template cũng có 2 loại là loại dùng cho trang quản trị và loại dùng cho trang ngoài. Cách tạo ra template cho trang quản trị và trang ngoài khác nhau hoàn toàn. Trong thực tế ít khi nào chúng ta cần tạo template cho trang quản trị. Trong khuôn khổ giáo trình này chỉ trình bày việc tạo ra template cho trang ngoài.

1. Các thành phần và cấu trúc thư mục:

Các template cho trang ngoài nằm trong thư mục templates trong thư mục gốc của Joomla 2.5. Mỗi template là một thư mục con.
Không giống như module, các thư mục chứa template có thể có tên bất kì và không cần đến một tiếp đầu ngữ nào.
Về mặt cơ bản, mỗi template cũng bắt buộc phải có tối thiểu 2 tập tin. Tập tin cấu hình có tên templateDetails.xml và tập tin xử lý có tên index.php.
Tuy nhiên, các tập tin sau nên có trong template của bạn

  1. favicon.ico
  2. template_preview.png
  3. template_thumbnail.png

Sau đây, chúng ta sẽ tạo ra một template đơn giản cho joomla. Template này có tên là hoangnguyen sẽ có  bố cục như sau:

template11

Cột bên trái và phần phía dưới của trang sẽ đặt lên các module. Cột bên phải chúng ta sẽ đẩy ra nội dung của các component. Chúng ta sẽ học kĩ về component sau, bây giờ cách bạn hình dung component cũng đẩy nội dung ra trang ngoài gần tương tự như module.
Lần lượt tạo các tập tin theo cấu trúc như trong hình sau:

template12

Bắt đầu với tập tin cấu hình có tên templateDetail.xml, chúng ta sẽ nhập nội dung cho nó như sau:


     hoangnguyen
     June 2012
     giangdn
     
      
     
     
          giangdn.webchuyennghiep.net
     
     2.5.0
     
          TEM_HOANGNGUYEN_DESCRIPTION
     
 
     
          css
          index.php
          
               templateDetails.xml
          
     
 

Cũng gần tương tự như module. Tập tin này có thẻ gốc là thẻ <extension>, thuộc tính type của thẻ này được thiết lập là template. Tiếp sau là phần khai báo các thông tin và liệt kê các tập tin.

Để tạo ra layout như bên trên, mở tập tin index.php của template và nhập vào nội dung html đơn giản như sau:


template13

Trong phần head, chúng ta nhúng 2 tập tin .css, tập tin thứ nhất là system.css trong thư mục templates/system/css có sẵn của Joomla 2.5, tập tin này định dạng sẵn một loạt các thành phần cơ bản. Tập tin thứ 2 là layout.css trong thư mục template của chúng ta. Tập tin này chúng ta sẽ bắt tay vào viết ngay sau đây:

@CHARSET "UTF-8";
#wrapper {
     width: 980px;
     margin: 20px auto;
}
#logo {
     background: #12619A;
     padding: 10px;
     margin: 20px 0;
}
#leftSide {
     width: 260px;
     float: left;
     min-height: 300px;
     padding: 10px;
     background: #ddd;
     border: solid 1px #ccc;
}
#rightSide {
     width: 660px;
     float: right;
     min-height: 300px;
     padding: 10px;
     background: #ddd;
     border: solid 1px #ccc;
}
#foot {
     text-align: center;
     min-height: 120px;
     padding: 10px;
     background: #ddd;
     border: solid 1px #ccc;
     margin: 20px 0;
}

HtmlTập tin này chứa các định dạng cơ bản để trang index.php hiển thị được theo bố cục mà chúng ta đã định ban đầu. Thực sự nếu làm giao diện mà các bạn không rành về CSS thì là một điều khó khăn lớn. Để làm tốt giao diện nói chung và giao diện cho Joomla nói riêng, các bạn cần phải biết rõ các kiến thức cơ bản sau

  1. Css
  2. Javascript

Về javascript, tốt nhất là nên tìm hiểu một vài Javascript Framework như:

  1. Mootools (mootools 1.4 được tích hợp sẵn trong Joomla 2.5)
  2. JQuery + JqueryUI

Tiếp tục, bạn thực hiện đóng gói và cài đặt template này giống như đã làm với module. Sau thao tác cài đặt thành công chọn Extensions à Template Manager. Màn hình quản lý template hiện ra, trong thẻ Styles và thẻ Templates xuất hiện template chúng ta mới viết như minh họa trong hình sau:


template14

template15

Các style

Các template

Joomla 2.5 cho phép từ 1 template tạo ra nhiều styles khác nhau, các style khác nhau sẽ có thể có sự hiển thị khác nhau nếu người lập trình ra template đó đã cung cấp các tham số thiết lập để làm việc này.
Để áp dụng ngay style hoangnguyen – Default, chọn style này và nhấn nút Make Default trên thanh Toolbar. Kiểm tra sự hiển thị trên trang ngoài. Hiện tại chúng ta có bố cục như đã định và chưa có nội dung gì được hiển thị ra. Phần tiếp sau sẽ thực hiện việc tạo ra các vị trí (position) để đặt các module và đặt nội dung của component lên trên giao diện mới tạo.

GV: Đào Ngọc Giang

(còn tiếp)

Bình luận  

 
0 #1 Rogelio Thứ 5-01-16 11:51
Incredible story there. What happened after? Good luck!



Here is my webpage: CouponVasool: http://couponvasool.com/coupons-store
Trích dẫn
 

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 834 khách đang truy cập
2491995