Среда, 20 Октября 2010 15:16

JA T3 Framework 2.0 для Joomla: руководство разработчика

JA T3 framework 2.0 для Joomla: рукаводство разработчика

Структура JA T3 Framework 2.0

Структура фреймворка изменилась после введения плагина JA Menu Parameters. Как результат, шаблон легче и быстрее, основные сценарии теперь содержатся внутри плагина JA T3 Framework.

Последний релиз JA T3 Framework 1.0 поставляется с плагином JA Menu Parameters предназначенным решить все вопросы, связанные с SEO, а также сделать легче управление различными меню.

JA T3 Framework 2.0 теперь включает в себя этот плагин для более легкого обновления основных файлов, отдельно от индивидуального дизайна шаблона.

Новая версия содержит новый плагин JA Typo Button который облегчает работу с редактированием специального контента

Расширения

Для начала работы с JA T3 Framework 2.0 надо иметь:

Плагин JA T3 Framework

Папка core

Что необходимо иметь для работы с JA T3 Framework 2.0 - Плагин JA T3 Framework

  • Template administration - эти файлы управляют административной панелью шаблона со всеми сценариями и внутрисистемными видами.
  • Device and browser detection scripts - это сценарии для обнаружения пользовательское устройство (настольный компьютер, мобильные устройства) и определения браузера пользователя.
  • Menu system engines - эти сценарии контроля всеми меню используемых системой T3 Framework.
  • Params и другие файлы ядра - файлы управлениями возможностями AJAX, кэшированием, переопределением функций и общими параметры.

Папка base-themes:

Что необходимо иметь для работы с JA T3 Framework 2.0 - Папка с темами

Это папки для хранения основного шаблона по умолчанию содержащая:

  • blocks для хранения всех по умолчанию блоков: IE6warning, header, footer, middle и т.д.;
  • CSS содержит основной Core CSS Framework стилей шаблона;
  • HTML содержит наполнение компонентов и модулей;
  • etc содержит дефолтные слои темы и профилей;
  • JS содержит основные шаблоны фалов с javascript;
  • page содержать макеты генерации скриптов и прочее.

Папка sample-themes:

Эта папка содержит простой шаблон, который понадобится для создания собственного шаблона.

T3 Framework 2.0 Based Template

Тема по умолчанию:

Последняя версия JA T3 Framework 2.0 теперь включает шаблон, содержащий слои по умолчанию, и таким образом он может работать как обычный шаблон для Joomla!

JA T3 Framework для Joomla - дефолтный шаблон

Эти файлы и папки содержат дефолтную тему шаблона для переопределения основных плагинов базовой темы дизайна. Подробнее:

  • может содержать блоки;
  • стили меню системы и общие стили;
  • содержит собственные изображения;
  • можно переопределить JavaScript код;
  • распознается из info.xml файла.

Специальные файлы JA T3 Framework 2.0

JA T3 Framework 2.0 для Joomla: Специальные фалы шаблона

Папка core содержит:

  • Основные слои шаблона
  • Основные профили шаблона
  • Основные темы шаблона
  • Основные вариации тем шаблона
Папка local содержит:
  • Созданные пользователем с слои
  • Созданные пользователем профили
  • Созданные пользователем вариации тем
Останльные файлы:
JA T3 Framework 2.0 для Joomla: остальные файлы Информация о файлах и папках:
  • Папка info содержит информацию о спецификациях шаблона
  • Общие файлы шаблона (thumbnail, template details, favicon).

Кнопка-плагин JA Typography

Новый плагин помогает редакторам добавлять специальные стили типографии для специального контента. JA T3 Framework для Joomla: плагин JA Typography
Кликните по этой кнопки, что бы открыть специальное окно с типографией JA T3 Framework для Joomla: окно плагина JA Typography
Наведите на один из стилей в открывшемся окне и кликните по нему, что бы применить к своему контенту.

Макеты

