joomla! template development

Cơ chế template

trong

Joomla! 1.5

Bùi Huy ThắngBraveBits Co,. Ltd

Trong 45 phút tới...

1. Khái niệm cơ bản về template2. Chức năng nâng cao của template3. Nguồn thông tin tham khảo

3

Joomla! template cơ bản

Khái niệm cơ bản về template

4

Joomla! template trông như thế nào?


Cơ chế template trong Joomla

5

Thành phần trong Joomla! template

Nội dung của Module

Nội dung của Component



6


Cấu trúc files của 1 template

/my_template

/images

/css

logo.png

template.css

component.php

index.php

templateDetails.xml

template_thumbnail.png

favicon.ico


7


Hãy thử tạo một template


8


Chuẩn bị các công cụ

Miễn phí

Có phí

Notepad++ Eclipse

Kiểm tra

Dreamweaver TopStyle

Firefox IE Chrome SafariOpera


http://jeez.eu/wp-content/uploads/2009/09/568395745.png

http://javadocs.files.wordpress.com/2008/12/eclipse_ide.jpg

9

Những file cần chú ý

/my_template

/images

/css

logo.png

template.css

component.php

templateDetails.xml

template_thumbnail.png

favicon.ico


index.php


10

Tạo file templateDetails.xml


1. Khai báo metadata về file XML2. Khai báo metadata về template3. Khai báo danh sách file và folder

trong template4. Khai báo các vị trí cho module


11

Khai báo metadata về file XML


<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template

1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">

<install version="1.5" type="template">


12

Khai báo metadata về template


<name>JDay2009</name>

<creationDate>2009-10-31</creationDate>

<author>BraveBits Co,. Ltd</author>

<authorEmail>[email protected]</authorEmail>

<authorUrl>http://www.bravebits.vn</authorUrl>

<copyright>BraveBits Co,. Ltd</copyright><version>1.0</version><license>GNU/GPL</license><description>Demo template for Joomla! Day HCMC 2009</description>


BB1

todo:Add screenshot of template meta data in Template ManagerMake arrows from each tag to their data in template manager

13

Khai báo danh sách file và folder


<files>

<folder>images/</folder>

<folder>css/</folder>

<filename>index.html</filename>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>favicon.ico</filename>

</files>


BB1

todo:Add screenshot of windows explorer with files.

14

Khai báo các vị trí cho modules


<positions>

<position>top</position>

<position>bottom</position>

</positions>


BB1

todo:Add screenshot of module's settings pageMake arrow from left right positions to SS

15


Tạo file index.php

1. Khai báo khởi đầu cho file index.php2. Khai báo nội dung trong thẻ

<head>3. Khai báo nội dung trong thẻ

<body>


16

Khai báo khởi đầu cho file index.php


<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>“ dir="<?php echo $this->direction; ?>”>


17

Khai báo nội dung trong thẻ <head>


<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template.css" type="text/css" />

</head>


18

Khai báo nội dung trong thẻ <body>


<body>

<jdoc:include type="modules" name="top" />

<jdoc:include type=“message" />

<jdoc:include type="component" />

<jdoc:include type="modules" name="bottom" />

</body>


19

Thuộc tính cho template


Chức năng nâng cao

20

Thuộc tính cho template là gì?



21

Tại sao nên dùng thuộc tính?


1. Cho phép người dùng tuy biến template mà không cần sửa code

2. Tạo thêm nhiều tính năng cho template mà không làm quá trình sử dụng phức tạp hơn

3. Tiết kiệm thời gian để tùy biến template


22

Thêm một thuộc tính cho template



23

Thêm thuộc tính cho template



1. Khai báo về thuộc tính trong file templateDetails.xml

2. Lưu giá trị của thuộc tính trong file params.ini3. Tạo code PHP để xử lý giá trị của thuộc tính

24

Khai báo trong file templateDetails.xml



<params>

