+7 905 531 32 52

Отправить сообщение, заявку, вопрос

6 августа 2018 года

Выпуск №3. Информационная модель сайта на практике. Управляем сайтом

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

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

С Вами Дмитрий Жолобов и Вы смотрите третий выпуск канала ИнфоДизайнер.

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

 

Вспомним, что у нас получилось. Имеем 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", в поле "Наименование пункта меню" - значение "Тестовый раздел".

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

Перейдем к вводу контента раздела, откроем редактор двойным кликом. Скопируем содержимое документа и вставим его в редактор. Как видим, стилистика документа и вставленного текста сохранилась. Но при необходимости можно нужные места в тексте подкорректировать.

Например, удалим заголовок, т.к. он уже введен нами в соответствующий атрибут раздела, установим стиль списка.

Кроме текста давайте вставим в содержимое раздела еще иллюстрацию. Укажем место, куда будем вставлять изображение, перейдём к пункту меню "Вставка - Изображение". Произойдет автоматический переход к хранилищу изображений.

Исходим из того, что нужного нам изображения в хранилище ещё нет, поэтому сначала его введем из заранее приготовленного графического файла. Создаём новый экземпляр изображения и вводим необходимые данные. Загрузим "Основное изображение", скопируем его в "Раскрывающееся изображение", у основного установим размеры поменьше. Сохраняем в состоянии "готов к публикации", выбираем для вставки в редактор раздела. Закрываем и сохраняем содержимое раздела.

Для того чтобы наш, вновь созданный раздел, появился в меню на сайте, его необходимо добавить в навигатор "Главное меню". Сохраняем и публикуем все на сайт.

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

 

Итак, в этом выпуске мы увидели, как реализована информационная модель сайта, как производится управление базовыми типами и как осуществляется публикация материалов на сайт.

 

В следующем выпуске мы займёмся расширением созданной модели новыми базовыми типами для выполнения новых задач, поставленных перед сайтом.

 

Благодарю за внимание и до следующих встреч!