Данные

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

Данные списков

Списки, на платформе Tabula, позволяют заведовать большими объемами структурированных и индексируемых данных, которые можно записывать и выводить, как единичными записями, так и массивами, проводить по ним поиск и фильтрацию и многое другое. Базы данных товаров, персонала или клиентов — типичные области задействования списков. Для данного примера давайте добавим галерею изображений к, уже имеющемуся, сайту.

Создание модели данных

Чтобы было, что вывести в галерею, сначала добавим некоторые данные в проект, а затем займёмся самой страницей галереи. Перейдите в панели управления Tabula в раздел Списки.

Изначально на Вашем сайте нет нет никаких списков. Нажмите Добавить, чтобы перейти в режим редактирования нового списка. Назовём новый список "Изображения" и дадим ему машинное имя "images". Также добавим 2 поля:

Ключ	Название	Тип поля
desc	Описание	Строка
img	Изображение	Файл

Эти поля будут присутствовать в каждом будущем элементе списка. О том, какие типы полей доступны и как они функционируют см. справку по полям элементов списка.

Сохраните изменения и вернитесь назад к перечню списков.

Добавление данных

Нажав на Имя или Ключ списка Вы попадёте в режим администрации его содержимого.

Содержимое списка пока отсутствует. Здесь можно Добавить новый элемент вручную, но для наглядности мы воспользуемся функцией Импорта. Импорт - отличный инструмент для миграции данных, если Вам, например, нужно перенести их с уже существующего сайта на платформу Tabula. Однако, как привести данные в приемлемый для Tabula JSON-формат зависит от того, какой движок баз данных задействован на Вашем старом сайте и какие возможности форматирования при экспорте он предоставляет. В рамках нашего примера мы воспользуемся следующими данными импорта.

[
    {
        "name": "Charlestown Civil War Memorial",
        "key": "1",
        "desc": "The Charlestown Civil War Memorial, also known as the Soldiers' and Sailors' Monument",
        "img": "https://upload.wikimedia.org/wikipedia/commons/8/8a/Charlestown_Civil_War_Memorial_%2836253%29.jpg"
    },
    {
        "name": "Green Dragon Tavern",
        "key": "2",
        "desc": "The Green Dragon Tavern was a public house located on Union Street (then known as Green Dragon Lane) in Boston",
        "img": "https://upload.wikimedia.org/wikipedia/commons/4/45/Green_Dragon_Tavern_%2836196%29.jpg"
    },
    {
        "name": "Institute of Contemporary Art in Boston",
        "key": "3",
        "desc": "The Institute of Contemporary Art (ICA) is an art museum and exhibition space located in Boston, Massachusetts, United States of America.",
        "img": "https://upload.wikimedia.org/wikipedia/commons/d/d9/ICA_%2836339%29.jpg"
    },
    {
        "name": "Paramount Theatre in Boston",
        "key": "4",
        "desc": "Paramount Theatre is a theatre in Boston on Washington Street",
        "img": "https://upload.wikimedia.org/wikipedia/commons/f/f9/Paramount_%2836369%29.jpg"
    },
    {
        "name": "Robert Gould Shaw Memorial",
        "key": "5",
        "desc": "The Memorial to Robert Gould Shaw and the Massachusetts Fifty-Fourth Regiment is a bronze relief sculpture by Augustus Saint-Gaudens.",
        "img": "https://upload.wikimedia.org/wikipedia/commons/4/47/Robert_Gould_Shaw_Memorial_%2836053%29.jpg"
    },
    {
        "name": "Skinny House",
        "key": "6",
        "desc": "Skinny House, a spite house in Boston",
        "img": "https://upload.wikimedia.org/wikipedia/commons/d/d6/Spite_house_in_Boston_%2836241p%29.jpg"
    },
    {
        "name": "Front elevation on Duke Street",
        "key": "7",
        "desc": "This Grade II listed building was built c. 1800 and in 1852 became Liverpool's first library. In 1900 it was the offices of Peter Walker, wine merchant, and is now the offices of the Bibby Line, a prominent Liverpool shipping company.",
        "img": "https://upload.wikimedia.org/wikipedia/commons/8/81/105_Duke_Street_1.jpg"
    },
    {
        "name": "Front elevation of 10 Hockenhall Alley",
        "key": "8",
        "desc": "It is a rare and intact survival of an exceptionally modest working class dwelling that illustrates the inner-city living conditions of some of the poorest members of late C18/early C19 society",
        "img": "https://upload.wikimedia.org/wikipedia/commons/2/26/10_Hockenhall_Alley_front.jpg"
    }    
]

Просто скопируйте и вставьте этот текст в поле ввода и нажмите "Импортировать":

Данные успешно добавлены и мы можем приступать к созданию страницы галереи!

Использование списков

Как добавлять и редактировать страницы сайта мы уже знаем. Создайте новую страницу-наследницу "Главной" страницы с названием "Галерея" и ссылкой "/gallery" (не забудьте включить публикацию).

Перед тем, как перейти к вёрстке галереи, необходимо подключить вызов данных списка в содержание страницы. Это достигается при помощи т.н. Динамических элементов. Добавить такой можно под содержанием страницы:

