Разумеется, посетители видят, что всё множество страниц сайта оформлены единообразно. Есть только отличия в содержимом левых и правых колонок в разных разделах, кое-где нет правой колонки, кое-где имеются комментарии внизу страниц, где-то есть дерево ссылок нижней части контента, а где-то его нет.
Это достигается использованием единообразных шаблонов. Шаблон вот этой страницы называется YAML: БЛОГ MODX и выглядит так:
{ {CSS_01_all_pages_head} }
{ {CSS_02_all_pages_start} }
{ {CSS_03_all_pages_start_left} }
{ {ЛЕВАЯ-ОБЩЕЕ} }
{ {CSS_04_all_pages_end_left_start_right} }
{ {MODx-ссылки} }
{ {CSS_05_all_pages_end_right_start_center} }
{ {НАВИГАЦИЯ ПЕЧАТЬ АННОТАЦИЯ КОНТЕНТ} }
[ !ru_AuthorAndDate?tpl=`cad_author_and_date`! ]
{ {Список нижний} }
{ {CSS_06_all_pages_end} }
Здесь мы вообще не видим кода HTML! Весь шаблон состоит из чанков.
Здесь и в других местах, где демонстрируется код страниц мы вставляем лишние пробелы между двумя фигурными скобками ({ { } }), между квадратными скобками ([ [ ] ]), между квадратной скобкой и звездочкой ([ * * ]), между квадратной скобкой и восклицательным знаком ([ ! ! ]). Всё это синтаксические элементы MODx, если бы мы не вставляли лишние пробелы, специальные теги просто бы вычислялись.
Чанки (элементы шаблонов в терминах Etomite) - это просто любой HTML-код, в котором также могут быть другие чанки, специальные теги MODx и вызовы сниппетов. Каждый шаблон является как бы большим чанком верхнего уровня. Вызов имени чанка обрамляется парами открывающих и закрывающихфигурных скобок. При отправке страницы в браузер пользователя взов чанка заменяется его кодом. Чанки могут быть вложенными, но тут надо подходить разумно. Каждое обращение к чанку требует выполнения запроса из базы данных и влияет на скорость обработки страниц.
Некоторые чанки нашего сайта
Имена некоторых чанков нашего сайта начинаются с префикса CSS_. Это мы сами придумали такие имена, чтобы выделить чанки, в которых содержится разметка страницы. Любое необдуманное изменение таких чанков приведет к ломке разметки страниц. Вызывать такие чанки нужно в строго определенном порядке.
А вот чанки с более "человеческим" именами, наподобие ЛЕВАЯ-ОБЩЕЕ, содержат просто какие-то тексты, которые нужно вставить в требуемые места. Чанк, названный ЛЕВАЯ-ОБЩЕЕ вполне можно вставить и в правую колонку, или вообще удалить - верстка страницы от этого не испортится.
Чанк CSS_01_all_pages_head
Используется для формирования head всех страниц сайта. Имеет вид:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>[ (site_name) ] | [ *pagetitle* ]</title> <meta content="text/html; charset=[ (modx_charset) ]" http-equiv="Content-Type" /> <base href="[ (site_url) ]" /> <link href="assets/templates/yaml/site.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="assets/templates/yaml/ie6_or_less.css"> </link> <![endif]--> <script src="assets/templates/yaml/js/common.js" type="text/javascript"> </script> </head>
Этот чанк формирует тег head, заголовок сайта, загружает таблицы стилей и JS-файл.И делает это единообразно для всех страниц, так как этот чанк используется во всех шаблонах. Если нам потребуется что-то изменить (например оформление сайта), мы измениим в единственном месте имя CSS-файла и все страницы сайта будут выглядеть иначе.
Чанк CSS_02_all_pages_start
Используется для формирования начала видимой страницы сайта и шапку до начала колонок. Имеет вид:
<a name="top_page"></a>
<div id="page_margins">
<div id="page">
<div id="logo-site">
<span id="logo-img">
<img alt="Начало сайта" src="assets/templates/site/css/images/site_logo.gif" />
</span>
</div>
<div id="site-name-shadow">
[ (site_name) ]
</div>
<div id="site-name">
[ (site_name) ]
</div>
<div id="logo-site-info">
[ !Ditto?parents=`0`&depth=`0`&dateSource=`editedon`&dateFormat=`%d.%m.%Y`&tpl=`last_update`
&display=`1`&sortBy=`editedon`&filter=`hidemenu,0`! ]
</div>
<div id="site-longtitle">
[ *pagetitle* ]: [ [cad_LongTitleOrDescription] ]
</div>
{ {ru_GoToEnd} }
<div id="main_menu">
[ !MollioMenu? &hereClass=`active` &topnavClass=`nav` &topdiv=`1`
&selfAsLink=`1` &levelLimit=`2` &useParentHere=`1`! ]
</div>
<div id="main">
Здесь мы видим включение нескольких специальных тегов и вызов нескольких сниппетов, в том числе с аргументами. Имеется и вложенный чанк ru_GoToEnd.
Чанк CSS_03_all_pages_start_left
Этот чанк формирует левую колонку страницы:
<div id="col1">
<div class="clearfix" id="col1_content">
<div class="light_box">
{ {Поиск-форма} }
{ {Меню боковое} }
</div>
Здесь имеется вложение ещё двух чанков - Поиск-форма и Меню боковое.
Чанк ЛЕВАЯ-ОБЩЕЕ
Это очень простой чанк, в нем нет разметки, а только приводятся дополнительные пояснения в левой колонке.
Чанк CSS_04_all_pages_end_left_start_right
Этот чанк формирует завершение левой колонки и начало правой колонки:
</div> </div> <div id="col2"> <div class="clearfix" id="col2_content">
Это маленький, но очень важный чанк, формирующий верстку страницы.
Чанк MODx-ссылки
Это очень простой чанк, в нем нет разметки, а только приводятся дополнительные пояснения.
Чанк CSS_05_all_pages_end_right_start_center
</div> </div> <div id="col3"> <div id="col3_content" class="clearfix">
Чанк НАВИГАЦИЯ ПЕЧАТЬ АННОТАЦИЯ КОНТЕНТ
Этот чанк формирует основной контент страницы.
{ {ru_BreadCrumb} }
{ {ru_PrintVersion} }
<div class="intro">
[ *introtext* ]
</div>
<p>
[ *content* ]
</p>
Чанк ru_BreadCrumb содержит в себе гроизонтальную навигационную линейку, чанк ru_PrintVersion выводит ссылку на версию для печати. В контейнер класса intro выводится аннотация, содержащаяся в специальном теге [ *introtext* ], а основное содержимое страницы содержится в специальном теге [ *content* ].
Вызов сниппета ru_AuthorAndDate?tpl=`cad_author_and_date`
Этот сниппет выводит имя автора и дату публикации материала по специальному шаблону.
Чанк Список нижний
Это также простой чанк, в нем нет разметки, а только выводится список вложенных документов.
Чанк CSS_06_all_pages_end
Этот чанк завершает верстку всех страниц:
<div id="ie_clearing"> </div>
</div></div></div>
<div id="footer">{ {301-Подвал} }</div>
</div></div>
<a name="end_page"></a>
</body>
</html>
Вложенный чанк 301-Подвал формирует всю нижнюю видимую часть страницы - нижнее меню, копирайт, счетчики.
А как мы разбили шаблон на чанки? Да очень просто - сначала написали код всей страницы в HTML, а потом выделили из него логические части.
Мы практикуем такой подход - любой участок кода, который может использоваться более одного раза, выделяем в чанк.
Специальные чанки для сниппетов
Кроме чанков, формирующих верстку страницы, в MODx используются специальные чанки, используемые совместно со сниппетами. Такие чанки фактически являются шаблонами для вывода результатов работы сниппетов. В предшественнике MODx CMS Etomite вывод результатов работы сниппетов предуматривался прямо в коде сниппетов. Это было плохо, так как для изменения оформления необходимо было корректировать код сниппета.
В большинстве сниппетов MODx предусмотрена возможность передачи в виде аргументов имен шаблонов для вывода, то есть чанков. Например, в показанном выше коде есть вызов сниппета Ditto с аргументом &tpl=`last_update`. Это имя чанка, который выглядит так:
Последнее обновление: <a href="[~[+id+]~]" title="[+title+]">[+title+]</a> [+date+]
В этом чанке используются специальные элементы placeholder, обрамленные символами +. Вместо placeholder подставляется значение внутренней переменной сниппета. В данном случае сниппет Ditto выводит по этому шаблону название (вместо +title+) и дату (вместо +date+) самого последнего измененного документа сайта со ссылкой на ID (вместо +id+) этого документа (см. правый верхний угол страниц сайта).
Написать комментарий