Professional Documents
Culture Documents
Joomla Developer Manual 20051104 TEMPLATE Vi
Joomla Developer Manual 20051104 TEMPLATE Vi
Thiết kế joomla
1.Căn bản làm Template và Thiết kế Site
Tổng quan về làm Template
File dàn trang
Style Sheets – trang đinh kiểu
Hệ thống Joomla Template nằm trong những cái dễ học nhất của họ Content Management System
/templates
/basic_template
/css
template_css.css
/images
index.php
template_thumbnail.png
templateDetails.xml
Đó là tập hợp tối thiểu các file bạn cần để tạo một template. Lệnh nhân đòi hỏi mỗi tên file phải được tôn
trọng như thế. Chú ý rằng trong khi không có ảnh nào hiển thị trong thư mục /images, nó là nơi đặc trưng
bạn nên đặ bất cứ ảnh nào đang hỗ trợ cho template của bạn, như ảnh nền (backgrounds), banner, v.v.
Chúng ta hãy xem kĩ từng file trong đó.
index.php
Đây là file giàn trang template.
template_css.css
Css stylesheet cho template (trang định kiểu).
templateDetails.xml
File siêu dữ liệu (metadata) theo định dạng XML.
template_thumbnail.png
Một mặt màn hình (screenshot) thu nhỏ của template, thường khoảng rộng 140 pixel và cao 90 pixel.
Bạn được khuyến khích viết các template trong XHTML. Mặc dù có tranh luận liệu XHML có là lỗi đi của tương
lai hay không, nó vẫn là một định dạng XML chuẩn rất tốt, trong khi HTML là một chuẩn rời rạc. Các phiên
bản tương lai của Joomla sẽ giừa ngày càng nhiều vào XML vì đó là lối đi kế tục kiểu mẫubây giờ.
File index.php cho dàn trang 3 cột gần như giống dưới đây trong kiểu sương sống:
1: <?php
2: $iso = explode( '=', _ISO );
3: echo '<?xml version="1.0" encoding="' . $iso[1] . "\">\n";
4: /** ensure this file is being included by a parent file */
5: defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not
allowed.' );
6: ?>
7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
8: <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>">
9: <head>
10: <title><?php echo $mosConfig_sitename; ?></title>
11: <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
12: <?php
13: if ($my->id) {
14: initEditor();
15: }
16: ?>
17: <?php mosShowHead(); ?>
18: <link href="<?php echo
$mosConfig_live_site;?>/templates/basic_template/css/template_css.
css" rel="stylesheet" type="text/css" />
19: </head>
20: <body>
21: <table cellspacing="0" cellpadding="5" border="0">
22: <tr>
23: <td colspan="3">
24: <?php echo $mosConfig_sitename; ?>
25: </td>
26: </tr>
27: <tr>
28: <td colspan="3">
29: <?php mosLoadModules ( 'top', 1 ); ?>
30: </td>
31: </tr>
32: <tr>
33: <td width="20%" valign="top">
34: <?php mosLoadModules ( 'left' ); ?>
35:</td>
36: <td width="60%" valign="top">
37: <?php mosMainBody(); ?>
38:</td>
39: <td width="20%" valign="top">
40: <?php mosLoadModules ( 'right' ); ?>
41: </td>
42: </tr>
43: <tr>
44: <td colspan="3" valign="top">
45: <?php mosLoadModules ( 'bottom' ); ?>
46: </td>
47: </tr>
48: </table>
49: </body>
50: </html>
Cùng tìm hiểu những chức năng chính. Chúng tôi giả dụ rằng bạn dã biết chút ít về các trang HTML ở mức
như là các thẻ tag head, body, table, v.v. sẽ bỏ qua.
Dòng 1-3: định nghĩa file là chuẩn file XML. _ISO là một hằng số đặc biệt định nghĩa bảng mã kĩ tự được
dùng. Nó được định nghĩa trong file ngông ngữ của bạn (language file).
Dòng 5: Ngăn chặn việc truy cập trực tiếp vào file này. Là điều cần thiết khi bạn thêm dòng này vào template
của bạn.
Dòng 10: In ra tên biến cấu hình Tên Site trong cặp thẻ tag title đóng và mở.
Dòng 11: _ISO được dùng lại để định nghĩa tập hợp kí tự dùng.
Dòng 12-16: $may->id là một biến lệnh (script) mà sẽ mang giá trị non-zero nếu một người dùng đăng nhập
vào site của bạn. Nếu một người dùng đăng nhập thì một trình soạn thảo trực quan chỉ định trước được nạp.
Bạn có thể, nếu bạn muốn, luân luân nập trước trình soạn thảo, nhưng nói chung một khách nặc danh sẽ
không cần viết bài. Nó lứu giữ một tập lệnh tiêu đề bên trên việc duyệt site bình thường.
Dòng 18: Tải CSS stylesheet (trang định kiểu). $mosConfig_live_site là một biến cấu hình nắm giữ địa chỉ URL
tuyệt đối của site bạn.
Dòng 24: Nó in Tên Site trong một ô bảng (mở rộng ra 3 cột)
Dòng 29: Tải các module bất kỳ được xuất bản trong vị trí “top”. Đối sỗ thứ hai, “1”, chỉ rằng các module
được căn dóng theo chiều ngang.
Dòng 34: Tải các module bất kì được xuất bản tại vị trí “left”. Các module này sẽ được hiển thị trong một cột
đơn.
Dòng 37: Tải component vào template của bạn. Component được thiết lập bởi địa chỉ URL, ví dụ,
index.php?option=com_content sẽ hiển thị nội dung (Content) Component trong vùng này.
Dòng 40: Tải bất kì module nào được xuất bản trong vị trí “right”. Các module này sẽ hiển thị trong một cột
đơn.
Dòng 45: Tải module bất kì được xuất bản trong vị trí “bottom”.
Style Sheets
CSS Stylesheets
PHẢI LÀM
The Thumbnail
Khi bạn đã hoàn thành template của mình, xuất bản nó với Template Manager trong Administrator. Xem
trươc site và lấy một mặt màn hình (screenshot). Nhập mặt màn hình đó vào gói soạn thảo đồ họa yêu thích
và cắt toàn nội dung của cổng xem trình duyệt. Giảm kích thước ảnh xuống khoảng 140 pixel chiều rộng và
90 pixel chiều cao rồi lưu nó theo định dnạg PNG trong thư mục template (nó là /templates/basic_template).
2. Advanced Templating ( 4 items )
Tổng quan
Administrator Templates (các template cho Administrator)
Tham khảo chức năng
Các chuẩn template
Tổng quan
Chương này bao gồm một số chức năng cao cấp hơn như ẩn các cột template và thiết kế template cho
Administrator.
Ẩn các module
Đôi khi muốn ẩn các module nào đó nếu không có module được gán cho vùng đó. Bạn có thể ẩn các vùng
này bằng cách dùng hàm mosCountModules.
Nếu hàm mosCountModules trả về giá trị lớn hơn 1, ô bảng sẽ được hiển thị. Nếu không có module được định
nghĩa cho vị trí “right” ở trang liên quan này, thì ô sẽ không được hiển thị. Đây là một kỹ thuật tốt để tăng
chiều ngang màn hình trên các trang nào đó.
Hỗ trợ Module
Bạn có thể thêm các module vào các Administrator template trực tiếp với mosLoadAdminModule hoặc trong
các nhóm, giống như các site template, với mosLoadAdminiModules. Ví dụ:
Trong ô thứ hai, tất cả các module được gán vào vị trí “header” được tải. thông số thứ hai là một thiết lập
kiểu (style):
Định dạng cho các module “header” được thực hiện hoàn toàn thông qua CSS. Ví dụ, kiểu “wrapper1” được
định nghĩa như sau:
#wrapper1 div {
border: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px 5px 0px 5px;
display: inline;
}
Các module được bao trong các thẻ tag thuần <div>. Để hiển thị các module trong một cột bạn có thể thêm
một thuộc tính chiều rộng và thay đổi thuộc tính hiển thị thích hợp. Các module sau đây sẵn dùng với bản
phân phối Joomla.
mod_fullmenu
Full Menu module hiển thị menu Administrator DHTML truyền thống. Các Content Section và Component được
thêm động vào phần thừa của menu được định nghĩa tĩnh.
mod_components
Components module hiển thị một danh sách đầy đủ các Component và các mục con. Nó hữu dụng nơi nhiều
component được cài đặt và sức chứa của các menu DHTML được mở rộng.
mod_latest
Lastest Items module hiển thị các mục nội dung mới nhất.
mod_mosmsg
Message module hiển thị thông điệp đã gửi trong URL.
mod_online
Users Online module hiển thị số lượng thành viên đã log in.
mod_pathway
Pathway module hiển thị một đường dẫn Administrator.
mod_popular
Most Popular module hiển thị một danh sách các mục bài nhiều “hit” nhất.
mod_stats
Menu Stats module trình bày một số thông tin thống kê về các menu.
mod_toolbar
Toolbar module hiển thị biểu tượng toolbar.
mod_unread
Unread Messages module hiển thị số lượng các thông điệp cá nhân chưa đọc.
mod_logged
Logged module hiển thị một danh sách các user đã login hiện thời.
mod_quickicon
Quick Icon module hiển thị một mảng các biểu thượng shortcut.
<?php
/**
* @version $ Id: cpanel.php,v 1.3 2004/08/12 08:29:21 rcastley Exp $
* @package Joomla
* @copyright Copyright (C) 2005 Open Source Matters. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* Joomla! is free software and parts of it may contain or be derived from the
* GNU General Public License or other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
mosLoadComponents
Cú pháp:
mosLoadComponents( $name )
mosCountModules
Cú pháp:
mosCountModules( $position_name )
Đếm sô lượng module có thể hiển thị trên trang hiện tại trong vị trí “position_name”.
mosLoadModules
Cú pháp:
mosLoadModules( $position_name [, $style] )
Hiển thị tất cả các module được gán vào vị trí “pssition_name” cho trong hiện tại. Đối số “style” là tùy chọn
nhưng có thể là:
● 0 = (hiển thị mặc định) Các Module được hiển thị mặc định trong một cột. Sau đây hiển thị một ví dụ đầu
ra:
● 1 = Các module được hiển thị theo hàng ngang. Mỗi module được xuất ra trong một ô của bảng bao bọc.
sau đây hiển thị một ví dụ xuất ra:
● -1 = Các module được hiển thị như một hàng xuất ra và khong có các tiêu đề. Sau dây hiển thị một ví dụ
xuất ra:
● -2 =Các mudule được hiển thị trong định dạng X-Joomla. Sau đây hiển thị một ví dụ của đầu ra:
● -3 = Các mudule được hiển thị trong một định dạng cho phép, ví dụ, các góc tròn co dãn được. Tùy chọn
này được giới thiệu trong Mambo 4.5.2.1.
Chú ý trong tất cả cá trường hợp một lớp tùy chọn “suffix” có thể được áp dụng thông qua các thông số
module.
mosShowHead
Cú pháp:
Tập hợp nhiều thẻ tag head bao gồm thẻ tag title và nhiều thẻ tag meta.
mosMainBody
Cú pháp:
Bao gồm đầu ra của component được quyết định bằng giá trị tùy chọn trong URL.
Template Standards
Các tiêu chuẩn (NHÁP)
Ghi chú: từ Joomla 1.1 trở đi nó sẽ có hiệu lựu để dùng $_LANG->isoCode() thể hiện của tham chiếu
_LANGUAGE.:
Dùng thuộc tính tóm tắt cho các bảng dàn trang là tùy nhà thiết kế nhưng nói cung không được khuyến
khích, tham khảo thêm:
• Link text
Kết hợp các Điều khiển biểu mẫu với yếu tố LABEL
Yếu tố LABEL có thể kết hợp trực tiếp một mô tả của yếu tố biểu mẫu vào chính nó. LABEL thuộc tính for
phải phù hợp duy nhất với thuộc tính id của yếu tố biểu mẫu.
<label for="mod_login_username">
<?php echo $_LANG->_( '_USERNAME' ); ?>
</label>
<br />
<input id="mod_login_username" name="username" type="text"
class="inputbox<?php echo $moduleclass_sfx; ?>" alt="username" size="10" />
Với sự kết hợp này, một số trình duyệt cho phép việc click nhãn để dành được con trỏ cho việc điều khiển.
tham khảo: