Файлы
В этом руководстве будет показано, как добавлять и использовать статичные файлы на Вашей странице.
Создание файлов
В предыдущем примере мы создали шаблон "Лейаут" и в конце его содержания добавили тэг <style>, содержащий каскадные таблицы стилей. И, хотя, это вполне приемлемое решение, оно считается плохой практикой. Гораздо лучше будет поместить стили в отдельный файл и подключить его в голову (<head> тэг) страницы. Чем мы сейчас и займёмся.
Для начала перейдём в 
режим редактирования упомянутого шаблона "Лейаут" и скопируем содержание контейнера <style>, без открывающего и закрывающего тэгов:
Где угодно, на вашей локальной машине (например на Рабочем Столе или в директории Вашего проекта) создайте новый пустой файл "style.css", откройте его любым текстовым редактором, например Notepad или Notepad++, вставьте, ранее скопированный текст, в данный файл и сохраните его:
Теперь в панели управления Tabula перейдите в раздел 
Файлового менеджера и вызовите диалог загрузки файла, нажав на соотв. кнопку в интерфейсе менеджера:
Выберете файл "style.css" из той директории, где вы его ранее сохранили (в данном примере это папка "C:\Desktop\"). После чего он сразу же будет отображен в списке файлов:
Файл готов к использованию на Вашем сайте, кроме того его можно 
Редактировать, 
Скачать на Вашу локальную машину или 
Удалить.
Однако, для массовых операций с файлами или работы с папками Вам понадобится FTP-клиент. Как его настроить, рассмотрим ниже.
Пример настройки клиента
Один из самых популярных клиентов удалённого менеджмента файлов — Filezilla. Настроить его для интеграции с Tabula очень просто:
Скачайте, установите и запустите FileZilla. Затем выберите пункт "Открыть Менеджер Сайтов":
Создайте новую запись доступа и дайте ей имя:
Перейдите на страницу с настройками FTP-доступа:
Введите данные доступа, как показано ниже:
Подтвердите сохранение пассворда, если не желаете вводить его каждый раз, при подключении (Внимание, сохранение пассворда в клиенте несёт за собой потенциальный риск безопасности!). Подтвердите ввод данных нажатием "Ок".
Теперь вы можете подключиться одним кликом к репозиторию файлов Вашего проекта и проводить с ними любые операции из клиента, как если бы они были на Вашей локальной машине!
Расширенный менеджмент
Файл "style.css", созданный нами ранее, лежит в корне файловой структуры. Для лучшей организации проекта, давайте поместим его в папку "/styles/" и, после того, как мы настроили FTP-клиент мы можем это сделать. В различных клиентах эта операция производится по-разному, но в Filezilla мы это сделаем так:
В колонке "Удалённый сайт" вызовите контекстное меню и выберете пункт "Создать каталог"
В открывшемся диалоге замените "Новый каталог" на "styles" (в контексте данного примера строка содержит "/site30/styles", но у Вас часть пути "/site30/" будет отличаться).
Подтвердите имя, нажав "OK". Новая папка и файл теперь находятся рядом друг с другом:
Перетащите файл "style.css" в папку "/styles/":
Все, проделанные Вами действия, будут немедленно отражены и на платформе, не забудьте обновить страницу Файлов:
Использование
Итак, файл "style.css" успешно загружен и помещён в папку стилей. Обращение к корню файловой структуры, в Шаблонизаторе Handlebars возможно через переменную {{cdn}}. Давайте задействуем файл стилей на сайте.
Вернёмся на страницу редактирования шаблона "Лейаут" и добавим в голову структуры ссылку на наш файл — <link rel="stylesheet" href="{{cdn}}/styles/style.css">. Предыдущую inline-структуру, внизу содержания, при этом, можно удалить:
<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">
<li><a href="/about/">О нас</a></li>
<li><a href="/contact/">Контакт</a></li>
</ul>
</div>
<div id="content">{{>body_content}}</div>
<div id="footer">
<span><a href="https://tabula.page">Tabula®, 2021</a></span>
</div>
</body>
</html>
Вы также, наверное, обратили внимание, что на странице "Контакт", в конце содержания, тоже присутствует небольшой контейнер so стилями. И его содержимое следует перенести в отдельный css-файл, но эти стили применяются только на странице "Контакт" и на каждой странице их задействовать смысла нет, а следовательно и декларировать этот файл в общем шаблоне "Лейаут" тоже нет смысла. Однако, мы предусмотрительно снабдили <head>-контейнер шаблона блоком {{#>head_content}}{{/head_content}}, а значит можем, при необходимости, дополнять голову содержания, также, как это происходит с блоком {{>body_content}} (за исключением того, что head_content — не обязателен и при отсутствии его вызова, на его месте будет выдано значение по умолчанию, которое в д.с. — пустая строка).
Перейдите к редактированию страницы "Контакт" и перенесите css-стили из него в файл contact.css в папку /styles/, также, как это было показано выше.
Теперь содержание страницы "Контакт" можно изменить следующим образом:
{{#> templates.layout}}
{{#*inline "head_content"}}
<link rel="stylesheet" href="{{cdn}}/styles/contact.css">
{{/inline}}
{{#*inline "body_content"}}
<ul class="table_ul">
<li>
<div>Адрес:</div>
<div>117456, Москва, ул. Инженеров, д. 123, 7 этаж, офис 707</div>
</li>
<li>
<div>Телефон:</div>
<div>+7 (495) 123-45-67</div>
</li>
<li>
<div>E-Mail:</div>
<div>contact@myawesomeproject.com</div>
</li>
<li>
<div>График работы:</div>
<div>Пн-Пт: 9.00-18.00, Сб-Вс: выходной</div>
</li>
</ul>
{{/inline}}
{{/templates.layout}}
Если всё прошло успешно, никаких оптических изменений с Вашими страницами не произойдёт, но они станут грузиться ещё быстрее, а для изменения их стилей теперь не нужно изменять HTML-содержание, что положительно скажется на кэшировании страниц на стороне пользователя.
Заключение
Вы узнали как работать с файлами на платформе Tabula. Далее мы рассмотрим как вызывать различные виды данных и использовать их в теле страниц.