Юрий Боев
ВъведениеJA T3 Framework e трета генерация фреймуърк, създаден от JoomlArt.В 2.0 версията са добавени нови възможности кат...
Какво ново във версия 2.0•   Представяне на Профилите – ново начин за управление на изгледа    на сайта, както и на други ...
Структура на плъгина
Структура на шаблона
Представяне на Изгледи и Блокове•   Изгледите представляват файлове, които отговарят за генерирания в    сайта код на шабл...
Стандартен изглед
Изглед за мобилни устройства            Изглед за мобилни            устройства                Изглед за iPhone
Основни параметри на блоковете•   Име на блока     • <block name=“top”…>     • Този атрибут служи за идентифициране на бло...
Основни параметри на блоковете•   Стил на блока     • <block name=“top” style=“JAxhtml” …>     • Този параметър определя и...
Добавяне на допълнителни дивове•   Код на блока     • <block name=“top” markup=“2” …>     • Нов параметър, чрез който се г...
Добавяне на допълнителни дивове•   Код на блока     • <block name=“top” markup=“3” …>     • Добавя два допълнителни дива
Добавяне на вътрешни дивове•   Код на блока     • <block name=“top” block-inner=“3” …>     • Добавя допълнителни дивове, к...
Добавяне на вътрешни дивове•   Код на блока     • <block name=“top” main-inner=“2” …>     • Добавя допълнителни дивове, ко...
Добавяне на вътрешни дивове•   Код на блока     • <block name=“top” wrap-inner=“2” …>     • Добавя допълнителни дивове, ко...
Премахване на дивове•   Код на блока     • <block name=“header” no-wrap=“1” …>     • Премахва <div class=“wrap”> от всеки ...
Широчини колоните•   Широчина на средната колона     • <block name=“middle” type=“middle” colwidth=“20” …>     • Чрез този...
Позиции в центъра на шаблона•   Стандартни колони     • Стандартно разположените в центъра колони са left, main и right.  ...
Позиции в центъра на шаблона•   Активиране на mass позициите     • Активирането на допълнителните позиции над или под лява...
Spotlight параметри•   Total width     • <block name=“bottom-spotlight” type=“spotlight” totalwidth=“95”        …>user6,us...
Въпроси?
Благодаря ви!
Joomla! Day 2011 T3 framework
Upcoming SlideShare
Loading in …5
×

Joomla! Day 2011 T3 framework

922
-1

Published on

