• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Joomla Developer Manual 20051104 Template Vi
 

Joomla Developer Manual 20051104 Template Vi

on

  • 2,286 views

 

Statistics

Views

Total Views
2,286
Views on SlideShare
2,286
Embed Views
0

Actions

Likes
1
Downloads
121
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Joomla Developer Manual 20051104 Template Vi Joomla Developer Manual 20051104 Template Vi Document Transcript

    • template 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 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
    • 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 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
    • 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. <?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;?>&amp;nbsp; </td> </tr> </table>
    • 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.
    • 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à:
    • ● 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]">
    • <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
    • 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