<param name="templateColor" type="list" default="blue" label="Template Color" description="Choose the template color.">

<option value="blue">Blue</option>

<option value="red">Red</option>

</param>

...

</params>

BB1

Add screenshot of template settings pageMake arrows from each tag attribute to their data in template manager

25

Lưu giá trị trong file params.ini



templateColor=blue

26

Tạo code PHP để xử lý giá trị



<?php

$tplColor = $this->params->get( 'templateColor' );

$this->addStyleSheet( $this->baseurl . '/templates/' . $this->template . '/css/' . $tplColor .'.css' );

?>

27

Những định dạng thuộc tính có sẵn



1. Joomla! có sẵn 21 định dạng cho mọi trường hợp2. Trên thực tế hay dùng nhất là

List

Radio

Text

28

Template override



29

Template override là gì?



Trước khi override

Sau khi override

30

Tại sao nên dùng override?


1. Có code HTML đặc biệt mà không cần động đến code của extension

2. Có được code HTML tối ưu hóa cho công cụ tìm kiếm

3. Tiết kiệm thời gian để tùy biến template


31

Mô hình MVC là gì?



Hiển thịnội dung

Nội dung

Điều khiển

Nội dung

32

Mô hình MVC trong Joomla!



Xem nội dung trên trang web

Joomla!

Phân tích yêu cầu và đưa về component phù

hợp(com_content)

Nội dung cần thiết được lấy từ DB và đưa

về View

Nội dung được hiển thị căn cứ vào View va

Layout

33

Views và Layout



Views Layout

34

Files của Views và Layout



com_content/ <- folder chứa file chung thuộc component

views/ <- folder chứa file thuộc phần View

article/ <- folder chứa file thuộc View một bài viết

tmpl/ <- folder chứa file layout

default.php <- file layout

form.php <- file layout

category/

tmpl/

35

Đối với Module



mod_mainmenu/ <- folder chứa file chung thuộc module

tmpl/ <- folder chứa file layout

default.php <- file layout

helper.php <- helper file với logic xử lý của module

mod_mainmenu.php <- file chính của module

mod_mainmenu.xml <- file thông tin về module

36

Tạo một override cho component



37

Tạo một override cho component



1. Tạo folder theo cấu trúc chuẩn trong template folder

2. Copy file View gốc của component vào folder mới được tạo

3. Thực hiện override trên file mới được copy4. Cập nhật thông tin trong file templateDetails.xml

38

Tạo folder theo cấu trúc chuẩn



YourTemplate/ <- folder template của bạn

html/ <- folder chứa các file overrides

com_content/ <- folder mang tên component sẽ bị override

article/ <- folder mang tên view sẽ bị override

com_user/

login/

39

Copy file View gốc của component



Copy/components/com_content/views/article/tmpl/default.php

vào/templates/your_template/html/com_content/article/default.php

40

Thực hiện override trên file mới



. . .<td class="contentheading<?php echo $this->escape($this-

>params->get('pageclass_sfx')); ?>" width="100%"><h2>

<?php echo $this->escape($this->article->title); ?> </h2>

</td>. . .

41

Override module cũng tương tự



Copy/components/mod_mainmenu/tmpl/default.php

vào/templates/your_template/html/mod_mainmenu/default.php

42

Bạn cần lưu ý



1. Bạn chỉ có thể override khi component hoặc module được thực hiện theo chuẩn MVC (có folder views/tmpl)

2. Bạn không thể override PDF và RSS feeds (phải chỉnh sửa file core)

3. Đường dẫn đến file override phải thật chính xác4. Override chỉ có giá trị cho template mà bạn đang

override 5. Lưu ý cập nhật file templateDetails.xml

43

Module Chrome



44

Module Chrome là gì?



Modules Layouts Chrome Template Browser

modChrome_xhtmlmodChrome_myst

yle

jdoc:include type=“modules” name=“left” style=“xhtml mystyle”