JA T3 Framework 1.0 представил несколько возможностей, которые позволили добавить гибкости в дизайн. Макет, по определению концепции дизайна, предназначен для расположения контента на сайте, но разработчики используют файл index.php, который позволяет задавать лишь общие пути, и не позволяет изменять дизайн, расположения модулей или вызов скриптов. Другие файлы могут справиться с данной задачей более успешно, используя модульный дизайн.

Введение в Макеты и Блоки

Основные идеи и понятия:

  • Макеты - файлы которые содержат html генераторы для отображения внешнего дизайна сайта. Они загружают других файлов, называемые блоками для выполнения различных функций. С помощью различных стилей и позиции для этих блоков можно создавать неограниченное число макетов, которые пользователи могут выбрать и использовать для своего удобства. Эти макеты загружаются в новый шаблон index.php файл.
  • Блоки представляют собой файлы, содержащие позиции модулей, выполняющие конкретные вызовы скриптов и подготавливающие HTML генерации контента. Наиболее популярные элементы: header, footer, left, right, spotlights, pathway и др - сейчас отдельные файлы, а не как раньше элементы задаваемые в index.php.
  • Идея заключается в том, что бы иметь сайт с использованием одного шаблона и при этом иметь один уникальный дизайн для главной страницы второй для блога и третий для форума. Пользователи могут выбрать только те возможности сайта, которые им необходимы.
  • Макеты могут вкл/выкл с помощью лицевой панели UserTools.
  • Макеты могут быть настроены в административном интерфейсе при использовании встроенного редактора.
  • Макеты и блоков в стандартных или созданных пользователем темах могут переопределять в темы ядра.
  • Топология Блоков:
    • Блоки - отдельные файлы, содержащие позиции модулей: footer, mainnav, middle;
    • блоки, которые генерируются автоматически в зависимости от настроек внешнего вида: spotlights, left & right, content-mass & column-mass;
    • блоки, которые управляют специальными функциями, такими как user-tools или IE6warning не могут быть определены настройками макетов;
    • блоки вызывают динамически генерируемый контент: системные сообщения или контент компонента
    • блоки для вызова javascript и стилей

Макет по умолчанию

JA T3 Framework для Joomla: макет по умолчанию XML-файл макета: JA T3 Framework для Joomla: макет по умолчанию - xml файл Пояснение:
Этот файл содержит основной макет дизайна шаблона, где расписана расстановка всех блоков подставляемых фреймворком. Все блоки имеют стандартный стиль, порядок и позицию. Другие макеты могут изменять эти настройки блока, без необходимости изменения внутреннего кода основного макета для создания дизайна макета. Блоки макета:
  • ie6 - блок управления Microsoft Internet Explorer 6 Warning Message;
  • user-tools - блок управления инструментами пользовательского интерфейса, с помощью которого посетители сайта могут сделать навигацию по сайту более удобной;
    • color.php - блок отвечающий за переключение тем;
    • cpanel.php - блок подгрузки различных миниблоков user-tools;
    • direction.php - блок управления направлением написания теста: справо на лево, слева на право;
    • font.php - блок управления размером шрифтов;
    • layouts.php - блок определяет все макеты созданные как в ядре, так и в созданные пользователем, и отображает их на панели;
    • layout-switcher.php - блок управления переключением тем;
    • menu.php - блок управления выбором меню;
    • profiles.php- блок управления выбором настроек профиля для каждой страницы пользователя:
    • reset.php - блок обеспечивает возможность сброса настроек в стандартные;
    • screen.php - блок управления шириной шаблона;
    • themes.ph - блок управления настройками тем во время отсутствия профилей;
    • tools-mega.php - блок подгрузки параметров мегаменю
  • блоки desktop - блоки предназначенные для отображения дизайна лицевых макетов
    • content.php - блок содержит компонент вызова контента;
    • css.php – блок управляет видом шрифта логотипа, модулем с названием сайта, названием статьи и названием страницы;
    • fixheight.php - блок содержит скрипт, который уравнивает высоту левой, основной и правой колонки;
    • footer.php - блок содержит позиции для копирайта, меню и объявлений;
    • head.php - используется для подключения CSS файлов;
    • header.php - блок содержит логотип сайта и позицию для вывода модуля поиска;
    • mainnav.php - блок содержит основную навигацию по сайту;
    • message.php - блок для отображения системных ошибок;
    • middle.php - блок, в котором выводится основной контент сайта: статьи, продукты, галереи - этот блок также включает в себя левый и правый блоки ранее разработанные в виде отдельных файлов;
    • module.php и modules.php - генераторы блоков, создающие блоки для различных модульных позиций, в которых выводятся объявления новости и д.т.;
    • navhelper.php - выводит модуль с адресной строкой на сайте;
    • spotlight.php блок генерирует скрип для вывода верхнего и нижнего spotlight и не имеет значение, сколько таких блоков вы хотите использовать

