Разметка шаблонов

Файлы шаблонов в Rapido.CMS создаются с учетом использования шаблонизатором XTemplate. Находятся файлы в папке /tpl/default/html/. Все файлы шаблонов можно условно разделить на 3 типа:

  1. Файлы целых страниц (main.htm, internal.htm)
  2. Файлы контентной части модулей (c.material.htm, c.news.htm, c.basket.htm ...)
  3. Файлы отдельных блоков (block_auth.htm, block_forms.htm ...)

Шаблоны XTemplate это валидные HTML-файлы. Для разделения шаблона на управляемые блоки используются теги комментария: <!-- BEGIN: block --> content <!-- END: block -->, для вывода переменных и элементов массивов в шаблоне  используются теги {var1} и {arr.var1}. Управляемые блоки могут быть вложенными друг в друга, создавая сложные структуры. Для вставки содержимого из другого файла применяется тег {FILE "block_auth.htm"}.

Важно! Файлы полных страниц (main.htm и internal.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. По-умолчанию этот вызов установлен.

Emmet в Rapido.SDK

Для ускорения процесса верстки в 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 -->

 Краткое описание этого плагина можно найти в нашей документации, а полное описание в документации к плагину.