Доброго времени суток, друзья, коллеги, единомышленники, соратники по цеху и просто интересующиеся!
С Вами Дмитрий Жолобов и Вы смотрите третий выпуск канала ИнфоДизайнер.
В предыдущем выпуске мы выстроили информационную модель сайта, а сейчас рассмотрим на практике, как это работает.
Вспомним, что у нас получилось. Имеем 9 базовых типов (сущностей):
· Сайт
· Таблица стилей
· Java-скрипт
· Раздел сайта
· Шаблон страницы
· Навигатор
· Инфоблок
· Изображение
· Файл
А теперь подключимся к нашей демонстрационной базе клиентским приложением и рассмотрим, как работает эта модель на примере системы управления сайтами InfoDesigner JS.
Перед нами главное окно клиентского приложения InfoDesigner, с помощью которого совершаются все действия по разработке, администрированию и информационному наполнению сайта.
Давайте для начала рассмотрим каждый базовый тип с точки зрения его интерфейса управления. Пойдем по порядку, с помощью пункта меню «Структура – Сайты и разделы» откроем окно, в котором происходит управление базовым типом «Сайт» и деревом его разделов.
Откроем карточку управления сайтом. Видим набор полей:
· Наименование сайта
· Псевдоним сайта
· Главный раздел сайта, который является носителем содержимого главной страницы
· Ряд основных параметров
И далее на закладках можем управлять соответственно:
· Файлами таблиц стилей, которые участвуют в оформление данного сайта
· Файлами java-скриптов, которые необходимы для данного сайта, причём можно подключать их как в шапку, т.е. в область тега «head», так и в нижнюю часть html-страниц сайта
· Поле «Дополнительный код» позволяет очень легко при необходимости вставлять любой код в область тега «head», не углубляясь в системные шаблоны низкого уровня.
Все файлы таблиц стилей css и java-скриптов, которые мы подключаем к сайту в этих полях, автоматически будут участвовать во всех страницах сайта.
Далее по иерархии опустимся от сайта к его главному разделу. Карточку главного раздела можно открыть прямо с карточки сайта, а можно из окна «Сайты и разделы», выбрав соответствующий элемент списка.
Вот так выглядит карточка редактирования каждого раздела и, в частности, главного раздела сайта.
На главной закладке расположены следующие поля:
· Наименование раздела
· Title, Description, Keywords – содержимое тега Title и соответствующих мета-тегов на html-странице, формируемой этим разделом
· Поле «Имя папки» задаёт папку на файловой системе сайта, в которую попадает индексная страница раздела, таким образом, формируя url-адрес этой страницы. Исключение составляет главный раздел сайта с именем «main», что означает, что это страница является главной индексной страницей сайта, адрес которой совпадает с доменным именем сайта
· Поле «URL» задаётся в случае, если пункт меню этого раздела должен вести по ссылке на любой заданный внутренний или внешний адрес
· Поля «Заголовок раздела» и «Наименование пункта меню» говорят сами за себя
· Редактирование поля «Контент раздела» рассмотрим более подробно при публикации тестовой страницы
· В поле «Шаблон страницы раздела» указываем шаблон из списка, с помощью которого будет формироваться html-страница этого раздела
Далее в закладках:
· «CSS и JS» можно подключить таблицы стилей и js-скрипты, которые будут применяться только к этому разделу
· В «Дочерних разделах» происходит создание и подключение подразделов по отношению к редактируемому, таким образом, происходит выстраивание всей иерархии разделов
Рассмотрим базовый тип «Шаблон страницы». Для управления шаблонами страниц необходимо перейти к соответствующему пункту меню «Структура – Шаблоны страниц». Откроется окно со списком всех имеющихся шаблонов.
Для редактирования необходимо выбрать нужный шаблон и открыть его карточку.
Карточка шаблона имеет поля «Наименование шаблона» и «Содержимое шаблона».
Содержимое шаблона управляется с помощью встроенного визуального редактора, который открывается при двойном клике на поле.
Редактор позволяет вставлять в содержимое текст и задавать ему нужные стили абзацев и шрифтов, изображения, объекты из перечня в выпадающей левой панели, среди которых:
· Заголовок раздела
· Контент раздела
· Инфоблоки
· Группы инфоблоков
· Группы изображений
· Файловые данные
· Группы файловых данных
· Навигаторы разделов
· Списки продуктов
А также при необходимости можно вставлять html-код в чистом виде.
Как мы видим в открытой карточке «Шаблона информационных страниц», данный шаблон содержит атрибуты раздела «Заголовок раздела» и «Контент раздела», инфоблоки «Верхняя панель», «Правая колонка» и «Подвал» и ряд вставок с html-кодом.
Более подробно на работе в этом редакторе остановимся немного позже, а также в следующих выпусках.
В содержимом шаблона используются инфоблоки. Их можно открыть прямо из редактора, а можно открыть хранилище всех инфоблоков, воспользовавшись пунктом меню «Объекты - Инфоблоки» и уже из этого списка выбирать нужный для его редактирования или создать новый с помощью кнопки в панели инструментов.
Управление содержимым инфоблоков происходит при помощи уже упомянутого визуального редактора.
Перейдем к рассмотрению базового типа «Навигатор». С помощью пункта меню «Структура – Навигаторы разделов» отроем окно доступа к экземплярам этого типа. Откроем карточку навигатора «Главное верхнее меню».
Напомню, что навигаторы отвечают за формирование разных меню на сайте. В качестве пунктов меню указываем разделы, которые должны участвовать в этом меню в поле «Разделы сайта в меню» из числа уже имеющихся.
Из базовых типов, которые мы определили в информационной модели, остались «Изображения» и «Файлы». Их мы покажем далее в ходе демонстрации публикации материалов на сайт.
И вот настало время, когда нужно показать управляемый объект, т.е. сам сайт, которым мы управляем в данный момент. Этим сайтом является наш демонстрационный стенд, он имеет тестовое информационное наполнение, а внешний вид выполнен в нейтральном стиле, ссылка на него опубликована под этим видео.
Информационная модель нашего демо-сайта гораздо шире классической, которую мы рассматриваем сейчас. Поэтому будем обращать внимание только на те объекты, которые нами пока определены. А уже в следующих выпусках, по мере рассмотрения всей модели в целом будем подробно останавливаться на рубрикаторе, продуктах и списках продуктов.
А сейчас создадим новый раздел, наполним его тестовым контентом и опубликуем его на сайте.
В качестве исходного материала для этого раздела возьмём краткое описание работы системы InfoDesigner.
Будем создавать раздел первого уровня, чтобы он отобразился в главном горизонтальном меню нашего демо-сайта.
В этом случае родительским разделом по отношению к создаваемому разделу будет «Главный раздел сайта», откроем его карточку редактирования.
Перейдем в закладку «Дочерние разделы», выберем кнопку «Создать раздел сайта» в панели инструментов карточки. Откроется чистая карточка для ввода данных.
Начнем вводить данные в поля карточки сверху вниз из нашего заготовленного документа.
Скопируем заголовок документа и вставим его в поле «Наименование раздела». Титул страницы возьмём также из этого заголовка. Таким же значением наполним поле «Заголовок раздела».
В поле «Имя папки» введем значение «test», в поле «Наименование пункта меню» – значение «Тестовый раздел».
В поле «Шаблон страницы раздела» по умолчанию установился шаблон «Шаблон информационных страниц», его так и оставим.
Перейдем к вводу контента раздела, откроем редактор двойным кликом. Скопируем содержимое документа и вставим его в редактор. Как видим, стилистика документа и вставленного текста сохранилась. Но при необходимости можно нужные места в тексте подкорректировать.
Например, удалим заголовок, т.к. он уже введен нами в соответствующий атрибут раздела, установим стиль списка.
Кроме текста давайте вставим в содержимое раздела еще иллюстрацию. Укажем место, куда будем вставлять изображение, перейдём к пункту меню «Вставка - Изображение». Произойдет автоматический переход к хранилищу изображений.
Исходим из того, что нужного нам изображения в хранилище ещё нет, поэтому сначала его введем из заранее приготовленного графического файла. Создаём новый экземпляр изображения и вводим необходимые данные. Загрузим «Основное изображение», скопируем его в «Раскрывающееся изображение», у основного установим размеры поменьше. Сохраняем в состоянии «готов к публикации», выбираем для вставки в редактор раздела. Закрываем и сохраняем содержимое раздела.
Для того чтобы наш, вновь созданный раздел, появился в меню на сайте, его необходимо добавить в навигатор «Главное меню». Сохраняем и публикуем все на сайт.
По завершении выполнения служб генерации и репликации убеждаемся, что на стенде появился тестовый раздел.
Итак, в этом выпуске мы увидели, как реализована информационная модель сайта, как производится управление базовыми типами и как осуществляется публикация материалов на сайт.
В следующем выпуске мы займёмся расширением созданной модели новыми базовыми типами для выполнения новых задач, поставленных перед сайтом.
Благодарю за внимание и до следующих встреч!
