Наш опыт работы с шаблонами и типами документов

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

Здесь следует отметить, что отдельные второстепенные элементы административной части работают с нареканиями в Опере и IE. В Firefox все работает отлично, в Chrome также не было замечено недочетов.

У Umbraco в плане разработки следующие очень сильные стороны:

1. все действия в административной части делаются единообразно. В разделах административной части для узлов в дереве содержимого доступно контекстное меню, в котором собраны допустимые операции. Правая часть состоит из закладок, панели инструментов и области редактирования с набором редактируемых полей.
2. Сразу после установки у вас появляется мощный инструмент для хранения и редактирования практически всех нужных для сайта данных. Структура данных поддается полной настройке. Вместе с тем, для пользовательской части сайта все, что показывается – полностью определяется разработчиком.
3. Повторное использование кода. Все, что вы сделали в одном проекте элементарно перенести в следующий. Это верно и для кода на .NET и для макросов на XSLT и Razor.

Стили, шаблоны

Мы начинаем разработку сайта с раздела «Settings» (настройки). В контекстном меню узла «Таблицы стилей CSS» создаем 2 файла стилей: app.css и rte.css (кстати, в окне создания стиля расширение .css вводить не нужно!).

Мы используем app.css для стилей пользовательской части сайта. rte.css прикрепляется к Tiny MCE и в нем мы храним стили, доступные пользователю при редактировании статей на сайте. Для того, чтобы связать rte.css и TinyMCE, идем в раздел «Developer» и там на экране «Типы данных/Richtext Editor» ставим галку рядом с таблицей стилей rte. Жмем на кнопку сохранить (рисунок дискеты на панели инструментов правой части).

Возвращаемся в раздел «Settings» и переходим к шаблонам. Шаблон – это файл, который полностью определяет, как будет выглядеть та или иная страница сайта.

Создаем главный шаблон, который по совместительству является мастер-страницей (masterpage). В нем пишем код нашей страницы. Мы включаем сюда информацию, которая обычно и хранится в мастер-страницах .net: метаинформация для поисковой оптимизации, ссылки на файлы стилей, скриптов, основная разметка страницы и блоки для вставки содержимого. Чаще всего выделяется блок для дополнительного содержимого тега head: стили, скрипты конкретной страницы, – а также блок для текста, расположенного в основной части страницы.

Часто вид главной страницы и внутренних страниц различается. Сделать это в Umbraco легко – мы в контекстном меню основного шаблона primary выбираем создать новый и в этом случае шаблон primary станет мастер-страницей для вновь созданного. Umbraco определит блоки содержимого в мастер-странице и создаст для вас корректный шаблон с пустыми блоками asp:content. Можно создать столько шаблонов, сколько планируется разных видов страниц.

Ниже в узел «Языки» следует добавить русский язык. Это пригодится для корректного форматирования дат и денежных единиц, а также позволит воспользоваться таким инструментом Umbraco как словарь (Dictionary), незаменимым помощником при создании мультиязычных сайтов.

Типы документов

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

Тип документа – как тип объекта в ООП. Страница сайта является экземпляром объекта. Типы документа могут наследоваться, при этом дочерний тип получает свойства родительского.

На сайте может быть значительное число типов документов: новости - набор документов с одними полями, статьи - с другими, продукция, страница обратной связи, галерея изображений и пр.

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

Удобной структурой документов мы считаем следующую:

1. Главный тип документов «мастер-тип» – этот тип определяет специальные поля, которые используются самой системой Umbraco и многими расширениями. Это такие поля как umbracoNaviHide (не показывать в меню или в списке), umbracoUrlName (альтернативное имя адреса страницы в браузере) и еще ряд реже используемых полей.
2. Дочерним к «мастер-типу» является тип «SEO-страницы» – обычно это любая страница, которая показывается посетителю сайта. Тип определяет параметры мета информации о странице: заголовок, ключевые слова, описание.
3. Дочерними к «SEO-странице» являются специализированные страницы сайта: новости, конкретные статьи и прочее. В зависимости от ситуации могут быть еще уровни вложенности.
4. Первым из «прикладных» мы часто создаем тип документа «Главная страница», наследник «SEO-страницы». Бывает удобно хранить в этом типе документов глобальные настройки сайта: название сайта, слоган и логотип компании, адреса системных почтовых ящиков. Это в дальнейшем дает редактору сайта – простому пользователю – возможность менять эти параметры, не думая о конфигурации в web.config или еще где.

В результате, если страница не показывается на сайте, то ее родительским типом будет «мастер-тип», если показывается – «SEO страница».

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

Когда создан тип для главной страницы сайта, можно переключиться в раздел «Contents» и создать главную страницу сайта и добавить еще один штрих, связанный с локализацией. В контекстном меню узла «Содержимое» выбираем «создать» и создаем главную страницу сайта. Далее в контекстном меню для созданной страницы выбираем «управление доменами». Пишем произвольный домен, например, ru.moisait.com, выбираем нужный язык: русский (мы его добавляли ранее в раздел настроек). Нажимаем «Добавить новый домен».

В результате всем дочерним узлам, начиная с главной страницы, будет назначен русский язык. Это отразится на форматировании дат и позволит использовать соответствующий локализованный словарь. Кстати, таким образом можно создавать многоязычный сайт на Umbraco – для каждого языка создается своя главная страница и ей назначается соответствующий параметр языка.

Помимо вышеперечисленного мы переправляем в разделе настроек названия медиа-материалов (file, folder, image) на их русские эквиваленты. После этого предварительные действия завершены. Сайт готов к разработке шаблонов, макросов и содержимого для конкретного заказа.