Варианты макетов

Различные позиции блоков

JA T3 Framework для Joomla: позиции блоков в макете

Макет с двумя левыми колонками

JA T3 Framework 2.0 для Joomla: xml файл шаблона с двумя левыми колонками

Информация по макету:

Данный макет наследует блоки и их настройки из дефолтного макета, но изменяет положение блоков left и right.

Блоки макета:

  • блок left использует позицию left1 (по умолчанию было right1)
  • блок right использует позицию left2 (по умолчанию было right2)

Смена порядка блоков в макете

JA T3 Framework 2.0 для Joomla: порядок блоков в макете

Top Menu и позиции Left-Body-Right в макете

JA T3 Framework 2.0 для Joomla: xml  left-body-right файл

Информация по макету:

Данный пример макета подгружает все основные блоки из дефолтного макета, но меняет порядок блоков header и mainnav , и так же меняет позицию для блока left. При использовании структуры Left-Body-Right, позиции для содержимого блоков Leftи Right не устанавливаются.

Блоки макета:

  • блок mainnav перемещен наверх;
  • блок header помещен под блок mainnav;
  • блок left использует позицию макета left1;
  • блокright использует позицию макета right2;

Различные стили блоков

JA T3 Framework 2.0 для Joomla: Различные стили блоков

Стиль блока Square

JA T3 Framework 2.0 для Joomla: Стиль блока Square - xml файл

Информация по макету:

Данный пример макета подгружает все основные блоки из дефолтного макета, но к блоку right
применяется стиль "squere"

Блоки макета:

  • блок right использует style="square", настраивать дизайн возможно в template.css файле, но придется настроить modules.php в папке HTML и добавить новый код для этого стиля.;

Макеты для Мобильных телефонов

Различные функции макета так же включают функцию Mobile Ready. Эти макеты имеют свои собственные наборы блоков оптимизированные и разработанные в соответствии с конкретными стандартами. В вкладке Profiles административной панели, можно настроить эту функцию для различных видов устройств.

JA T3 Framework 2.0 для Joomla: макет для коммуникатора Макеты для коммуникатора

  • Специальный блок handheld перезаписывает, имеющиеся блоки и оптимизирует скорость загрузки:
    • footer - содержит копирайт;
    • head - содержит скрипты;
    • header - содержит логотип шаблона;
    • main - основной контент;
    • mainnav - специальный дизайн навигации по сайту;
    • toolbar - блок, который управляет отображением навигации по сайту;
Фреймворк использует данный макет со следующими устройствами:
  • Windows Mobile;
  • Android;
  • Blackberry;
  • Palm;
  • и прочее

JA T3 Framework 2.0 для Joomla: макет для iPhoneМакеты для iPhone

блоки макета для iPhone переписывают дефолтные блоки, и их дизайн соответствует стандартам iPhone:

  • footer - содержит копирайт;
  • head - содержит скрипты;
  • header - содержит логотип шаблона;
  • main - основной контент;
  • mainnav - специальный дизайн навигации по сайту;
  • menu - блок генерирует специальную систему навигации для iPhone

Параметры и атрибуты блоков

JA T3 Framework 2.0 имеет расширенные функции макетов. Блоками, которые формируют макеты можно управлять с помощью ряда параметров и настройки, которые помогут легко изменить поведение HTML кода.

Основные параметры блоков

Имя блока

Отображение: <block name="top" ...>