Дав ему имя "images", в теле содержания страницы теперь доступна соотв. переменная с данными списка.

Сгенерируем HTML галереи, итерируя по массиву {{images.items}} и поместим её в контент шаблона "Лейаут":

{{#> templates.layout}}
    {{#*inline "body_content"}}
    <h2>Моя фотогалерея</h2>
    <div class="gallery">
        {{#each images.items}}
        <div class="image" id="{{key}}">
            <img src="{{fields.img}}">
            <label>{{name}}</label>
        </div>
        {{/each}}
    </div>
    {{/inline}}

    {{#*inline "head_content"}}
    <style>
        .gallery div {
          white-space: pre-line;
          text-align: center;
        } 
        .gallery div img {
          max-width: 10em;
          max-height: 10em;
        }
    </style>
    {{/inline}}
{{/templates.layout}}

Переменные страницы

Галерея работает, но все элементы идут лентой, в одну колонку, что не является оптимальной утилизацией места на странице. Можно сделать и лучше! Ранее подобную задачу можно было решить только при помощи тэга <table>, но её конструкция требует многоступенчатой обработки данных и сложных операций шаблонизатора. К счастью эту проблему можно легко решить при помощи CSS-инструкции display: grid; В этом примере будет показано, как сделать количество столбцов галереи зависимым от одной единственной строчки в переменных страницы:

Для отображения HTML-элемента в виде табличной сетки, он должен обладать двумя CSS-правилами, где количество столбцов определяется количеством значений инструкции grid-template-columns:

{
    display: grid;
    grid-template-columns: auto auto auto; 
}

Для начала добавим новую переменную страницы colls к уже имеющемуся стеку, сгенерированному динамическим элементом items:

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

// проверим, является ли переменная colls допустимым значением
if (typeof colls === 'number' && colls > 0) {
    _colls = colls
} else {
    _colls = 1
}
// определим исходное значение для grid-template-columns
colls_css = ''
// добавим ' auto' к colls_css в количестве _colls раз
for (var i=0; i < _colls; i++) {
    colls_css += ' auto'
}
// отрисуем страницу
render();

Добавим вывод {{colls_css}} в содержание страницы. Попутно оптимизируем стили, перенеся их статичную часть в отдельный файл /styles/gallery.css:

.gallery {
  display: grid;
}
.gallery div {
  white-space: pre-line;
  text-align: center;
  vertical-align:middle;
} 
.gallery div img {
  max-width: 10em;
  max-height: 10em;
}

Подключим этот файл, как это было сделано в предыдущем примере, оставив в содержании страницы "Галерея" только CSS-инструкцию grid-template-columns:

{{#> templates.layout}}
    {{#*inline "body_content"}}
    <h2>Моя фотогалерея</h2>
    <div class="gallery">
        {{#each images.items}}
        <div class="image" id="{{key}}">
            <img src="{{fields.img}}">
            <label>{{name}}</label>
        </div>
        {{/each}}
    </div>
    {{/inline}}

    {{#*inline "head_content"}}
    <link rel="stylesheet" href="{{cdn}}/styles/gallery.css">
    <style>
        .gallery { grid-template-columns: {{colls_css}}; }
    </style>
    {{/inline}}
{{/templates.layout}}

Теперь за отображение количества столбцов отвечает всего одна строчка в переменных страницы:

Конфигурация сайта

Конфигурация сайта работает схожим образом с переменными страницы, но заявленные в Конфигурации значения доступны на каждой странице сайта через переменную {{config}}. воспользуемся этим для генерации ссылок навигационного меню, ведь нигде на на сайте нет ни одной ссылки на новую "Галерею".

Перейдем к разделу Конфигурации и добавим в, имеющийся там JSON:

	"nav_menu": {
		"about": "О&nbsp;нас",
		"contact": "Контакт",
		"gallery": "Галерея"
	}

Теперь перейдём в режим редактирования шаблона "Лейаут" ("/templates/layout") и заменим статичную HTML-структуру навигационного меню на генерируемое из конфигурации:

<html>
<head>
    <meta content="noindex" name="robots">
    <title>My Awesome Project</title>
    <link rel="stylesheet" href="{{cdn}}/styles/style.css">
{{#>head_content}}{{/head_content}}
</head>
<body>
    <div id="header">
        <span class="logo"><a href="/">My Awesome Project</a></span>
        <ul class="top_menu">
            {{#each config.nav_menu}}
            <li><a href="/{{@key}}">{{this}}</a></li>
            {{/each}}
        </ul>
    </div>
    <div id="content">{{>body_content}}</div>
    <div id="footer">
        <span><a href="https://tabula.page">Tabula®, 2021</a></span>
    </div>
</body>
</html>

Теперь навигационное меню можно легко редактировать, не трогая шаблон или страницы сайта, добавляя пары "[url]": "[название]" в JSON конфигурации или меняя местами имеющиеся записи.

Заключение

Вы узнали как задействовать данные различных типов на Вашем сайте.

Желаем Вам успеха в создании сайтов на платформе Tabula!