Пример: создание сайта

В этой статье-инструкции описаны основы работы приложения «Сайт» на примере создания простого сайта, работающего на двух приложениях: «Сайт» и «Блог».

Выпуск приложения «Блог» планируется в первом квартале 2012 года; оно приведено в данной инструкции в качестве наглядного примера. — прим. ред.

1. Создание сайта mydomain.ru

Создание сайта начинается с добавления его основного адреса в список сайтов (в левом верхнем углу интерфейса приложения «Сайт»). В нашем случае добавлять новый сайт нет необходимости, так как основной домен установки фреймворка mydomain.ru уже был добавлен автоматически при установке Вебасиста:

Сайт уже работает, и его можно посмотреть, щёлкнув по ссылке «Открыть сайт»:

В данный момент сайт состоит из одной демо-страницы «Добро пожаловать» и использует тему оформления по умолчанию под названием «Основная тема». Добавим новый раздел «Блог», создадим новую страницу на сайте и попробуем немного изменить оформление сайта.

2. Маршрутизация и поселение приложений

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

Сейчас в правилах маршрутизации только одно правило: mydomain.ru/* -> Сайт. Правило означает, что всё адресное пространство предоставлено приложению «Сайт», то есть любой запрос посетителя сайта будет передан на обработку (иначе говоря, маршрутизирован) приложению «Сайт».

Добавим новое правило: mydomain.ru/blog/* -> Блог.

Добавив это правило, мы поселили приложение «Блог» по адресу mydomain.ru/blog/, и теперь любой адрес внутри mydomain.ru/blog/ (например, /blog/2011/?tag=updates, /blog/announcements/new-app-released/ и т. д. — в правиле маршрутизации это указывается звездочкой *) будет передан на обработку приложению «Блог». Все остальные адреса, не удовлетворяющие правилу mydomain.ru/blog/*, будут переданы приложению «Сайт» согласно правилу маршрутизации, которое действует по умолчанию.

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

Обратите внимание, что правило /blog/* в маршрутизации должно находиться выше правила /* в связи с тем, что правила обрабатываются одно за одним в порядке их отображения, и первое правило, которое подошло для текущего запроса пользователя, будет обработано, а все последующие правила будут проигнорированы. Если бы мы поставили правило /* над правилом /blog/*, то до /blog/* очередь никогда не дошла бы, потому что самое общее правило /* всегда бы срабатывало (ведь оно удовлетворяет любому адресу, запрошенному посетителем данного сайта). Чем более общим является правило, тем ниже оно должно находиться в правилах маршрутизации.

Итак, после создания нового правила маршрутизации для блога в левой колонке бекенда приложения «Сайт» появится новый пункт «Блог», внутри которого можно настроить оформление блога:

А в верхнем меню общедоступной части сайта появится ссылка «Блог», по которой будет работать блог:

Текст ссылки «Webasyst» в данном случае соответствует общему названию установки Вебасиста, которое указывается в настройках приложения «Инсталлер». Если у вас уже было введено другое название, то оно автоматически должно было подставиться вместо «Webasyst». Как бы то ни было, это название легко изменить в настройках поселения приложения. Изменим название поселения приложения «Сайт» на другое слово, например, «Главная»:

3. Новая страница

Добавим страницу «О сайте» по адресу mydomain.ru/about/:

При создании новой страницы её можно прикрепить к любому из поселений приложений, которые интегрированы со страницами «Сайта». Прикрепим страницу к нашему единственному поселению приложения «Сайт». Если бы мы хотели поместить страницу внутри приложения «Блог» (например, /blog/advertise-on-this-blog/), то следовало бы прикрепить страницу к «Блогу».

Страница появится в левом меню раздела сайта «Главная»:

4. Дизайн

Теперь немного поменяем общее оформление сайта, которое в данный момент работает на базе «Основной» темы оформления. В левой колонке выберем приложение «Сайт» и сделаем изменения в шаблонах дизайна 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-систем. Независимость приложений друг от друга позволяет разработчикам приложений максимально гибко создавать свои приложения, не зависеть от «наследия» других приложений.

5. Еще одно поселение «Сайта»

Добавим в правила маршрутизации еще одно поселение приложения «Сайт» по адресу mydomain.ru/shop/

И добавим в этом поселении одну информационную страницу в качестве корневой страницы (если не добавить страницу, то по адресу mydomain.ru/shop/ будет возвращаться ошибка 404):

Новое поселение, так же как и существовавшее до этого, по умолчанию использует тему оформления «Основная тема», поэтому страница по адресу mydomain.ru/shop/ будет выглядеть в рамках оформления, которое мы делали ранее:

Добавленная страница «Скоро открытие» не будет отображаться в меню страниц раздела сайта «Главная», потому что страница прикреплена к поселению «Сайта» по адресу mydomain.ru/shop/.

Попробуем теперь изменить оформление только нового раздела сайта mydomain.ru/shop/ (только нового поселения приложения «Сайт» в mydomain.ru /shop/), не меняя оформление раздела «Главная». Для этого необходимо создать новую тему оформления и применить ее к новому поселению, оставив как есть уже существующие тему оформления и поселение mydomain.ru/*. Создадим копию темы оформления в разделе «Темы» бекенда приложения «Сайт»:

Название копии темы — «Основная тема 1», и по желанию его можно изменить с помощью пункта меню «Переименовать» здесь же. Мы не будем этого делать и применим новую тему в настройках поселения «Сайта» по адресу mydomain.ru/shop/:

Теперь для наглядности сделаем небольшие изменения в дизайне уже новой темы (в файле default.css темы «Основная тема 1»), в результате чего получим, например, такое оформление:

Теперь два раздела общедоступного сайта в mydomain.ru/ и mydomain.ru/shop/, работающие на одном и том же приложении «Сайт», выглядят по-разному.

6. $wa->apps()

Обратите внимание, что во всех примерах выше добавление нового правила в маршрутизацию приводило к автоматическому появлению нового пункта меню в основной навигации на сайте. Такое поведение было обусловлено общей настройкой сайта, которая формирует массив $wa->apps():

$wa->apps() — это массив, введенный для простоты построения сайтов. Массив используется в темах оформления для формирования навигационного меню по умолчанию и представляет собой роль посредника между машрутизацией сайта и навигацией для пользователей. Добавляется правило маршрутизации — на сайте автоматически появляется новый пункт меню.

Если навигационное меню сайта отличается от структуры маршрутизации (например, если ваш сайт обладает сложной структурой, либо не все приложения должны отображаться в основном меню и т. п.), то $wa->apps() легко «отвязать» от машрутризации, включив ручное задание содержимого этого массива:

Массив $wa->apps() введён для простоты изначального построения сайтов, но не является обязательным для использования. В зависимости от вашей задачи используйте автоматическое или ручное формирование массива $wa->apps() или же вообще откажитесь от него, задав навигационное меню сайта напрямую в HTML-шаблонах или общих блоках.

7. Общие блоки

Общие блоки позволяют вынести общий код HTML/Smarty для последующего включения в шаблоны разных приложений или на статических информационных страницах. Например, для распространенной задачи добавления на сайт кода счетчика Google Analytics:

Добавим общий блок с содержимым счетчика:

И теперь подключим этот общий блок в основных шаблонах дизайна index.html всех поселений перед тегом </head>, как этого требует Google Analytics. В шаблонах приложения «Блог» и в обеих темах приложения «Сайт» необходимо подключить шаблон с помощью следующей конструкции:

{$wa->snippet("ga")}

Аналогично в общие блоки можно выносить отдельные блоки или элементы сайта и подключать их в шаблонах разных приложений. Например, вынести в общий блок весь «подвал» сайта или рекламные объявления, и подключить его в шаблонах приложений «Сайт», «Блог», «Магазин», «Форум» и т. д.

8. Шпаргалка

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

Для примера рассмотрим следующую задачу: на главной странице сайта выведем приветствие для авторизованных пользователей и информацию об операционной системе на устройстве, которое в данный момент использует пользователь:

Посмотрите, как это будет выглядеть в пользовательской части.

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