Cơ chế templatetrongjoomla 1.5

template Nội dung của Module Nội dung của Component Khái niệm cơ bản về template Cơ chế template trong Joomla... Khái niệm cơ bản về template Cấu trúc files của 1 template gfavicon.ico C

Trang 1

Cơ chế template trong

Joomla! 1.5

Bùi Huy Thắng

Trang 2

Trong 45 phút tới

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

2 Chức năng nâng cao của template

3 Nguồn thông tin tham khảo

Trang 3

Joomla! template cơ bản

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

Trang 4

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

Cơ chế template trong Joomla

Trang 5

Thành phần trong Joomla! template

Nội dung của Module Nội dung của Component

Trang 6

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

gfavicon.ico

Trang 7

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

Trang 8

Firefox IE Opera Chrome Safari

Trang 9

index.php

Trang 10

Tạo file templateDetails.xml

1 Khai báo metadata về file XML

2 Khai báo metadata về template

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

template

4 Khai báo các vị trí cho module

Trang 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" install.dtd">

Trang 12

Khai báo metadata về template

Trang 13

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

<files>

<folder>images/</folder>

</files>

Trang 14

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

<position>bottom</position>

</positions>

Trang 15

Tạo file index.php

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

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

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

Trang 16

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

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

$this->language; ?>" lang="<?php echo $this->language; ?>“ dir="<?php echo $this->direction; ?>”>

Trang 17

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

<head>

<jdoc:include type="head" />

>/templates/system/css/system.css" type="text/css" />

>/templates/system/css/general.css" type="text/css" />

type="text/css" />

</head>

Trang 18

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

<body>

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

<jdoc:include type="component" />

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

</body>

Trang 19

Thuộc tính cho template

Chức năng nâng cao

Trang 20

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

Trang 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

Trang 22

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

Trang 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.ini

3 Tạo code PHP để xử lý giá trị của thuộc tính

Trang 24

Khai báo trong file templateDetails.xml

<param name="templateColor" type="list" default="blue"

</param>

</params>

Trang 25

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

templateColor=blue

Trang 26

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

<?php

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

$this->addStyleSheet( $this->baseurl '/templates/' $this->template

?>

Trang 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ợp

2 Trên thực tế hay dùng nhất là

List Radio Text

Trang 28

Template override

Trang 29

Template override là gì?

Trước khi override Sau khi override

Trang 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

Trang 31

Mô hình MVC là gì?

Hiển thị

nội dung

Nội dung

Điều khiển Nội dung

Trang 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

Trang 33

Views và Layout

Trang 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/

Trang 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

Trang 36

Tạo một override cho component

Trang 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 copy

4 Cập nhật thông tin trong file templateDetails.xml

Trang 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ị overridearticle/ <- folder mang tên view sẽ bị override

com_user/

login/

Trang 39

Copy file View gốc của component

Trang 40

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

Trang 41

Override module cũng tương tự

Copy

/components/mod_mainmenu/tmpl/default.phpvào

/templates/your_template/html/mod_mainmenu/default.php

Trang 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ác

4 Override chỉ có giá trị cho template mà bạn đang

override

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

Trang 43

Module Chrome

Trang 44

Module Chrome là gì?

modChrome_xhtml modChrome_mystyle

jdoc:include type=“modules”

name=“left”

style=“xhtml mystyle”

HTML CSS JS IMAGES

templates/system/html/modules.php your_template/html/modules.php

Trang 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

Trang 46

Module chrome khác gì Module override?

Module chrome wrapper

Modulecontent / override

Trang 47

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

Trang 48

Tạo một module chrome

Trang 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ợp

3 Tạo code thực thi hàm để có module chrome mong

muốn

Trang 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

Trang 51

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

<?php function modChrome_customh( $module , &$params , &$attribs ){

Trang 52

Tạo code thực thi hàm

<?php function modChrome_customh($module, &$params, &$attribs){

Trang 53

Nói thêm về jdoc:include

<jdoc:include type="modules" name="left"

Gọi module position

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

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

Trang 54

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

Trang 55

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

Trang 56

Nguồn thông tin tham khảo

Định dạng
Số trang	56
Dung lượng	4,18 MB