====== Шаг4. Оптимизация шаблонов. Добавление постраничного вывода ====== ===== Вынесение шаблонов form_fields.html и form_errors.html из шаблонов форм ===== Поля формы и ошибки валидации в шаблонах template/news/create.html и template/news/edit.html выводятся полностью одинаково. Воспользуемся тегом [[limb3_2007_4:ru:packages:wact:tags:core_tags:core_include_tag|]], который является как бы аналогом функции include PHP. Создадим шаблон template/news/form_fields.html следующего содержания: :
:
:
:
Теперь шаблон template/news/form_errors.html следующего содержания:
  {$message}
Теперь эти шаблоны подключаем в наши template/news/create.html и template/news/edit.html: Limb3 tutorial

Create news

 и Limb3 tutorial

Edit news

 Обратите внимание на использование тега . Атрибут **file** указывает на относительное имя шаблона (относительно папки template), который нужно включить в шаблон вместо тега. Что ж, уже лучше, но можно сделать еще компактнее. ===== Выделение общего базового шаблона page.html ===== Код в шаблонах create.html и edit.html до формы и после нее повторяется дважды. В других шаблонных системах мы сделали бы еще 2 шаблона: header.html и footer.html, но в WACT есть средства намного лучше. Подход header/footer имеет большой недостаток в том, что разбивает базовый шаблон на 2 составляющие, которые усложняют общее понимание шаблона в целом. При помощи WACT этот недостаток можно обойти. Воспользуемся тегом [[limb3_2007_4:ru:packages:wact:tags:core_tags:core_wrap_tag|]], который позволяет вставлять содержимое тега внуть другого шаблона, то есть как бы обворачивать один шаблон другим. Но для начала выделим шаблон page.html следующего содержимого: Limb3 tutorial Обратите внимание на тег - при помощи этого тега мы декларируем место, в которое может быть вставлен другой шаблон. Теперь изменим наши шаблоны create.html и edit.html следующим образом:

Create news

 и

Edit news

 Тег имеет атрибуты **file**, который указывает на относительное имя файла, в какой шаблон делать вставку, и **in**, который указывает, в какое место этого шаблона нужно её делать. Тег имеет обязательный закрывающий тег, который как бы отмечает зону, которая должна быть завраплена в другой шаблон. На самом деле тег дает очень широкий простор для разбиения шаблонов, однако эти возможности и принципы их использования выходят за рамки данного примера. ===== Добавление постраничного вывода ===== Список новостей может быть слишком большим для отображения на одной странице. В этом случае обычно применяют разбиение списка на страницы (пейджинация). При помощи WACT сделать разбиение на страницы проще простого. Создадим шаблон template/pager.html следующего содержимого: Shown: from {$BeginItemNumber} to {$EndItemNumber} |-- {$number} {$number} --| Total: {$TotalItems} Центральный тег при постраничном разбиении - [[limb3_2007_4:ru:packages:wact:tags:pager_tags:pager_navigator_tag|]], который ограничивает пейджер. Он содержит атрибут **items**, который указывает, какое количество элементов списка выводить на одной странице. Остальными тегами выводятся ссылки на первую (тег ), предыдущую(тег , здесь не использовался), текущую(тег ), следующую(тег , здесь не использовался) и последнюю(тег ) страницы, а также на некоторое количество страниц в середине (тег ). Также при помощи выражений {$TotalItems}, {$BeginItemNumber} и {$EndItemNumber}, который по-умолчанию поддерживаются внутри тега мы выводим общее количество элементов в списке, а также номера элементов, с которого начинается текущая страница и которым заканчивается текущая страница. Теперь необходимо этот шаблон подключить на странице отображения списка новостей и связать список новостей с пейджером. Вот новый вид шаблона template/news/display.html (мы также использовали здесь тег , точно также как и для шаблонов форм):

Newsline

Create news

ID Date Title Actions
#{$id} {$date} {$title} Edit   Delete
{$annotation}
Обратите внимание на новый атрибут тега **navigator**, который имеет в качестве значения идентификатор тега . Именно таким образом мы связали список новостей и пейджер. Более ничего делать не нужно. Если вы все сделали правильно, тогда у вас должно получиться нечто подобное этому: {{{:limb3_2007_4:ru:tutorials:basic:main_page.png|:limb3_2007_4:ru:tutorials:basic:main_page.png}}} ===== Что дальше? ===== Далее: [[step5|Шаг5. Финальные штрихи(сортировка, отображение новости целиком, пять свежих новостей на главной странице).]]