Настройка страниц

Для создания и редактирования подстраниц Вашего сайта Tabula предоставляет простую и понятную систему структуризации и редактирования страниц.

Рекомендуем пройти быстрый курс обучения по данному разделу.

Структура сайта

Конфигурация отдельных подстраниц осуществляется на основе древовидной структуры маршрутизации.

пример выше позволяет посещение четырёх подстраниц сайта, доступных по следующим путям:

• /
• /layout/
• /layout/main-menu
• /layout/header

Редактирование содержания страницы

При выборе Настройки Страницы вы попадете в режим правки:

Маршрутизация

При создании новой страницы системой генерируется случайно-уникальный участок пути (т.н. "slug") для данный подстраницы - часть пути без участков родительского пути:

В большинстве случаев, это значение следует заменить и оно не может быть пустым.

Путь к странице необязательно должен быть фиксированным текстом. В участке пути могут быть определены переменные, значение которых будут заданы выбранным Списком Данных:

• feed_key — Ключ списка
• page_num — Номер страницы, при постраничном выводе данных списка

Содержание Страницы

Содержание Страницы может быть задано как обычным текстом, так и HTML, так и при помощи шаблонизатора Handlebars.

Результат:

Шаблонизатор Handlebars

Кроме HTML, синтаксис содержания расширен языком шаблонизации Handlebars и различными переменными окружения.

Шаблонизатор позволяет наследовать вёрстку других страниц, включать контент других страниц, выводить в контент страницы переменные и данные из списков, запускать циклы по массивам и объектам и многое другое.

Вывод данных

Вывод значения любой переменной возможен при помощи двойных фигурных скобок - {{foo}}. Подробнее о выводе и форматировании данных тут.

Для удобства и наглядности, на платформе Tabula, доступна вспомогательная функция {{debug foo}}, распечатывающая содержимое переменной в JSON-формате.

Работа с массивами и объектами данных

Для вывода массивов данных или серийного создания HTML-элементов, шаблонизатором предоставляется функция итерации (цикличной обработки) по коллекциям и объектам данных при помощи тэга {{#each}}

Имея коллекцию list следующего вида

[
    {
        "name": "foo",
        "image": "foo.png"
    },
    {
        "name": "bar",
        "image": "bar.png"
    }
]

можно вывести данные в формате HTML:

<ul>
    {{#each list}}
    <li data-index="{{@index}}">
        <img src="{{../cdn}}/images/{{image}}">
        <label>{{name}}</label>
    </li>
    {{/each}}
</ul>

При этом стоит обратить внимание на то, что внутри тэга итерации окружением является элемент массива/объекта и поля элемента становятся переменными корневого уровня. Для вызова переменных за пределами итерации необходимо подставлять к их имени префикс ../. При итерации по массивам, индекс текущего элемента доступен через {{@index}}, а при итерации по объекту, ключ текущего поля — по {{@key}} (значение, в таком случае доступно через {{this}}).

Результат:

<ul>
    <li data-index="0">
        <img src="https://t29.tcdn.site/images/foo.png">
        <label>foo</label>
    </li>
    <li data-index="1">
        <img src="https://t29.tcdn.site/images/bar.png">
        <label>bar</label>
    </li>
</ul>

Наследование и импорт шаблонов

Контент любой страницы сайта может быть использован в любой иной странице, как лейаут (общая основа) или импорт (прямое включение по месту вызова)

В данном примере на сайте страницы по пути /templates/ назначены шаблонами, доступными в шаблонизаторе по путям templates.layout и templates.import:

Рекомендуем отключать публикацию страниц, используемых исключительно как шаблоны, дабы предотвратить возможность их вывода пользователями в "сыром виде". Отключение публикации не запрещает использование страницы как шаблона.

Стоит обратить внимание на то, что при любом виде включения, шаблонизатором берётся только и исключительно значение поля "Содержание страницы" и никакие иные модификаторы, определённые на этой странице, как то вывод списков, параметры страницы или модификации, произведённые дополнительным обработчиком к тексту содержания не применяются! Все трансформации такого толка должны быть произведены на странице, куда производится включение.

Импорт

Содержание любой страницы можно подключить посредствам импорта шаблона (Partials) в произвольном месте любой другой страницы. Место импорта определяется конструкцией вида {{> foo.insert_name}}, где шаблон определён путём в дереве структуры, соединённым точками (".").

Импортируемый шаблон:

Результат:

Наследование

Дабы не редактировать каждую отдельную страницу "с нуля" и обеспечить однородность презентации всех (или групп) страниц сайта, можно назначить одну или несколько страниц шаблонами-основами, в которые данные отдельных страниц будут при вызове "подселяться". Шаблонизатор Handlebars позволяет осуществлять это при помощи т.н. Partial Blocks.

Вызов страницы, как шаблона наследования осуществляется структурой вида {{#> foo.path.to.layout}}...{{/foo.path.to.layout}}, где шаблон определён путём в дереве структуры, соединённым точками ".", а "подселяемые" элементы содержания окружаются тэгами вида {{#*inline "foo.insert_name"}}...{{/inline}}

Места "подселения" данных в самом шаблоне лейаута определяются структурой вида {{> foo.insert_name}}. Такой метод подселения подразумевает обязательной вызов блока на странице-наследнице. Если же вызов необязателен и в случае его отсутствия надо вывести стандартное значение — в шаблоне следует использовать блок {{#>foo.insert_name}}bar{{/foo.insert_name}}, где bar — стандартное значение.

В итоге получаем страницу, где содержание основы и самой страницы скомбинированы воедино:

Важно: Если наследующая страница не вызывает блок "подселения", присутствующий в шаблоне, как {{> foo.insert_name}} — шаблонизатор выдаст ошибку. Если Вам желательно опциональное "подселение" - используйте следующую форму {{#>foo.insert_name}}{{/foo.insert_name}}

Переменные

На каждой отдельной странице можно обозначить ряд переменных в поле Параметры страницы форматом JSON:

Помимо того, на всех страницах доступен ряд общих переменных. В случае, если страница привязана к списку то в окружение будут добавлены переменные, относящиеся ко всему списку или его конкретному элементу:

{
    "request": {
        "method": "GET",
        "body": {},
        "get": {}, 
        "cookies": {}
    },
    "config": {
        // Настройки сайта
    },
    // Публичный URL CDN
    "cdn": "https://t33.tabula.pge"
}

Данные переменные доступны как в теле Содержания страницы, так и в дополнительном Обработчике, когда он включён.

• request (Object) - параметры запроса к странице.
  • method (String) - метод запроса. "GET" при обычном посещении страницы из браузера.
  • body (Object) - данные запроса при request.method: "POST", "PUT" и подобных.
  • get (Object) - данные из search query компоненты пути вызова страницы.
  • cookies (Object) - cookies
• config (Object) - поля данной переменной являются значениями глобальных переменных, обозначенных в  Конфигурации сайта.
• cdn (String) - путь к корню  Файлового хранилища

Обработчики

Дополнительный обработчик позволяет изменять и дополнять данные вывода между запросом к странице и её отрисовкой шаблонизатором.