Файлы шаблонов в Rapido.CMS создаются с учетом использования шаблонизатором XTemplate. Находятся файлы в папке /tpl/default/html/. Все файлы шаблонов можно условно разделить на 3 типа:
Шаблоны XTemplate это валидные HTML-файлы. Для разделения шаблона на управляемые блоки используются теги комментария: <!-- BEGIN: block --> content <!-- END: block -->
, для вывода переменных и элементов массивов в шаблоне используются теги {var1}
и {arr.var1}
. Управляемые блоки могут быть вложенными друг в друга, создавая сложные структуры. Для вставки содержимого из другого файла применяется тег {FILE "block_auth.htm"}
.
<!-- BEGIN: page -->
, а заканчиваться <!-- END: page -->
В Rapido.CMS часто используются блоки со списками материалов. Например, для вывода на главную страницу сайта блока с несколькими последними новостями может применяться блок следующего содержания:
<!-- BEGIN: news -->
<div class="news">
<h2>Последние новости</h2>
<!-- BEGIN: i -->
<div class="news-item">
<!-- BEGIN: IMG -->
<a class="zoomable" href="{f.IMG|rpimg('small')}">
<img src="{f.IMG|rpimg('small')}" alt="{f.ZAG|htmlspecialchars}">
</a>
<!-- END: IMG -->
<h3><a href="{f.url}">{f.ZAG}</a></h3>
<time datetime="{f.DT}">{f.DT|rpdt}</time>
<p>{f.STXT|nl2br}</p>
</div>
<!-- END: i -->
</div>
<!-- END: news -->
Блок <!-- BEGIN: news -->
содержит контейнер блока новостей. Если новостей для отображения в этом блоке не будет, то весь блок <!-- BEGIN: news -->
не будет выведен. Вложенный блок <!-- BEGIN: i -->
выводит конкретную новость. Этот блок будет парсится столько раз, сколько новостей должен содержать этот блок. Например, для 3-х новостей будет выведено 3 экземпляра блока <!-- BEGIN: i -->
. Блок каждой новости содержит вложенный блок <!-- BEGIN: IMG -->
, который выводит изображение. Если изображение не загружено в панели управления, то блок <!-- BEGIN: IMG -->
не будет выведен. Вместо заголовка, ссылок, текста и т.п. в шаблоне указываются переменные принадлежащие одному массиву {f}
. Массив {f}
содержит всю необходимую информацию о конкретной новости. Приведем список типовых параметров в массиве {f}
:
{f.ZAG}
- Название/заголовок материала{f.DT}
- Дата создания материала в формате ГГГГ-ММ-ДД ЧЧ:ММ:СС{f.IMG}
- имя файла (не полный путь) изображения прикрепленного к материалу (123423.jpg){f.TXT}
- Полное описание товара, текст новости или статьи. Это поле редактируется через визуальный редактор и содержит в себе HTML код.{f.STXT}
- Кратное описание описание, аннотация к новости или статье. Это поле редактируется через <texarea>, не содержит тегов, но может содержать переводы строки.{f.PRICE}
- Стоимость товараНекоторые переменные (элементы массива {f}
) имеют верхний регистр, а некоторые нижний. Отличие заключается в принятом правиле именований в Rapido.CMS. Например в переменной {f.ZAG}
находится содержимое, взятое прямо из базы данных и никак не обработанное на PHP. Полный список возможных переменные в верхнем регистре всегда можно узнать, посмотрев на структуру таблицы для соответствующего модуля. В Rapido.SDK это можно сделать через MySQL-утилиту или в форме редактирования модуля.
Переменные, написанные в нижнем регистре, это переменные обработанные или созданные во время обработки блока в PHP коде. Например {f.url}
это полная ссылка на материал. Этот параметр не содержится в таблице материалов и потому указан в нижнем регистре. Чтобы это правило соблюдалось, вам нужно создавать параметры с именами полей в верхнем регистре.
Переменные, вставляемые в шаблон можно дополнительно обработать функциями PHP. Например для преобразования символов перевода строки в тег <br>
можно применить функцию nl2br, сделать это можно так: {f.STXT|
. Список доступных обработчиков можно посмотреть тут. Некоторые преобразования, которые можно делать с переменными с помощью обработчиков:nl2br
}
{f.IMG|rpimg
}
- преобразует имя файла изображения в полный путь к нему. Если требуется путь к уменьшенному или увеличенному изображению, то можно указать это в скобках таким образом: {f.IMG|rpimg
('small')}
или {f.IMG|rpimg
('big')}
. По-умолчанию возвращает полный путь к оригинальному (исходному) файлу.{f.DT|rpdt
}
- Преобразует в дату формата d.m.Y. Формат по-умолчанию можно изменить в системных настройках сайта (/control/opt/sys/) или указать в качестве аргумента к обработчику: {f.DT|rpdt
('D')}
{f.PRICE|rpnum
}
- Преобразует число в удобочитаемый формат - каждые 3 знака отделяются пробелом. В скобках можно указать количество символов после запятой {f.PRICE|rpnum
(2)}
{f.SUMM|num2str
}
- Преобразует число в письменную форму. Например 105 преобразуется в "сто пять".{f.TXT|parse_links
}
- Преобразует url-адреса в тексте в активные ссылки <a href=""></a>{str|toTranslit
}
- Преобразует строку с кириллицей в транслитированную строку{str|textcrop
(200)}
- Обрезает строку до указанного количества символов и добавляет многоточие в конце строки, если символов в строке было больше. Корректно работает с мультибайтовыми строками.{f|arr_get
('ZAG')}
- Возвращает элемент массива. Приведенный пример равнозначен {f.ZAG}
, однако если в массиве использовался ключ с пробелами или на русском языке, то вставить такой элемент массива можно будет только через такой вызов {f|arr_get
('дата рождения')}
{num|plural
('ь','я','ей')}
- Подбирает правильные окончания для числовых словоформ. Если в приведенном примере num=1, то будет выведен "ь", что даст в итоге слово "профиль". Если num=2, то "профиля", если num=5, то "профилей"{f.SEX|gender
('написал[а]')}
- Обработчик применяется для переменных хранящих значение пола (male или female) и возвращает преобразованную строку указанную в скобках. Если квадратная скобка одна, то она применяется для женского пола, если их две, то первая для мужского, вторая для женского (по аналогии с печатными анкетами). Строка может содержать несколько слов для склонения, например: {f.SEX|gender
('Эт[от][а] клев[ый][ая] [парень][девушка] сказал[а]
')}
для значения male вернет строку "Этот клевый парень сказал", а для значения female вернет "Эта клевая девушка сказала"{f.GENDER|ifis
('male','муж.', 'жен.')}
- Если переменная равна первому значению в скобках, то обработчик вернет второе значение, в противном случае третье. Если третий параметр не указан то вместо него вернется пустая строка. Например можно сделать вызов таким: {f.STATUS|ifis
('new','selected')}
Вставка других файлов осуществляется тегом {FILE "filename.htm"}
. Например, если на главной странице и на второстепенных страницах одинаковый сложный подвал, то можно его содержимое выделить в отдельный файл, например footer.htm и вставить его в шаблоны main.htm и internal.htm тегом {FILE "footer.htm"}
Есть глобальные переменные, которые хранят разные состояния веб приложения, которые доступны в любом блоке шаблонов.
{opt.}
- Это массив, содержащий все поля настроек сайта и модулей. Например в переменной {opt.site_title}
хранится название сайта, в переменной {оpt.counters}
- код счетчиков. Опциями можно управлять через специальный раздел в Rapido.SDK.{tpl.}
- Это массив в котором содержится информация о выбранном шаблоне. Например, /tpl/default/
хранит путь к текущему шаблону, обычно требуется для вставки изображений из папки шаблона.{razdel.}
- Это массив, хранящий подробную информацию о текущем разделе. Содержит в себе все поля из таблицы БД _MENU. {razdel.ZAG}
- название текущего раздела, {razdel.TP}
- тип раздела (принадлежность к модулю), {razdel.details}
- содержит ID материала, если по текущему url должен находится конкретный материал.{au.}
- Этот массив хранит данные о пользователе, который авторизован. {au.FIO}
- ФИО пользователя, {au.EMAIL}
- почта, {au.TEL}
- телефон{site_version.}
- Этот массив хранит информацию о версии сайта, если работает модуль "Мультисайт" (versions). Например, {site_version.LANG}
- выбранная сигнатура языка (ru,en,de..)
Если необходимо сделать фотогалерею, в которой отображается список превью, а при клике на одну из фотографий открывается ее увеличенная копия, то сделать это в Rapido.CMS очень просто. Для этого нужна следующая разметка:
<a class="zoomable" href="{f.IMG|rpimg('big'}}" rel="album">
<img src="{f.IMG|rpimg('small'}}">
</a>
Тег <img> ссылается на уменьшенное изображение, ссылка в которую он обернут, ссылается на увеличенное изображение. Класс "zoomable"
обозначает, что эта ссылка будет обработана плагином fancybox
и кликнув на ссылку мы увидим увеличенное изображение на текущей странице, вместо перехода по ссылке. Аттрибут rel="album"
- объединяет несколько ссылок в один альбом. Все ссылки с одним альбомом можно будет листать во всплывающем окне. Чтобы это сработало нужно сделать вызов rpApp.fancybox();
в файле tpl.js или tpl_async.js. По-умолчанию этот вызов установлен.
Для ускорения процесса верстки в Rapido.SDK встроены автоподсказки и плагин Emmet. Дополнительно в этот плагин добавлены сокращения для развертывания блоков XTemplate bb.class
. Например такое сокращение:
bb.news>.news>h2{Новости}+bb.i>.news-item>a[href={f.url}]{{f.ZAG}}
... после нажатия клавиши TAB в конце сокращения выведет следующий код:
<!-- BEGIN: news -->
<div class="news">
<h2>Новости</h2>
<!-- BEGIN: i -->
<div class="news-item"><a href="{f.url}">{f.ZAG}</a></div>
<!-- END: i -->
</div>
<!-- END: news -->
Краткое описание этого плагина можно найти в нашей документации, а полное описание в документации к плагину.