вторник, 2 октября 2012 г.

Fluid или изучаем новое шаблонирование в Typo3


Так что же такое Fluid? 100%, что многие, наверняка, слышали это словечко, но до конца не понимали, о чем идет речь. Не знаю почему, но чаще всего люди думают, что fluid это нечто необходимое для написания современных экстеншенов (плагинов) для Typo3. Но это не так. Это нечто вовсе не флюид, а - extbase. А fluid это, всего-навсего, новый механизм шаблонирования или шаблонизатор, как я часто выражаюсь, такой же как automaketemplate и templavoila. Расширения написанные с помощью extbase используют fluid для шаблонизации вывода.

Чем же хорош флюид и почему перейдя на него я не хочу ничего другого? Отвечаю, флюид лишен всех тех недостатков, которыми обладают automaketemplate и templavoila. Я бы сказал, что fluid это симбиоз этих двух шаблонизаторов, который, к тому же, наделён и множеством дополнительных возможностей о которых я как-нибудь расскажу.

Чтобы лучше понять, что я имею ввиду, рассмотрим пример, который будет полезен не только тем кому интересен fluid, но и тем кто установил Typo3 и не знает что дальше с ней делать.

Итак, превратим сверстанные html файлы в шаблоны Typo3 при помощи fluid.

1. Создаем необходимую структуру директорий. 

Считаем, что мы только что установили Typo3 и папка fileadmin - пуста. Переходим в fileadmin и создаем в ней следующие директории:
templates, а внутри templates поддиректории - css, js, images - это стандартное хранилище тех файлов, которые создал верстальщик. Если есть желание или необходимость то сами html файлы можно скопировать в корень fileadmin\templates\. Но я этого не делаю, чтобы они не мозолили глаза. 
Теперь создаем более интересные директории, которые напрямую связаны с работой fluid:
layouts, pages и partials. 

Объясню назначение каждой из них. 

Папка layouts.

Каким бы ни был дизайн наших страниц (двух-, трех-колоночный или еще что-то) у всех страниц есть общие блоки - header, content, footer и т.д. После того как общие блоки выявлены, на базе наших сверстанных файлов в папке layouts создаем 1 файл - default.html, который может выглядеть примерно так:
<header>
<div id="header" class="header-bg">
<div class="wrap">
<!-- Здесь будет лого --><f:cObject typoscriptObjectPath="lib.logo" />
<!-- Место для меню сайта --><f:cObject typoscriptObjectPath="lib.sitemenu" />
</div>
</div>
</header>
<!--end header-->
    <div id="main">
<div class="wrap">
<!-- Бредкрамб будет тут --><f:cObject typoscriptObjectPath="lib.breadcrumb" />
<div class="clear"></div>
<!-- Область контента --><f:render section="Body" />
</div>
</div>
<!-- end content -->
<footer>
<!-- Копирайт --><f:render partial="site_footer" />
</footer>  
<!--end footer-->
Как видим, содержимое данного файла представляет собой кастрированную версию исходного html-файла. Идея такой кастрации такова, что вместо динамического контента мы подставляем либо имена  объектов Typo3 (например, lib.sitemenu или lib.copyright), либо имена html-секций (например, section="Body"), которые описываются файлами из директории pages, либо имена html-партиалсов (например, partial="site_footer"),  которые описываются файлами из директории partials. Я думаю, что истинные любители Typo3 глядя на этот маленький кусочек html-шаблона уже поняли всю прелесть fluid.

Папка pages

Т.к. наш layout содержит секцию Body - <f:render section="Body" />, то мы должны описать её.
Однако тут не все так просто. По-сути, данная секция отвечает за отображение основного контента сайта, а контент как известно бывает разный. Рассмотрим случай когда контент размещается на странице в одной или двух колонках. Для этого в данной директории создаем 2 файла: 1Columns.html и 2Columns.html.

