В этой статье-инструкции описаны основы работы приложения «Сайт» на примере создания простого сайта, работающего на двух приложениях: «Сайт» и «Блог».
1. Создание сайта mydomain.ru
Создание сайта начинается с добавления его основного адреса в список сайтов (в левом верхнем углу интерфейса приложения «Сайт»). В нашем случае добавлять новый сайт нет необходимости, так как основной домен установки фреймворка mydomain.ru уже был добавлен автоматически при установке Вебасиста:
Сайт уже работает, и его можно посмотреть, открыв корневой адрес установки Вебасиста (в данном случае mydomain.ru):
Сейчас сайт состоит из одной демо-страницы «Добро пожаловать» и использует тему оформления по умолчанию под названием «Дефолт». Добавим новые разделы «Блог», «Фото», «Магазин», создадим новую страницу на сайте и попробуем немного изменить оформление сайта.
2. Маршрутизация и поселение приложений
Основная структура сайта определяется его маршрутизацией: правилами, распределяющими общее адресное пространство сайта между отдельными приложениями Вебасиста. Откройте раздел управления маршрутизацией сайта:
Сейчас в правилах маршрутизации только одно правило: mydomain.ru/* -> Сайт. Правило означает, что все адресное пространство предоставлено приложению «Сайт», то есть любой запрос посетителя сайта будет передан на обработку (иначе говоря, маршрутизирован) приложению «Сайт».
Добавим, как показано на скриншоте выше, новые правила mydomain.ru/blog/* -> Блог и mydomain.ru/photos/* -> Фото.
Мы поселили приложение «Блог» по адресу mydomain.ru/blog/, и теперь любой адрес
внутри mydomain.ru/blog/ (например, /blog/2011/?tag=updates,
/blog/announcements/new-app-released/ и т. д. — в правиле маршрутизации
это указывается звездочкой *) будет передан на обработку приложению «Блог». Фото — аналогично. Все остальные адреса, не удовлетворяющие правила
mydomain.ru/blog/* и mydomain.ru/photos/*, будут переданы
приложению «Сайт» согласно правилу маршрутизации, которое действует по умолчанию.
В этой и других статьях документации для обозначения приложения, подключенного на сайте правилом маршрутизации, используется термин поселение. Термин несколько неформальный, однако он хорошо отражает суть прикрепления приложения к некоторому адресу.
Обратите внимание, что правило /blog/* в маршрутизации должно находиться выше правила /* в связи с тем, что правила обрабатываются одно за одним в порядке их отображения, и первое правило, которое подошло для текущего запроса пользователя, будет обработано, а все последующие правила будут проигнорированы. Если бы мы поставили правило /* над правилом /blog/*, то до /blog/* очередь никогда не дошла бы, потому что самое общее правило /* всегда бы срабатывало (ведь оно удовлетворяет любому адресу, запрошенному посетителем данного сайта). Чем более общим является правило, тем ниже оно должно находиться в правилах маршрутизации.
В верхнем меню общедоступной части сайта (во фронтенде) появятся ссылки «Блог» и «Фото», по которым уже будут открываться эти приложения:
Текст ссылки «Webasyst» в данном случае соответствует общему названию установки Вебасиста (названию вашей компании), которое указывается в настройках приложения «Инсталлер». Если у вас уже было введено другое название, то оно автоматически должно было подставиться вместо «Webasyst». Как бы то ни было, это название легко изменить в настройках поселения приложения.
3. Новая страница
Добавим страницу «О сайте» по адресу mydomain.ru/about-us/:
Страница появится в левом меню основного раздела сайта (/*):
Функционал страниц поддерживает иерархию, управлять которой можно перетаскиванием страниц мышкой в бекенде (драг-н-дропом). Количество уровней вложенности страниц не ограничено.
4. Блоки
Добавим еще одну страницу «Обратная связь», на которой разместим форму отправки запроса по почте. Сделать это можно с помощью блока отправки запроса, который предоставляется базовым функционалом приложения «Сайт» (запросы отправляются на адрес, указанный в настройках приложения «Инсталлер»). В разделе «Блоки» скопируем код для вставки блока send.send_email_form:
Создадим новую страницу «Обратная связь», подключив в ней блок отправки запроса:
Вот так страница будет выглядеть во фронтенде:
Функционал блоков позволяет интегрировать фронтенды приложений друг с другом, размещая содержимое одних приложений в шаблонах дизайна и страницах других приложений. Содержимое блоков можно произвольно редактировать в бекенде, использовать Smarty, создавать свои собственные блоки.
5. Дизайн
Теперь немного поменяем общее оформление сайта, которое в данный момент работает на базе «Основной» темы оформления. В левой колонке выберем приложение «Сайт»
и сделаем изменения в шаблонах дизайна sidebar.html, index.html,
default.css (изменения выполняются исключительно в демонстрационных целях; на снимке экрана
выделена часть изменений в файле default.css, остальные изменения не показаны).
Сохраните изменения и откройте сайт:
В тот момент, когда вы сохранили изменения в sidebar.html (или в любом другом файле), приложение «Сайт» автоматически
скопировало тему оформления «Дефолт» (которая до этого находилась в папке wa-apps/site/themes/default/)
в папку wa-data/public/site/themes/default/. Отныне все изменения шаблонов дизайна этой темы
будут сохраняться внутри wa-data/, что гарантирует сохранность данных при обновлении тем и приложений с помощью приложения
«Инсталлер» (при обновлении приложений Вебасиста обновляется только оригинал темы в wa-apps/, к которому можно будет
«откатиться» в случае необходимости, а в wa-data/ хранится рабочая копия шаблонов, применяемая на основном сайте). Подробнее о структуре тем оформления
смотрите в статье документации о темах оформления.
Попробуйте теперь в общедоступной части сайта перейти в приложение «Блог». Обратите внимание на то, что сделанные изменения никак не повлияли на внешний вид приложения «Блог». Несмотря на то, что изначально общедоступные части приложений «Сайт» и «Блог» выглядели идентично, они работают независимо друг от друга и используют разные темы оформления и CSS-стили. Чтобы привести оба приложения к единому виду, необходимо выполнять схожие изменения в шаблонах обоих приложений: и «Сайта», и «Блога».
Независимость тем оформлений разных приложений друг от друга без необходимости «подгонки» под предопределенные каркасы является фундаментальным правилом создания сайтов и разработки приложений на основе Вебасиста, что отличает Вебасист от многих традиционных CMS-систем. Независимость приложений друг от друга позволяет разработчикам приложений максимально гибко создавать свои приложения, не зависеть от «наследия» других приложений.
6. Еще одно поселение «Сайта»
Добавим в правила маршрутизации еще одно поселение приложения «Сайт» по адресу mydomain.ru/shop/
И добавим в этом поселении одну информационную страницу в качестве корневой страницы (если не добавить страницу, то по адресу mydomain.ru/shop/ будет возвращаться ошибка 404):
Новое поселение, так же как и существовавшее до этого, по умолчанию использует тему оформления «Дефолт», поэтому страница по адресу mydomain.ru/shop/ будет выглядеть в рамках оформления, которое мы делали ранее:
Добавленная страница «Скоро открытие» не будет отображаться в меню страниц корневого раздела сайта (ссылка «Webasyst» в верхнем меню, соответствующая поселению «Сайта» по адресу mydomain.ru/), потому что эта страница прикреплена к другому поселению — mydomain.ru/shop/.
Попробуем теперь изменить оформление только нового раздела сайта mydomain.ru/shop/ (только нового поселения приложения «Сайт» в mydomain.ru /shop/), не меняя оформление основного раздела «Webasyst». Для этого необходимо создать новую тему оформления и применить ее к новому поселению, оставив как есть уже существующие тему оформления и поселение mydomain.ru/*. Создадим копию темы оформления в разделе «Темы» бекенда приложения «Сайт»:
Название копии темы — «Дефолт 1», и по желанию его можно изменить с помощью пункта меню «Переименовать» здесь же. Мы не будем этого делать и применим новую тему в настройках поселения «Сайта» по адресу mydomain.ru/shop/:
Теперь для наглядности сделаем небольшие изменения в дизайне уже новой темы (в файле default.css темы «Дефолт 1»), в результате чего получим, например,
такое оформление:
Теперь два раздела общедоступного сайта в mydomain.ru/ и mydomain.ru/shop/, работающие на одном и том же приложении «Сайт», выглядят по-разному.
7. $wa->apps()
Обратите внимание, что во всех примерах выше добавление нового правила в маршрутизацию приводило к автоматическому появлению нового пункта меню в основной навигации
на сайте. Такое поведение было обусловлено общей настройкой сайта, которая формирует массив $wa->apps():
$wa->apps() — это массив, введенный для простоты построения сайтов. Массив используется в темах оформления для формирования навигационного меню
по умолчанию и представляет собой роль посредника между маршрутизацией сайта и навигацией для пользователей. Добавляется правило маршрутизации — на сайте автоматически
появляется новый пункт меню.
Если навигационное меню сайта отличается от структуры маршрутизации (например, если ваш сайт обладает сложной структурой, либо не все приложения должны
отображаться в основном меню и т. п.), то $wa->apps() легко «отвязать» от маршрутризации, включив ручное задание
содержимого этого массива:
Массив $wa->apps() введен для простоты изначального построения сайтов, но не является обязательным для использования. В зависимости от вашей задачи
используйте автоматическое или ручное формирование массива $wa->apps() или же вообще откажитесь от него, задав
навигационное меню сайта напрямую в HTML-шаблонах или общих блоках.
8. Шпаргалка
В шаблонах дизайна и в тексте информационных страниц можно полноценно использовать инструменты шаблонизатора Smarty. В правом нижнем углу есть шпаргалка, внутри которой перечислены все основные доступные переменные и методы.
Для примера рассмотрим следующую задачу: на главной странице сайта выведем приветствие для авторизованных пользователей и информацию об операционной системе на устройстве, которое в данный момент использует пользователь:
Посмотрите, как это будет выглядеть в пользовательской части.
Инструментарий шпаргалки можно использовать в содержимом и информационных страниц, и шаблонов разных приложений.
