How to use T3 framework to create better templates.

2. Юрий Боев

3. Въведение
JA T3 Framework e трета генерация фреймуърк, създаден от JoomlArt.
В 2.0 версията са добавени нови възможности като профили, плъгини,
теми, нова структура, мобилни теми, както и нова меню система – Мега
меню.
Фреймуъркът се състои от шаблон (JA T3 Blank) и плъгин (JA T3
Framework Plugin)
Демо: http://demo.t3.joomlart.com/joomla17/index.php/homepage

4. Какво ново във версия 2.0
• Представяне на Профилите – ново начин за управление на изгледа
на сайта, както и на други настройки на шаблона
• Административният панел е с оновен изглед и AJAX управление
• Модулярен код – скриптове, които не се използват не се зареждат
• Вградени Кеш и CSS&JS компресия
• Нова структура – новият плъгин се заема с фреймуърк функциите

5. Структура на плъгина

6. Структура на шаблона

7. Представяне на Изгледи и Блокове
• Изгледите представляват файлове, които отговарят за генерирания в
сайта код на шаблона
• Блоковете са файловете, които съдържат модулните позиции,
съдържат връзки към JS и CSS файлове и подготвят HTML
генерирането на съдържанието на сайта: header, footer, pathway и др.
модулни позиции се извикват в стандартните шаблони във файла
index.php, а тук се извикват от отделни файлове
• Главната идея на фреймуърка е уеб сайта да използва един шаблон,
но с различни изгледи за всяко едно меню: различен изглед за блог
страницата, за страницата с продукти, за началната страница и т.н.,
което до голяма степен е имплементирано вече в Joomla 1.7
• Изгледите могат да бъдат редактирани в администрацията на
шаблона, използвайки вградения редактор

8. Стандартен изглед

9. Изглед за мобилни устройства
Изглед за мобилни
устройства
Изглед за iPhone

10. Основни параметри на блоковете
• Име на блока
• <block name=“top”…>
• Този атрибут служи за идентифициране на блока, тъй като има
голяма възможност няколко блока да имат един и същи вид
• Вид на блока
• <block name=“header” type=“header”…>
• Този параметър се използва за задаване на поведението и
функционалността на блока и отговаря на имената на РНР
файловете:
• head.php
• header.php
• middle.php
• footer.php

11. Основни параметри на блоковете
• Стил на блока
• <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 – заоблен стил на модулите

12. Добавяне на допълнителни дивове
• Код на блока
• <block name=“top” markup=“2” …>
• Нов параметър, чрез който се генерират допълнителни ограждащи
дивове в началото и края на блока. markup=“1” е стандартна
стойност

13. Добавяне на допълнителни дивове
• Код на блока
• <block name=“top” markup=“3” …>
• Добавя два допълнителни дива

14. Добавяне на вътрешни дивове
• Код на блока
• <block name=“top” block-inner=“3” …>
• Добавя допълнителни дивове, които ограждат блока.

15. Добавяне на вътрешни дивове
• Код на блока
• <block name=“top” main-inner=“2” …>
• Добавя допълнителни дивове, които се вграждат в main блока.

16. Добавяне на вътрешни дивове
• Код на блока
• <block name=“top” wrap-inner=“2” …>
• Добавя допълнителни дивове, които ограждат main блока.

17. Премахване на дивове
• Код на блока
• <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…)

18. Широчини колоните
• Широчина на средната колона
• <block name=“middle” type=“middle” colwidth=“20” …>
• Чрез този параметър се задава широчина на колоните в средната
колона. Напр. Лявата и дясната ще имат широчина от по 20%, а
основната колона ще заеме останалите 60%
• Широчина на определена колона
• <block name=“right” width=“25” …>
• По този начин дясната колона ще заеме 25% от основната
широчина на сайта

19. Позиции в центъра на шаблона
• Стандартни колони
• Стандартно разположените в центъра колони са left, main и right.
Те могат да бъдат разположени в различна последователност:

20. Позиции в центъра на шаблона
• Активиране на mass позициите
• Активирането на допълнителните позиции над или под лявата,
дясната или централната колона се извършва така:

21. 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” – дефинира широчината на модула

22. Въпроси?

23. Благодаря ви!