templateThiết kế      joomla
1.Căn bản làm Template và Thiết kế SiteTổng quan về làm TemplateFile dàn trangStyle Sheets – trang đinh kiểuTổng quan về l...
2: $iso = explode( =, _ISO );3: echo <?xml version="1.0" encoding=" . $iso[1] . "">n";4: /** ensure this file is being inc...
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 tr...
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íchvà cắt toàn nội du...
2. Advanced Templating ( 4 items )Tổng quanAdministrator Templates (các template cho Administrator)Tham khảo chức năngCác ...
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ảiFull Menu module (...
mod_quickiconQuick Icon module hiển thị một mảng các biểu thượng shortcut.The Control PanelControl Panel cho Administrator...
● 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ụ đầura:<!-- Individua...
<div>     <div>       <div>          <h3>Module Title</h3>          Module output       </div>     </div>  </div></div><!-...
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 textKết hợp các Điều khiển b...
Upcoming SlideShare
Loading in...5
×

Joomla developermanual

146

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
146
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Joomla developermanual"

  1. 1. templateThiết kế joomla
  2. 2. 1.Căn bản làm Template và Thiết kế SiteTổng quan về làm TemplateFile dàn trangStyle Sheets – trang đinh kiểuTổng quan về làm TemplateThe 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 atemplate: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ôntrọ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ưngbạ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.cssCss stylesheet cho template (trang định kiểu).templateDetails.xmlFile siêu dữ liệu (metadata) theo định dạng XML.template_thumbnail.pngMộ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 trangMặ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ủaPHP. 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ơinào đặt các khóa móc (key “hooks”) vào cỗ máy template Joomla. Trong khung (framework) HTML bạn đặtcá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 đượcgọ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ươnglai 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ênbả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
  3. 3. 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 notallowed. );6: ?>7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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: <?php13: 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>
  4. 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ứcnhư 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ự đượcdù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 templatecủ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ậpvà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ỉ URLtuyệ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 SheetsCSS StylesheetsPHẢI LÀMThe XML Setup FilePHẢI LÀMThe ThumbnailKhi bạn đã hoàn thành template của mình, xuất bản nó với Template Manager trong Administrator. Xem
  5. 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íchvà 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. 6. 2. Advanced Templating ( 4 items )Tổng quanAdministrator Templates (các template cho Administrator)Tham khảo chức năngCác chuẩn templateTổng quanChươ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 choAdministrator.Ẩ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ùngnà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 địnhnghĩ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ăngchiề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ÀMAdministrator Templates – các template cho AdministratorLú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 templateSite 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ợ ModuleBạn có thể thêm các module vào các Administrator template trực tiếp với mosLoadAdminModule hoặc trongcá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>
  7. 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ảiFull 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ậpkiể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êmmộ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ảnphân phối Joomla.mod_fullmenuFull Menu module hiển thị menu Administrator DHTML truyền thống. Các Content Section và Component đượcthêm động vào phần thừa của menu được định nghĩa tĩnh.mod_componentsComponents 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ềucomponent được cài đặt và sức chứa của các menu DHTML được mở rộng.mod_latestLastest Items module hiển thị các mục nội dung mới nhất.mod_mosmsgMessage module hiển thị thông điệp đã gửi trong URL.mod_onlineUsers Online module hiển thị số lượng thành viên đã log in.mod_pathwayPathway module hiển thị một đường dẫn Administrator.mod_popularMost Popular module hiển thị một danh sách các mục bài nhiều “hit” nhất.mod_statsMenu Stats module trình bày một số thông tin thống kê về các menu.mod_toolbarToolbar module hiển thị biểu tượng toolbar.mod_unreadUnread Messages module hiển thị số lượng các thông điệp cá nhân chưa đọc.mod_loggedLogged module hiển thị một danh sách các user đã login hiện thời.
  8. 8. mod_quickiconQuick Icon module hiển thị một mảng các biểu thượng shortcut.The Control PanelControl 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ácbiệ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”. Filecpanel.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àmCác hàm sau đây đang sẵn dùng cho các nhà phát triển template.mosLoadComponentsCú pháp:mosLoadComponents( $name )Tải một component. Ví dụ “banners”. Không bao gồm tiền tố “com_”.mosCountModulesCú 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”.mosLoadModulesCú 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ọnnhưng có thể là:
  9. 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ụ đầura:<!-- 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ọnnày được giới thiệu trong Mambo 4.5.2.1.<!-- Individual module --><div class="module[suffix]">
  10. 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.mosShowHeadCú 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.mosMainBodyCú 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 StandardsCác tiêu chuẩn (NHÁP)Nhận dạng ngôn ngữ trong thẻ tag HeadYế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 languageCung cấp một tóm tắt các bảngYế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ếnkhích, tham khảo thêm: • Providing summary information • Layout TablesVăn bản liên kếtTạ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. 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 textKết hợp các Điều khiển biểu mẫu với yếu tố LABELYế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 forphả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

×