Содержимое 1Columns.html:
<f:layout name="default" />
<f:section name="Body">
<div class="col">
{content -> f:format.raw()}
</div>
<!--end col-->
</f:section> 
Содержимое 2Columns.html:
<f:layout name="default" />
<f:section name="Body">
<div class="left-col">
{content -> f:format.raw()}
</div>
<!--end left-col-->
<div class="right-col">
{content_right -> f:format.raw()}
</div>
<!--end right-col-->
</f:section>
Что означает {content -> f:format.raw()} я опишу ниже. А сейчас хочу обратить внимание на некоторые очень важные вещи. Все настройки fluid чувствительны к регистру! Если в файле layouts\default.html написано section="Body", то в файлах 1Columns.html и 2Columns.html имя этой секции тоже должно начинаться с большой буквы. Следующий важный момент. Обратите внимание на первую строку для 1Columns.html и 2Columns.html. Она одинаковая для обоих файлов и может даже показаться магической - почему именно layout name="default"? Да потому, что слово "default" не что иное как своеобразная ссылка на файл layouts\default.html.

Папка partials

Напомню, что наш файл шаблона - layouts\default.html вместо футера содержит ссылку на html-фрагмент (partials) при помощи тега - <f:render partial="site_footer" />. Как вы уже догадались - партиалы описываются здесь, в этой директории. Но происходит это несколько иначе чем с секциями (см. выше). Достаточно создать файл partials\site_footer.html и его содержимое сразу же попадет в основной шаблон. Вот пример партиала:
<div class="copyright">
        <div class="f-left">
          <address>
          <f:cObject typoscriptObjectPath="lib.copyright" />
          </address>
        </div>
        <div class="f-right">
          <address>
          <f:cObject typoscriptObjectPath="lib.company" />
          </address>
        </div>
</div>
Как видим, партиалы это тоже не статический фрагмент html-кода, и он также может содержать ссылки на объекты Typo3, которые создаются с помощью typoscript.

Ну вот и все, наша страница разбита на элементарные составляющие или иными словами она - размэплена. Первая часть марлизонского балета закончена - html-шаблон готов.

2. Настройка backend_layout  

Для того, чтобы администратору или редактору в админке (BE) было проще и удобнее редактировать контент, в Typo3 придумали backend_layout-ы. Т.к. мы имеем дело с двумя вариантами дизайна (в 1 или в 2 колонки), то подготовим соответственно две записи backend_layout в системной папке - SF Global layout, которую я создал ранее.


Режим редактирования backend_layout имеет 2 режима работы - графический и текстовый:


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