Цель: Этот атрибут служит идентификатором для блоков, так как всегда есть вероятность того, что некоторые из ваших блоков будут одного типа, по этому фреймворк должен знать, как определить их.

Тип блока

Отображение: <block name="header" type="header" ...>

Цель: Этот параметр определяет поведение и функциональные возможности блока, существует несколько файлов для определения поведения этих блоков:
  • head.php
  • header.php
  • middle.php
  • footer.php

Стиль блока

Отображение: <block name="top" style="JAxhtml" ...>

Цель: Этот параметр задает стиль модуля для всех модулей внутри блока. Эти стили определены в modules.php расположенном в папке your_site/plugins/system/jat3/base-themes/default/html, именно по этому Joomla! распознает, каким именно образом отображать содержимое модулей. Список стилей:
  • JAxhtml - обеспечивает чистый дизайн для модулей;
  • JArounded - обеспечивает поддержку закругленных углов в дизайне модулей.

Генерирование дополнительного блока

Разметка блока

Отображение: <block name="left" name="top" markup="2" ...>

Цель: Новый параметр для создания дополнительных тегов Div в левой или правой колонке. Идея заключается в обеспечении большей гибкости для дизайнеров. Параметры:
  • markup="1" - значение по умолчанию, нет эффектов;
  • markup="2" - расширенная разметка, добавляет Div class = "l" (l для лева) над колонной и Div class "г" (г для право). Пример:
JA T3 Framework 2.0 для Joomla: markup="2"
  • markup="3" - Комплексная разметка, добавить два Div'а: class = "tl" (Ы для вверху слева) и class = "tr" (TR для вверху справа) над колонной и два Div'а : class = "Ы" (BL для низ лева) и class = "br" (BL для низ право) и два тэга DIV по середине. Пример:
JA T3 Framework 2.0 для Joomla: markup="3"

Внутренний блок

Отображение: <block name="right" block-inner="3" ...>

Цель: Данный параметр добавляет блоки внутри исходного блока. Величина параметра показывает количество блоков, которое будет добавлено. Дополнительные блоки будут иметь классы: class="block-inner1", class="block-inner2", .. class="block-innerX". Пример: JA T3 Framework 2.0 для Joomla: добавление внутреннего блока

Внутренний main блок

Отображение: <block name="right" main-inner="2" ...>

Цель: Данный параметр добавляет блоки внутри исходного блока main. Величина параметра показывает количество блоков, которое будет добавлено. Дополнительные блоки будут иметь классы: class="main-inner1", class="main-inner2", .. class="main-innerX".

Внутренний wrap блок

Отображение: <block name="right" wrap-inner="3" ...>

Цель: Данный параметр добавляет блоки внутри исходного блока main. Величина параметра показывает количество блоков, которое будет добавлено. Дополнительные блоки будут иметь классы: class="wrap-inner1", class="wrap-inner2", .. class="wrap-innerX".

Изъять div

Убрать wrap блок

Отображение: <block name="header" no-wrap="1" ...>

