Содержание сайта

В этом руководстве будет показано, как оформить простой сайт-визитку и наполнить его содержанием.

Определяем структуру сайта

Для начала выберете в панели управления Tabula пункт  Страницы. При создании проекта создаётся и корневая "Главная" страница с, относительным серверу, путём "/". Эту страницу нельзя удалить или изменить её путь (ссылку), но её можно переименовать, изменить её вид и поведение. Все последующие страницы сайта будут наследниками "Главной страницы".

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

■ "Главная" — "/"
├┬ □ "Шаблоны" — "/templates/"
│└─ □ "Лейаут" — "/templates/layout"
├─ ■ "О нас" — "/about/"
└─ ■ "Контакт" — "/contact/"

Имея план действий, давайте начнём его реализацию. Для этого нажмите Добавить в строке "Главной" страницы трижды, создав таким образом, три "Новые страницы" и еще один раз напротив любой "Новой страницы".

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

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

Для минимального функционала новые страницы должны:

  1. быть опубликованы
  2. их путь должен быть определён
  3. их содержание должно быть изменено

Название и путь

Начнём с маршрутизации, а содержанием займемся в последующих шагах. Как уже было сказано, "Главная" страница уже имеет имя, путь и её публикация активирована. Давайте сделаем две "Новые страницы" (те, у которых нет дочерней) страницами "О нас" и "Контакт". Для этого перейдите, поочереди, в их Режим редактирования:

И на каждой из этих страниц выставьте Флаг Публикации (1.), измените Название (2.) и Ссылку (3.):

В результате получим:

Шаблонизация

Чтобы обеспечить однородность презентации на всех страницах, и сэкономите Ваше время и усилия, стоит воспользоваться общим для всех (или групп) страниц, шаблоном. Для этого мы выделим одну страницу ("/templates/layout") как лейаут-шаблон. В целях чего, проделаем с оставшимися двумя Новыми страницами те же операции, что и в прошлом шаге, за исключением выставления флага публикации:

Не покидайте редактирование страницы "Лейаут" ("/templates/layout"), или вернитесь в режим редактирование, если вы его покинули. Добавьте в поле Содержание данный текст:

<html>
<head>
    <meta content="noindex" name="robots">
    <title>My Awesome Project</title>
{{#>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/">О&nbsp;нас</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>
    <style>
        body { padding: 5px 10%; }
        #header { font-size: larger; font-family: Helvetica; }
        .top_menu { float: right; list-style: none; text-align: right; }
        .top_menu > li { display: inline-block; }
        .logo { float: left; }
        .logo::before { content: "♕"; font-size: xx-large; }
        #content { margin: 5em 0 2em 0; }
        #footer a { font-size: small; color: gray; font-family: Arial; text-decoration: none; }
    </style>
</body>
</html>

Обратите внимание на вызов блока {{>body_content}} — это то место, куда будет подсажено содержание каждой отдельной страницы, использующей данный шаблон.

Сохраните "Лейаут" и перейдите к редактированию "Главной" страницы. Замените, имеющееся в ней стандартное Содержание на это:

{{#> templates.layout}}
    {{#*inline "body_content"}}
    Добро пожаловать на страницу моего Классного Проекта!
    {{/inline}}
{{/templates.layout}}

Теперь, при посещении Вашего сайта, на главной странице Вы можете видеть результат:

Как видите, содержание блока {{#*inline "body_content"}} теперь помещено HTML-структуру шаблона "Лейаут", туда, где находится блок шаблона {{>body_content}}.

Давайте теперь изменим и оставшиеся две дочерние страницы "О нас" и "Контакт":

"О нас"

{{#> templates.layout}}
    {{#*inline "body_content"}}
    Мы &mdash; маленькая, но гордая команда из целого одного разработчика!
    {{/inline}}
{{/templates.layout}}

"Контакт"

{{#> templates.layout}}
    {{#*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>
    <style>
        .table_ul { list-style: none; }
        .table_ul li { margin: 3px 0; }
        .table_ul li div:first-child { font-weight: bold; }
    </style>
    {{/inline}}
{{/templates.layout}}

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

Заключение

Вы ознакомились с тем, как создавать простые статичные сайты на платформе Tabula. Далее рассмотрим работу с файлами и их использовании на страницах Вашего сайта.

Назад Далее