Так или иначе, но в итоге, для одно-колоночного дизайна поле Config должно содержать:
backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Main content
colPos = 0
}
}
}
}
}
а для двух-колоночного дизайна:
backend_layout {
colCount = 3
rowCount = 1
rows {
1 {
columns {
1 {
name = Main content
colspan = 2
colPos = 0
}
2 {
name = Right content
colPos = 1
}
}
}
}
Если вы внимательно посмотрите на последнее определение бэкенд-лайаута, то можете удивиться и задать себе вопрос - зачем же нужно ставить colCount = 3, если колонок то всего две? Но посмотрите ниже и вы увидите, что для первой (левой) колонки имеется параметр - colspan = 2 (прям как в html-таблицах). Таким образом, мы получаем 2 колонки как и планировали, но ширина левой будет в 2 раза шире, чем ширина правой колонки. Я это сделал для того, чтобы бэкенд мне сильнее напоминал внешний вид FE-страниц.


После создания каждого backend_layout записывайте сразу id каждой новой записи, т.к. это нам скоро пригодится.

Чтобы присвоить странице любой из этих лайаутов необходимо перейти в свойства страницы и на закладке Appearence найти параметр Backend Layout (this page only) и выбрать из выпадающего списка нужную строку.


В результате, двух-колоночная страница  в BE примет следующий вид:


Я думаю, что вы согласитесь с тем, что данный вид более приятен и реалистичен чем те 4 колонки, которые нам даются по-умолчанию:



3. Создаем Typo3-шаблон

Теперь, когда практически все готово, остался один-единственный вопрос - как контент из левой и правой колонки редактора попадает соответственно в левую и правую колонку html-шаблона?

Для этого нужно создать еще один шаблон, так называемый - Typo3-шаблон сайта. Ни один сайт на Typo3 не может без него обойтись! Если такого шаблона нет, то ваш сайт будет выглядеть примерно так:


Чтобы создать Typo3-шаблон для нашего сайта мы должны перейти в режим Template, выбрать корневую страницу дерева и нажать кнопку Create template...


После того, как Typo3-шаблон создан мы должны увидеть следующий экран:


Теперь в разделах Constants и Setup мы можем вводить наш typoscript. У меня эти разделы, как правило содержат по одной строке. 
Для Constants:
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/ts/constants.ts">
Для Setup:
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/ts/setup.ts"> 

Существует много причин почему лучше делать именно так, но мне с текстовыми файлами constants.ts и setup.ts работать в обычном текстовом редакторе, например notepad++, намного приятнее. Естественно, что constants.ts и setup.ts нужно создать в папке fileadmin/templates/ts/ самостоятельно, а не ждать чуда от typo3. Но это уже на усмотрение каждого.

Открываем файл constants.ts и создаем две константы с помощью таких строк:
domain = http://www.domain.com/
PathToFiles = fileadmin/templates/

И наконец, добавляем typoscript в setup.ts - самый главный конфигурационный файл сайта.
Я приведу минимум строк необходимых для начала работы.
page = PAGE
page {
typeNum = 0
config {
baseURL = {$domain}
        }
includeCSS {
file = {$PathToFiles}css/style.css
}
includeJSFooter {
file10 = {$PathToFiles}js/jquery-1.7.1.min.js
file20 = {$PathToFiles}js/script.js
}
        # Настройки Fluid
10 = FLUIDTEMPLATE
10 {
  # Указываем пути к layout-ам и partial-ам
partialRootPath = {$PathToFiles}partials/
layoutRootPath = {$PathToFiles}layouts/
  # Делаем привязку backend_layout к html-шаблонам
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
# Двух-колоночный html-шаблон привязываем к backend_layout с id=1
1 = TEXT
1.value = {$PathToFiles}pages/2Columns.html # Одно-колоночный html-шаблон привязываем к backend_layout с id=2
2 = TEXT
2.value = {$PathToFiles}pages/1Columns.html # Установка дефолтного html-шаблона (двух-колоночный)
default = TEXT
default.value = {$PathToFiles}pages/2Columns.html
}
  # Загоняем контент из колонок в переменные
variables {  
  # Содержимой главной колонки (её номер = 0) соответствует переменная - content
content < styles.content.get
content {
select.where = colPos = 0
wrap = <!--TYPO3SEARCH_begin-->|<!--TYPO3SEARCH_end-->
}
   # Содержимой правой колонки (её номер = 1) соответствует переменная - content_right
content_right < styles.content.get
content_right {
select.where = colPos = 1
wrap = <!--TYPO3SEARCH_begin-->|<!--TYPO3SEARCH_end-->
}
   # Содержимой левой колонки (её номер = 2) соответствует переменная - content_left (добавил ее на всякий случай)
content_left < styles.content.get
  content_gray {
  select.where = colPos = 2
  wrap = <!--TYPO3SEARCH_begin-->|<!--TYPO3SEARCH_end-->
}
}
}
}

Помните содержимое файлов 1Columns.html и 2Columns.html? Оба файла содержат такое вхождение: {content -> f:format.raw()}, а файл 2Columns.html еще и {content_right -> f:format.raw()}. Только что мы указали откуда будет браться контент для данных переменных.

И таких переменных может быть сколько угодно. По умолчанию Typo3 позволяет иметь 4 столбца для ввода контента, но на самом деле их может быть сколько угодно. Мой личный рекорд - 16. И только благодаря backend_layout-ам эти 16 колонок выглядят как мозайка, а не как полосатый матрац.

Теперь по поводу непонятной конструкции f:format.raw() , которая могла некоторых удивить. Это так называемый флюидовский ViewHelper (помощник, что ли). Привыкайте к данному термину, т.к. fluid имеет большое количество таких помощников. Именно этот - format.raw, выводит контент без всяких преобразований, как есть. Подробнее о всех ViewHelper-сах можно почитать тут.

Ну вот и все. Если что-то забыл - допишу, если где-то ошибся - поправьте меня. И переходите на fluid, не пожалеете!!!

О себе

Моя фотография
Вадим Гиркало
Фрилансер, веб-разработчик сайтов на базе бесплатной, мощнейшей и очень гибкой CMS системы - TYPO3.
Просмотреть профиль

Позвонить мне в Skype

TOP - 3