Цель: изымает блок с class="wrap", блок в котором находятся все макроблоки с шириной шаблона ((header, mainnav, middle, footer...)

Убрать main блок

Отображение: <block name="header" no-main="1" ...>

Цель: изымает блок с class="main", блок в котором находятся все макроблоки с шириной шаблона ((header, mainnav, middle, footer...)

Ширина колонок в блоке middle

Ширина основной колонки

Отображение: <block name="middle" type="middle" colwidth="20" ...>

Цель: данный параметр устанавливает ширину для блоков Left, Right и main body. Блоки left и right будут иметь ширину 20%, а блок main body - оставшиеся 60%.

Ширина каждой колонки

Отображение: <block name="right" width="25" ...>

Цель: данный параметр переписывает настройки установленные в блоке middle. Увеличение параметров блоков left/right будет увеличивать ширину соответствующего блока и уменьшать ширину блока main body.

Параметр Spotlight

Общая ширина

Отображение: <block name="bottom-spotlight" type="spotlight" totalwidth="95" ...>user6,user7,user8,user9,user10</block>

Цель: данный параметр устанавливает ширину для блоков left, right и main body. Блоки left и right будут иметь ширину 20%, а блок main body - оставшиеся 60%.

Выборочная ширина

Отображение: <block name="top-spotlight" type="spotlight" special="left" specialwidth="25">user1,user2,user3,user4,user5</block>

Цель: переопределяет установленную ширин в 20% для одной из позиций макета (left или right). Параметры:

  • special="left" - задает модуль, для которого мы хотим переопределить ширину (left или right).
  • specialwidth="25" - задает значение переопределяемой ширины для выбранного модуля блока spotlight.

Темы

  • Темы отвечают за цвета в шаблоне и могут придать ему новый внешний вид.
  • Темы могут содержать CSS файлы и картинки для переопределения стилей плагина ядра, а также основных стилей шаблона.
  • Темы могут содержать HTML-код для переопределения отображения содержимого компонентов и модулей.
  • Чаще всего переопределяют тему заданную по умолчанию.
  • Также могут переопределять блоки макета для различных целей.
  • Во вкладке Profiles панели администрирования можно задать несколько тем для одного профиля, и расставить по приоритету.

Бланк темы

JA T3 Framework для Joomla: Вид Темы

  • Это бланк темы с основным макетом дизайна
  • Эта тема не имеет графики, никаких цветов, только размеры, отступы и поля.
  • Дополнительные стили должны быть добавлены в варианты темы для переопределения макета дизайна по умолчанию.

Варианты темы

  • Варианты темы переопределяют бланка темы и имеет наивысший приоритет стилей для шаблона.
  • Может использоваться для создания неисчисляемого количества разноцветных тем с контрастными цветами и графикой.

Тема по умолчанию

JA T3 Framework для Joomla: Основная Тема

Это основная тема основного шаблона поддерживаемая JA T3 Framework 2.0. Данная тема переопределила бланк темы из плагина ядра. Подробнее:

  • папка blokcs содержит блоки, которые надо переназначить.
  • папка css содержит файл template.css, необходимого для переопределения основного шаблона, и папка menu переопределяет вид системы меню.
  • папка html содержит фалы для переопределения вида отображения содержимого компонентов и модулей.
  • папка images содержит файл с логотипом и другие графические файлы, необходимые для создания дизайна темы.
  • файл info.xml содержит информацию о теме.

Тема с яркими цветами

JA T3 Framework для Joomla: Тема с контрастными цветами

Это вариант темы, которая переопределяет тему, заданную по умолчанию для основного шаблона T3 Framework 2.0.

  • папка css содержит файл template.css, необходимого для переопределения основного шаблона, и папка menu переопределяет вид системы меню.
  • файл info.xml содержит информацию о теме.

Тема с обогащенной графикой

JA T3 Framework для Joomla: Тема с обогащенной графикой

Это вариант темы, которая переопределяет тему, заданную по умолчанию для основного шаблона T3 Framework 2.0.

  • папка css содержит файл template.css, необходимого для переопределения основного шаблона, и папка menu переопределяет вид системы меню.
  • папка images содержит файл с логотипом и другие графические файлы, необходимые для создания дизайна темы.
  • файл info.xml содержит информацию о теме.

Примечание.

Фреймворк подгружает все CSS файлы, картинки и макеты:

  • Файлы плагина с основной темой
  • Файлы тем основного шаблона: CSS, изображения, макеты.
  • Файлы вариантов тем и шаблонов, созданных пользователем.

Нужно использовать только дополнительные файлы, чтобы переопределить файлы по умолчанию, и хранить все остальные без изменений. Нет необходимости использовать одинаковый код во всех файлах template.css.

Профили

Что такое профили

В основном это новый способ хранения всех настроек шаблона.

Можно создавать неограниченное число уникальных профилей, совмещающих в себе различные настройки шаблона для достижения различных дизайнерских целей, и созданные вами профили хранятся в локальной папке вашего шаблона.

Вы можете управлять профилями в Панели Профилей при администрировании шаблона.

Что они привносят в фреймворк

  • Профили взяли на себя функции меню и макетов используемые в предыдущих версиях фреймворка.
  • Переключения макета внешних страниц больше не перенаправляет пользователя на главную страницу, благодаря улучшению панели Инструментов Пользователя.
  • В ссылках больше не прописываются параметры шаблонов! Пользователь может настроить некоторые параметры сайта с внешней панели или сбросить в настройки по умолчанию, если они были переопределены специальным профилем.

Профиль по умолчанию

Профиль по умолчанию содержит все основные настройки и находится в your_site/templates/jat3_blank/core/etc/profiles/default.ini:

logoType=image
setting_font=3
setting_screen=fixed
setting_screen-fixed-screen_width=950px
hide_content_block=0
setting_direction=ltr
gfont_global=
gfont_logo=
gfont_slogan=
gfont_moduletitle=
gfont_pageheading=
gfont_contentheading=
menutype=mainmenu
setting_menu=mega
startlevel=0
endlevel=-1
ja_menu-mega-animation=slide
ja_menu-mega-duration=300
option_t3logo=1
option_font=1
option_screen=1
option_profiles=1
option_layouts=1
option_direction=1
option_menu=1
themes=core.light
desktop_layout=default
handheld_layout=handheld
iphone_layout=iphone

Варианты профилей

Остальные профили только переопределяют параметры, заданные в основном профиле. Пример:

your_site/templates/jat3_blank/local/etc/profiles/your_profile.ini

themes=orange

Данный профиль переопределяет тему используемую шаблоном с основной на тему orange, и как можно заметить, нет смысла повторять внутренний код профиля, если остальные параметры не были изменены.

Переопределение приоритетов

Шаблоны имеют возможность переопределить весь основной дистрибутив Joomla: содержание компонентов, внешний вид модулей, стили, язык и прочее.

Настройки шаблона по умолчанию хранятся в профиле по умолчанию. В последствии, остальные профили переопределяют настройки профиля по умолчанию.

Вы можете установить уникальные настройки профиля для главной страницы, для интернет магазина, для форума и для блога. Таки образом вы можете переопределить настройки профиля по умолчанию для каждой отдельной страницы или компонента настраивая свои собственные профили

Низкий приоритет

Содержит стили по умолчанию основной темы в папке base-themes:

  • CSS стили
  • макеты
  • HTML переопределения шаблона
  • изображения
  • темы

Средний приоритет

Основной шаблон T3 Framework основной темой:

  • Содержит свои собственные главные стили для переопределения стилей основной темы фреймворка
  • Не содержит JavaScript, но может переопределять другие скрипты
  • Переопределяет все параметры заданные в основной теме:
    • CSS стили
    • макеты и блоки
    • HTML переопределения шаблона
    • изображения

Высокий приоритет

Высокий приоритет имеет вариации тем, которые содержаться в шаблонах для T3 Framework, т.к. они имеют свои собственные стили, макеты и блоки, картинки и переопределения для HTML:

  • Переопределяют все в теме по умолчанию
    • CSS стили
    • блоки
    • HTML переопределения шаблона
    • изображения

Высший приоритет

  • Приоритет 0 имеют темы созданные пользователем, со своими стилями, картинками и макетами.
  • При одновременном использовании нескольких тем, приоритет может быть выставлен в Настройках Темы в Панели Профилей
  • Внешние пользователи могут выбрать все что им нужно в профиле загруженной страницы: макеты, систему меню и прочие настройки профиля.
  • Все стили с пометкой !important имеют высший приоритет.

Представление графики

JA T3 Framework 2.0 для Joomla: Представление графики

Последнее изменение Понедельник, 25 Октября 2010 20:58
Бесплатные консультации по созданию и продвижению
сайтов, тем кто зарегистрируется в хостинге www.timeweb.ru указав партнерский ID 4496

10 лет опыта в создании и продвижении сайтов.

Подробнее информация по телефону:

8 (905) 778-52-44

(Билайн Москва)

и в скайпе nportalru

В закладки

Мы в социальных сетях

button_play_red sna_twitter sna_vkontakte sna_facebook
©2010-2012 Документация Joomla CMS: компоненты joomla, шаблоны joomla, joomla 2.5, обучение joomla