В этой статье-инструкции описан пример создания простого сайта с помощью приложения «Сайт» и нескольких других приложений Webasyst.
1. Создание сайта mydomain.ru
Создание нового сайта начинается с добавления его в общий список сайтов в разделе «Сайт → Мои сайты».
Этот первый шаг можно пропустить, если сайт с нужным адресом у вас уже есть.
Проверьте, работает ли сайт на этом домене.
Если сайт не открывается, то надо зарегистрировать домен и направить его в ту директорию сервера, где установлен Webasyst.
По умолчанию сайт состоит из пустой главной страницы и использует стандартную тему оформления «Дефолт». Добавим на сайт новые разделы приложений «Блог» и «Фото», создадим новую страницу на сайте и попробуем немного изменить оформление.
2. Настройка карты сайта
Основная структура сайта определяется его настройками маршрутизации: правилами, распределяющими адресное пространство сайта между отдельными приложениями. Для настройки маршрутизации используется раздел «Карта сайта».
Сейчас в настройках карты сайта есть только один, главный раздел, состоящий из 1 страницы, относящейся к приложению «Сайт». Пока что всё адресное пространство предоставлено только одному этому приложению, то есть любой запрос посетителя сайта будет обрабатываться только им.
Добавим на карту сайта новые разделы: для приложений «Блог» и «Фото».
Мы разместили приложение «Блог» по адресу mydomain.ru/blog/, и теперь любой запрос с адресом, начинающимся с mydomain.ru/blog/ (например, /blog/2011/?tag=updates, /blog/announcements/new-app-released/ и т. д.) будет обработан приложением «Блог». С приложением «Фото» — аналогично.
Все остальные адреса, не соответствующие адресам mydomain.ru/blog/ и mydomain.ru/photos/, будут переданы приложению «Сайт», потому что именно раздел приложения «Сайт» выбран в качестве главного (он стоит на первом месте в списке разделов сайта и отмечен иконкой «домашнего» раздела).
В верхнем меню сайта появятся ссылки «Блог» и «Фото», по которым будут открываться разделы этих приложений.
3. Новая страница
Добавим страницу «О компании» по адресу mydomain.ru/about/.
Ссылка на эту новую страницу появится в меню сайта.
Страницы могут быть вложены друг в друга. Количество уровней вложенности не ограничено.
4. Блоки
Добавим ещё одну страницу: «Обратная связь» и разместим на ней форму для отправки сообщения. Сделать это можно с помощью встроенной переменной-блока приложения «Сайт». В разделе «Переменные → Коды и блоки» скопируем код для вставки блока с идентификатором site.send_email_form.
Вставим скопированную строку для размещения блока в HTML-код созданной страницы.
Вот так страница с формой отправки сообщений может выглядеть на вашем сайте.
Здесь показана стандартная капча Webasyst — в настройках можно при желании заменить её на другую, например, на Google reCAPTCHA или Yandex SmartCaptcha.
Другие приложения, кроме самого «Сайта», тоже могут предоставлять для использования собственные блоки, например, список недавно загруженных фотографий или опубликованных новостей в блоге. Можно также создавать собственные блоки-переменные с помощью обычного текста, а также HTML- и Smarty-кода.
5. Дизайн
Теперь немного поменяем оформление сайта: сделаем несколько изменений в шаблонах дизайна.
Сохраните изменения и обновите вкладку с вашим сайтом в браузере, чтобы увидеть результат этих изменений.
В тот момент, когда вы впервые сохраняете изменения в настройках дизайна, Webasyst автоматически копирует всю тему оформления в отдельную папку на сервере. Отныне все изменения в настройках этой темы будут сохраняться внутри этой отдельной папки, что гарантирует сохранность оригинальной версии темы. Позже вы сможете одной кнопкой в любой момент откатить все сделанные изменения до изначальной версии дизайна и начать всё сначала.
Подробнее об устройстве тем оформления ›
Попробуйте теперь перейти в раздел сайта «Блог» и увидите, что сделанные нами изменения в шаблонах дизайна повлияли и на внешний вид страниц «Блога». Так произошло потому, что отредактированный в этом примере файл header.section.html является общим для тем дизайна обоих этих приложений — хотя тема дизайна у каждого приложения своя. В данном случае тема оформления «Блога» является дочерней по отношению к теме «Сайта» и наследует все изменения, сделанные в тех файлах, которые для обеих тем являются общими.
Бывает и по-другому: и в теме оформления «Сайта», и в теме «Блога» может использоваться файл с одним и тем же названием, но при этом не быть общим. Тогда редактирование файла в одной теме не влияет на раздел сайта, где используется другая тема.
Как именно работает каждая тема дизайна, зависит от её устройства: если разработчик темы хочет, то может сделать любой файл общим; в противном случае в каждой теме используются самостоятельные файлы, которые друг от друга не зависят.
6. Ещё один раздел «Сайта»
Добавим в настройки карты сайта ещё одну страницу-раздел приложения «Сайт» — с адресом mydomain.ru/shop/.
Новый раздел, так же как и созданный нами ранее, по умолчанию использует ту же стандартную тему оформления, поэтому имеет такой же внешний вид.
Попробуем теперь изменить оформление только для этого нового раздела: mydomain.ru/shop/, не затрагивая оформление основного раздела. Для этого понадобится создать отдельную тему оформления и применить её к новому разделу. Быстро создать новую тему оформления можно путём простого копирования (клонирования) существующей темы.
Применим созданную отдельную тему к новому разделу сайта с адресом mydomain.ru/shop/.
Теперь для наглядности сделаем небольшие изменения в дизайне новой темы, чтобы оформление нового раздела сайта изменилось.
Теперь два раздела сайта (mydomain.ru/ и mydomain.ru/shop/), работающие в рамках одного и того же приложения «Сайт», выглядят по-разному — благодаря тому, что используют самостоятельные темы оформления.
7. Главное меню $wa->apps()
Обратите внимание, что во всех примерах выше добавление нового раздела на карту сайта приводило к автоматическому появлению нового пункта меню сайта. Такое поведение было обусловлено настройкой сайта, которая формирует массив $wa->apps().
$wa->apps() — это массив, который используется в темах оформления для формирования навигационного меню и представляет собой роль посредника между настройками карты сайта и навигацией для пользователей. Добавляется раздел сайта — и на сайте автоматически появляется новый пункт меню.
Если главное меню сайта должно отличаться от настроек карты сайта (например, если ваш сайт обладает сложной структурой, либо не все его разделы должны
отображаться в основном меню), то $wa->apps() легко «отвязать» от настроек карты сайта, включив ручное наполнение этого массива.
Массив $wa->apps() позволяет упростить построение сайтов, но не является обязательным для использования. В зависимости от вашей задачи используйте автоматическое или ручное формирование массива $wa->apps() или же вообще откажитесь от него, задав навигационное меню сайта напрямую в HTML-шаблонах или переменных-блоках либо на основании настроек темы оформления.
8. Шпаргалка
В шаблонах дизайна и HTML-коде страниц можно использовать инструменты шаблонизатора Smarty. В HTML-редакторе Webasyst есть кнопка, позволяющая открыть шпаргалку, внутри которой перечислены основные доступные переменные и методы для формирования динамического содержимого на страницах сайта.
Для примера рассмотрим такую простую задачу: на главной странице сайта показать приветствие для авторизованного посетителя и информацию об операционной системе на его устройстве.
Посмотрите, как эта информация будет выглядеть на вашем сайте.
Готово: мы рассмотрели основные возможности создания сайтов с помощью Webasyst: настройку разделов сайта и главного меню, выбор и изменение тем оформления, добавление страниц, использование блоков и переменных из шпаргалки. Попробуйте сами — у вас всё получится!