How to use T3 framework to create better templates.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Joomla! Day 2011 T3 framework

  1. 1. Юрий Боев
  2. 2. ВъведениеJA T3 Framework e трета генерация фреймуърк, създаден от JoomlArt.В 2.0 версията са добавени нови възможности като профили, плъгини,теми, нова структура, мобилни теми, както и нова меню система – Мегаменю.Фреймуъркът се състои от шаблон (JA T3 Blank) и плъгин (JA T3Framework Plugin)Демо: http://demo.t3.joomlart.com/joomla17/index.php/homepage
  3. 3. Какво ново във версия 2.0• Представяне на Профилите – ново начин за управление на изгледа на сайта, както и на други настройки на шаблона• Административният панел е с оновен изглед и AJAX управление• Модулярен код – скриптове, които не се използват не се зареждат• Вградени Кеш и CSS&JS компресия• Нова структура – новият плъгин се заема с фреймуърк функциите
  4. 4. Структура на плъгина
  5. 5. Структура на шаблона
  6. 6. Представяне на Изгледи и Блокове• Изгледите представляват файлове, които отговарят за генерирания в сайта код на шаблона• Блоковете са файловете, които съдържат модулните позиции, съдържат връзки към JS и CSS файлове и подготвят HTML генерирането на съдържанието на сайта: header, footer, pathway и др. модулни позиции се извикват в стандартните шаблони във файла index.php, а тук се извикват от отделни файлове• Главната идея на фреймуърка е уеб сайта да използва един шаблон, но с различни изгледи за всяко едно меню: различен изглед за блог страницата, за страницата с продукти, за началната страница и т.н., което до голяма степен е имплементирано вече в Joomla 1.7• Изгледите могат да бъдат редактирани в администрацията на шаблона, използвайки вградения редактор
  7. 7. Стандартен изглед
  8. 8. Изглед за мобилни устройства Изглед за мобилни устройства Изглед за iPhone
  9. 9. Основни параметри на блоковете• Име на блока • <block name=“top”…> • Този атрибут служи за идентифициране на блока, тъй като има голяма възможност няколко блока да имат един и същи вид• Вид на блока • <block name=“header” type=“header”…> • Този параметър се използва за задаване на поведението и функционалността на блока и отговаря на имената на РНР файловете: • head.php • header.php • middle.php • footer.php
  10. 10. Основни параметри на блоковете• Стил на блока • <block name=“top” style=“JAxhtml” …> • Този параметър определя изгледа на всички модули в даден блок. Тези стилове се дефинират в modules.php, намиращ се в your_site/plugins/system/jat3/base-themes/default/html Списъкът с предифинирани стилове е следният: - no style – към изгледа на модула се добавя само CSS класа на модула - raw – изчистен стил на модула – без ограждащи дивове или CSS класове - xhtml – основно използван за макро блокове като header, footer… - JAxhtml – нормален дизайн на модулите - Jarounded – заоблен стил на модулите
  11. 11. Добавяне на допълнителни дивове• Код на блока • <block name=“top” markup=“2” …> • Нов параметър, чрез който се генерират допълнителни ограждащи дивове в началото и края на блока. markup=“1” е стандартна стойност
  12. 12. Добавяне на допълнителни дивове• Код на блока • <block name=“top” markup=“3” …> • Добавя два допълнителни дива
  13. 13. Добавяне на вътрешни дивове• Код на блока • <block name=“top” block-inner=“3” …> • Добавя допълнителни дивове, които ограждат блока.
  14. 14. Добавяне на вътрешни дивове• Код на блока • <block name=“top” main-inner=“2” …> • Добавя допълнителни дивове, които се вграждат в main блока.
  15. 15. Добавяне на вътрешни дивове• Код на блока • <block name=“top” wrap-inner=“2” …> • Добавя допълнителни дивове, които ограждат main блока.
  16. 16. Премахване на дивове• Код на блока • <block name=“header” no-wrap=“1” …> • Премахва <div class=“wrap”> от всеки макро блок, който заема цялата ширина на шаблона (header, mainnav, middle, footer…)• Код на блока • <block name=“header” no-main=“1” …> • Премахва <div class=“main”> от всеки макро блок, който заема цялата ширина на шаблона (header, mainnav, middle, footer…)
  17. 17. Широчини колоните• Широчина на средната колона • <block name=“middle” type=“middle” colwidth=“20” …> • Чрез този параметър се задава широчина на колоните в средната колона. Напр. Лявата и дясната ще имат широчина от по 20%, а основната колона ще заеме останалите 60%• Широчина на определена колона • <block name=“right” width=“25” …> • По този начин дясната колона ще заеме 25% от основната широчина на сайта
  18. 18. Позиции в центъра на шаблона• Стандартни колони • Стандартно разположените в центъра колони са left, main и right. Те могат да бъдат разположени в различна последователност:
  19. 19. Позиции в центъра на шаблона• Активиране на mass позициите • Активирането на допълнителните позиции над или под лявата, дясната или централната колона се извършва така:
  20. 20. Spotlight параметри• Total width • <block name=“bottom-spotlight” type=“spotlight” totalwidth=“95” …>user6,user7,user8,user9,user10</block> • Тази настройка ще презапише стандартната ширина от 100%• Custom width • <block name=“bottom-spotlight” type=“spotlight” special=“user6” specialwidth=“25” …>user6,user7,user8,user9,user10</block> • special=“user6” – дефинира на кой модул ще бъде зададена специална широчина • specialwidth=“25” – дефинира широчината на модула
  21. 21. Въпроси?
  22. 22. Благодаря ви!

×