2. 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
Tổng quan về làm Template
The Joomla Template system is amongst the easiest to learn in the Content Management System family.
Templates are located in the /templates directory. The following shows a typical directory structure for a
template:
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.
File dàn trang
Mặc dù file dàn trang là một file PHP, nó được viết phần lớn trong HTML với chỉ vài tiểu trình (snippet) của
PHP. Bạn không cần phải là một chuyên gia về PHP để viết được một file template. Tất cả bạn cần là học nơi
nào đặt các khóa móc (key “hooks”) vào cỗ máy template Joomla. Trong khung (framework) HTML bạn đặt
các “cửa xổ” nhìn vào bên trong cơ sở dữ liệu đặng sau website của bạn. có nhiều cửa sổ nhỏ điển hình được
gọi là các Module và thông thường một cai mở rộng hơn (như một cửa chính) cho một Component.
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
4. 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 7-8: Thiết lập chuẩn XHTML cho trang.
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 17: Chèn nhiều khối siêu dữ liệu (metadata block).
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 XML Setup File
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
5. 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).
6. 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.
<?php if (mosCountModules( 'right' )) { ?>
<td>
<?php mosLoadModules( 'right' ); ?>
</td>
<?php } ?>
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 đó.
Dùng các hậu tố lớp (Class Suffixes)
PHẢI LÀM
Administrator Templates – các template cho Administrator
Lúc này kiểu mẫu cho các Administrator Template vẫn đang hình thành. Mong rằng cả hai hệ thống template
Site và Administrator sẽ hợp nhất vào một API chung trong tương lai. Dù vậy, một số ghi chú được tạo ra ở
đây để tham khả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ụ:
<table width="100%" class="menubar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="menubackgr"><?php mosLoadAdminModule( 'fullmenu' );?></td>
<td class="menubackgr" align="right">
<div id="wrapper1">
<?php mosLoadAdminModules( 'header', 2 );?>
</div>
</td>
<td class="menubackgr" align="right">
<a hreef="index2.php?option=logout”
style="color: #333333; font-weight: bold">Logout</a>
<strong><?php echo $my->username;?>&nbsp;
</td>
</tr>
</table>
7. Hàm mosLoadAdmiModule lấy một đối số, tên của module bỏ đi tiền tố “mod_”. Ô đầu tiên của bảng ví dụ tải
Full Menu module (đó là mod_fullmenu).
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):
• 0 = Đầu ra liên tục mà các module xuất ra.
• 1 = hiển thị mỗi module trong một “Tab”
• 2 = hiển thị mỗi module được bao bọc trong một thẻ tag <div>
Đị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.
8. mod_quickicon
Quick Icon module hiển thị một mảng các biểu thượng shortcut.
The Control Panel
Control Panel cho Administrator là một file riêng biệt, cpanel.php, nó được bao gồm trong template. Nó là
một file riêng biệt để cho phép tùy biến vùng này theo các site khác nhau và các user thích có nhu cầu khác
biệt cho những phần giá trị của màn hình cố định. File Control Panel không cần được bao gồm nhưng nếu nó
được bao gồm thì nó sẽ hiển thị một số Administrator Module được publish trong vị trí “cpanel”. File
cpanel.php có thể chỉ đơn giản như ví dụ dưới đây:
<?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.
*/
/** ensure this file is being included by a parent file */
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.'
);
?>
<tableclass="adminform">
<tr>
<td width="100%" valign="top">
<?php mosLoadAdminModules( 'cpanel', 1 ); ?>
</td>
</tr>
</table>
File tham chiếu hàm và Tham chiếu hàm
Các hàm sau đây đang sẵn dùng cho các nhà phát triển template.
mosLoadComponents
Cú pháp:
mosLoadComponents( $name )
Tải một component. Ví dụ “banners”. Không bao gồm tiền tố “com_”.
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à:
9. ● 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:
<!-- Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>
Module output
</td>
</tr>
</table>
<!-- Individual module end -->
● 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:
<!-- Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr> <td align="top">
<!-- Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td> Module output </td>
</tr>
</table>
<!-- Individual module end -->
</td>
<td align="top">
<!-- ...the next module... -->
</td>
</tr>
</table>
● -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:
Module 1 OutputModule 2 OutputModule 3 Output
● -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:
<!-- Individual module -->
<div class="moduletable[suffix]">
<h3>Module Title</h3>
Module output
</div>
<!-- Individual module end -->
● -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.
<!-- Individual module -->
<div class="module[suffix]">
10. <div>
<div>
<div>
<h3>Module Title</h3>
Module output
</div>
</div>
</div>
</div>
<!-- Individual module end -->
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:
<?php mosShowHead(); ?>
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:
<?php mosMainBody(); ?>
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)
Nhận dạng ngôn ngữ trong thẻ tag Head
Yếu tố HTML phải bao gồm thuộc tính lang (ngôn ngữ).
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>">
<head>
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.:
• ISO 639 language codes
• Identifying the primary language
Cung cấp một tóm tắt các bảng
Yếu tố TABLE nên bao gồm thuộc tính tóm tắt để diễn tả cấu trúc và mục đích của nó.
<table summary="Hits on news compared to help">
<caption>Hits on news compared to help</caption>
<!--table cells here-->
</table>
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:
• Providing summary information
• Layout Tables
Văn bản liên kết
Tạo đoạn văn bản liên kết khi chúng la số liệu trong ngữ cảnh và cũng phải chắc chắn rằng các địa chỉ liên
11. kết khác nhau có văn bản khác nhau. Ví dụ, cho phép dùng “click here”. Tham khảo:
• 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:
• Labeling form controls
• Forms - Section 508 Accessibility
