Пошаговое руководство по сборке простого сайта, версия 1.0 (10.04.2007)
Прежде чем приступить к сборке сайта, необходимо установить Твайлайт CMS на Денвер или IIS, ознакомиться с сайтом-примером, попробовать управление сайтом через админзону.
Заготовка для нового сайтаДалее будет описано то, как мы рекомендуем начинать работать с абсолютно любым проектом. Если система установлена на ДенверКлонируем папку с уже установленным Твайлайтом в директории home Денвера. Можно использовать папку demosite. Переименуем папку из demosite в new. Теперь будем работать с ней. Папку zagotovka из архива Заготовка.zip кладем в home/new/www/Sites/. Нужно прописать в aliases.dat то, из какой папки Твайлайт будет брать данные для домена http://new. А брать их нужно из home/new/www/Sites/zagotovka. Для этого в home/new/www/aliases.dat demosite::svetlova
заменяем на
new::zagotovka
Если система установлена под IIS Windows XP ProПапку zagotovka из архива Заготовка.zip кладем в папку C:\Inetpub\TwilightCMS\Sites. Новый сайт будем делать на домене http://new. Нужно прописать в aliases.dat то, из какой папки Твайлайт будет брать данные для домена http://new, для этого aliases.dat необходимо добавить строку new::zagotovka
Все директории далее будут указаны относительно папки zagotovka. Для Денвера это X:\home\new\www\Sites\zagotovka, а для IIS это C:\Inetpub\TwilightCMS\Sites\zagotovka
Теперь http://new должен выдать сообщение о том, что домен успешно подключен. Проверьте его доступность в браузере. Если вы не увидели сообщения "Домен успешно подключен", то: Учтите, что в userlist.dat хранятся пока пароли с того сайта, который является шаблоном. Так как на сайте http://demosite/Admin пароль и логин был demosite, то и на http://new/Admin пароль для первого входа в админзону тоже будет demosite. Не забудьте поменять пароль перед тем, как выложить сайт на хостинг! Таким образом, у нас есть сайт заготовка под новый домен http://new Выделение управляемых блоковШаблон – это основа страницы, которая, как правило, является общей частью для нескольких страниц сайта и не может быть изменена администраторами и редакторами через админзону. Разработчик при сборке выделяет из сайта:Для простоты и изучения основ сборки у нас будет один шаблон для всех страниц сайта. Для более сложных сайтов система позволяет создать неограниченное число шаблонов.
Дизайн, который мы используем, содержит уже сверстанную HTML страницу. Если вы будете создавать свой дизайн, то перед сборкой необходимо сверстать HTML страницу. Необходимо выделить те блоки страницы, которые мы хотим сделать управляемыми. У нас это будет меню (на рис. 1 красный цвет), новости (зеленый цвет), контентный блок (синий цвет) и копирайты внизу страницы (желтый цвет). Ниже изучите код страницы с пояснениями. Мы должны выделить участки кода, отвечающие за те блоки, которыми мы планируем управлять.
Теперь у нас выделены блоки, которые мы хотим сделать управляемыми: Создание шаблона страниц для нового сайтаНужно взять HTML для сверстанного дизайна и поместить его в файл шаблона Templates/default.html. Теперь, набрав http://new, вы можете уже увидеть свой новый сайт (пока без картинок и без стилей в css). Картинки для нового сайта копируем в папку Images. Содержимое файла CSS от нового дизайна копируем в Templates/common.css Система будет обрабатывать стили только из файла, который задан в шаблоне, как это обычно делается в HTML, а вот для админзоны стили берутся только из common.css! Это сделано для того, что бы при редактировании контент-менеджер сразу видел, как будет выглядеть контентный блок (цвет фона, шрифт, оформление ссылок и т.д.) Теперь все пути до картинок мы должны заменить на
$RealmURL$/Images/имя-файла.gif
Для этого находим все выражения типа
<img src=”
и меняем, к примеру,
src="images/img4.jpg"
на
src="$RealmURL$/Images/img4.jpg"
Макроподстановка $RealmURL$ позволяет определять путь к компонентам сайта независимо от реального расположения сайта на диске сервера. В CSS по такой же логике меняем относительный путь url(img/Меню.JPG); на url($RealmURL$/Images/Меню.JPG); А так же в Templates/default.html
<link href="default.css" rel="stylesheet" type="text/css" />
меняем на
<link href="/Sites/twl_ru/Cache/common.css" rel="stylesheet" type="text/css" />
Теперь http://new корректно отображает наш исходный шаблон для нового сайта. А http://new/Admin отображает нашу админзону. На рис. 2 видно, что в админзоне есть пока только минимум функциональности для любого сайта. Приступаем к созданию управляемых блоков.
Создаем управляемое меню
Для создания управляемого меню на Твайлайт CMS, нужно сделать 4 шага:
Любое меню (горизонтальное, вертикальное), с точки зрения нашей системы, можно разделить на 4 составляющие: заголовок (header), подвал (footer), повторяющийся элемент (item) и разделитель между элементами (delimiter).
Генерация меню будет осуществляться в следующем порядке:
Заголовок (параметр <header>) Пункт меню 1 опубликованный в админзоне(параметр <item>) Разделитель (параметр <delimiter>) Пункт меню 2 опубликованный в админзоне (параметр <item>) Разделитель (параметр <delimiter>) Пункт меню 3 опубликованный в админзоне (параметр <item>) Разделитель (параметр <delimiter>) ... ... ... ... ... ... ... ... ... Подвал (параметр <footer>)
Чтобы в определенном месте на страницах сайта появилось управляемое меню, макроподстановку
Участок menu.xml, в котором прописаны существующие пункты меню
Чтобы меню отображалось на страницах сайта, нужно заполнить Templates/menu_design.xml. Берём приведенный ниже блок кода и вставляем его в Templates/menu_design.xml между тегами <control-document> и </control-document>. На рис. 3 выделены те блоки, которые мы используем для создания дизайна меню, приведенного ниже.
После того как мы вставили макроподстановку $Menu[menuid: mainmenu; design: mainmenu_firstpage]$ в Templates/default.html и определили дизайн в файле Templates/menu_design.xml, нам нужно создать несколько контентных страничек и опубликовать их в меню.
Активный пункт отобразился серым цветом, т.к. мы использовали style="background-color: #8A8A8A;color: #FFFFFF;" в секции <active> файла Templates/menu_design.xml. Управляемое меню готово. Последовательность действий при сборке меню не изменится даже если мы создаем меню более сложной структуры и дизайна. В абсолютно любом меню можно выделить 4 составляющие: заголовок (header), подвал (footer), повторяющийся элемент (item) и разделитель между элементами (delimiter). 4 блока. Таким образом, это деление, пожалуй, самое трудное во всем этом процессе. Создание управляемых контентных блоков
Этот код выводит нам область, обозначенную на рис.1 синим цветом. Заменяем приведенный участок HTML из шаблона Templates/default.html на
$Content$ позволит управлять главной контентной зоной на странице (рис.1, синий контур) через админзону. Цвет фона редактора контентной зоны в админзоне определяется в файле Templates/common.css в разделе body {background:# }. В нашем случае цвет фона в css черный и цвет букв тоже черный (букв не будет видно в редакторе). А контентный блок серо-зеленый и нам нужно, что бы тот же цвет отображался в редакторе админзоны в качестве цвета фона. Но при этом мы должны сохранить исходный вид шаблона. Для этого мы в common.css для тега body устанавливаем background: #E9EAE2; (серо-зеленый), а внутри шаблона сайта Templates/default.html изменяем <body> на <body style="background: #000000;"> Таким образом, цвет для редактора контента стал серо зеленым, а для фона всего сайта черным. Теперь можно редактировать контент из админзоны на любой странице созданной на шаблоне default.
Использование $ContentBlock[]$
Вывод в нужном месте содержимого контентного блока. Контентный блок - это условное понятие, поскольку им может быть любая страница сайта, управляемая из раздела "Контентные страницы" админзоны. Как правило, так называются страницы, которые не показываются в браузере отдельно, а используются как часть других страниц. Например, контентным блоком может стать блок "контакты" в подвале сайта, блок "счетчики" и т.п.
Использование сервиса новостной лентыАнонсы новостей на главной странице
Для создания анонсов новостей на Твайлайт CMS, нужно сделать следующие шаги:
Сделаем вывод нескольких последних новостей на страницы на этом шаблоне.
Шаг 1. Задать поля для редактора новостей в админзонеЧтобы в админзоне появилась возможность добавлять новости, нужно создать новую форму ввода для новостей. Вставим в файл Data/entities.xml между тегами <entities> и </entities> запись
C помощью этой конструкции мы определили типы и количество полей для редактирования новости.
Шаг 2. Добавить редактор для новостей в Content/menu.xmlДля этого вставляем в раздел <folder assign="special" description="" id="special20" node-id="" title="Справочники">.
Теперь в админзоне в разделе «Справочники» появится список новостей, а из списка можно попасть в редактор для новостей с полями, описанными вами в enitities.xml
Шаг 3. Задать положение новостей в шаблоне макроподстановкой $News$Теперь фрагмент HTML с новостями из Templates/default.html заменяем макроподстановкой $News[source: news; design: news_firstpage; count: 3]$ (готовые макроподстановки использованы с http://www.twl.ru/tsdn/?sid=catalog). Когда система обнаруживает в шаблоне или контентной части макроподстановку вида $News[source: news; design: news_firstpage; count: 3]$ она выбирает данные из файла Data/news.dat, в файле Templates/news_design.xml ищет дизайн с указанным id (<newsdesign id="news_firstpage">) и выводит вместо макроподстановки результирующий HTML. Этот HTML строится следующим образом:
Заголовок (параметр <header>)
Новость 1 (параметр <item>) Разделитель (параметр <delimiter>) Новость 2 (параметр <item>) Разделитель (параметр <delimiter>) ... ... ... ... ... ... ... ... ... Новость N (параметр <item>) Подвал (параметр <footer>) Таким образом, разработчику, с точки зрения оформления, нужно разделить новостную ленту на 4 части: заголовок ленты, подвал ленты, новость и разделитель, которые будут отрисовываться в цикле. Затем, нужно поместить их в файл news_design.xml как шаблон оформления. Шаг 4. Выделить в коде новостного блока заголовок, тело новости, разделитель и подвал
Шаг 5. Создать дизайн для анонсов новостей в файле Templates/news_design.xmlБерём приведенный ниже блок кода и вставляем его в Templates/news_design.xml внутрь тега <control-document>
Макроподстановка $DateTime$ описана на http://www.twl.ru/tsdn, как и все используемые макроподстановки системы. $Attribute:caption$ и $Attribute:announce$ возвращают из файла данных news.dat значения полей caption и announce.
Новости из справочника новостей отобразились на странице сайта.
Создание страницы новостей
Для создания страницы новостей на Твайлайт CMS нужно сделать следующие шаги:
Шаг 1. Создать страницу для отображения новостейЧерез админзону создаем страницу с псевдонимом news, на которой будут выводиться новости
Шаг 2. Макроподстановка $News$В редакторе страницы справа для новостной страницы вставляем две строки. Логика работы этих макросов будет описана ниже.
Шаг 3. Прописать дизайн для новостей в Templates/news_design.xmlДля работы этих макроподстановок сделаем два дизайна с идентификаторами news_archive и news_details, вставляем их в news_design.xml.
Приведенная выше комбинация двух макросов $News$, работает следующим образом.
При обращении к странице с псевдонимом news Твайлайт обрабатывает первую макроподстановку
Если условие condition для первой макроподстановки не будет выполнено, то она ничего не выведет. Начнется обработка второй подстановки.
Таким образом, задав два взаимоисключающих условия, мы добиваемся того, что архив и детальное описание новости отражаются на странице с одним псевдонимом. Подробнее об использованных макроподстановках на http://www.twl.ru/tsdn Предустановленные переменные keywords, description, title для страницыВ админзоне есть раздел «Предустановленные переменны». Здесь вы можете отредактировать переменные, например, для мета-тегов или других блоков на странице, которые удобнее редактировать из одного места.Контент-менеджер не может удалять и создавать новые предустановленные переменные. Вызов переменной осуществляется через $Variable[имя_переменной]$. В шаблоне Templates/default.html мы будем использовать 3 переменных, которые управляются через админзону. Змените в шаблоне содержимое метатегов и тега <title> также, как показано ниже.
Редактировать значение этих переменных можно в админзоне
Предустановленные переменные.
|