HTMLCSSJSIMAGES

templates/system/html/modules.php

your_template/html/modules.php

45

Tại sao nên dùng module chrome?


1. Thể hiện module style cao cấp mà cơ chế có sẵn không đáp ứng được

2. Để có thể tối ưu hóa code HTML của module phù hợp cho nhu cầu nhất định


46

Module chrome khác gì Module override?



<div id="left"> <div class="moduletable"> <h3>Main Menu</h3> <ul class="menu"> <li id="current" class="active item1"> <li class="item2"> ...... Module HTML code khác ...... </div></div>

Module position container

Module chrome wrapper

Modulecontent / override

47

Những module chrome có sẵn trong Joomla!



<div class="moduletable"> <h3>Main Menu</h3> <ul class="menu"> <li>Menuitem 1</li> . . . </ul></div>

<div class="module"> <div> <div> <div> <h3>Main Menu</h3> <ul class="menu"> <li>Menuitem 1</li> . . . </ul> </div> </div> </div></div>

<ul class="menu"> <li>Menuitem 1</li> . . .</ul>

xh

tml

non

ero

un

ded

48

Tạo một module chrome



49

Tạo một module chrome



1. Tạo hoặc sửa file modules.php trong template folder html/

2. Tạo hàm với tên và tham số phù hợp3. Tạo code thực thi hàm để có module chrome

mong muốn

50

Tạo hoặc sửa file modules.php



YourTemplate/ <- folder template của bạn

html/ <- folder chứa các file overrides

modules.php <- file khai báo hàm cho module chrome

/templates/system/html/modules.php

51

Tạo hàm với tên và tham số phù hợp



<?php function modChrome_customh($module, &$params, &$attribs){ if (!empty ($module->content)) : ?> <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?

>"> <?php if ($module->showtitle != 0) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div><?php endif; } ?>

52

Tạo code thực thi hàm



<?php function modChrome_customh($module, &$params, &$attribs){ if (!empty ($module->content)) : ?> <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?

>"> <?php if ($module->showtitle != 0) : ?> <h2><?php echo $module->title; ?></h2> <?php endif; ?> <?php echo $module->content; ?> </div><?php endif; } ?>

53

Nói thêm về jdoc:include



<jdoc:include type="modules" name="left" style="rounded" />

<jdoc:include type="module" name=“breadcrumb" style=“none" />

<jdoc:include type="modules" name="left" style="rounded mystyle" />

Gọi module position

Gọi một module đơn lẻ

Gọi nhiều chrome cùng một lúc

54

Những điều bạn cần biết



55

Những trang web dùng Joomla! ấn tượng



http://www.palgor-publicidade.com/http://www.spacemakerwardrobes.com.au/http://www.lonestar.com.au/http://www.childrenoftherevolution.com.au/http://www.cultureelcafe.nl/http://btl.bialystok.pl/http://www.waterandstone.com/http://www.55thinking.com/

http://www.palgor-publicidade.com/

http://www.spacemakerwardrobes.com.au/

http://www.lonestar.com.au/

http://www.childrenoftherevolution.com.au/

http://www.cultureelcafe.nl/

http://btl.bialystok.pl/

http://www.waterandstone.com/

http://www.55thinking.com/

56

Nguồn thông tin tham khảo



http://docs.joomla.org/Joomla!_1.5_Template_Tutorialhttp://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_templatehttp://docs.joomla.org/Tutorial:Understanding_Joomla!_templates

http://www.compassdesigns.net/joomla-tutorials/joomla-template-tutorialhttp://www.joomlashack.com/tutorials

http://docs.joomla.org/Joomla!_1.5_Template_Tutorial

http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_template

http://docs.joomla.org/Tutorial:Understanding_Joomla!_templates

http://www.compassdesigns.net/joomla-tutorials/joomla-template-tutorial

http://www.joomlashack.com/tutorials

joomla! template development

Education