9.2. Изменение пользовательского интерфейса

9.2.1. Темы пользовательского интерфейса

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

[Замечание]Замечание

Plone 3 поставляется с двумя встроенными темами — Plone default и NuPlone. В состав НауЛинукс входят несколько дополнительных тем.

Для выбора темы выберите ссылку Темы оформления на странице управления сайтом. В форме управления темами (см. Рис. 9.3) в списке Тема по умолчанию (Default theme) выберите необходимую и сохраните изменения. Новая тема будет применена к сайту сразу после сохранения страницы.

Страница выбора темы

Рисунок 9.3. Страница выбора темы

[Внимание]Внимание

Список дополнительных тем, поставляемых в составе НауЛинукс, и вопросы по их установке рассмотрены в Разд. C.2, Дополнительные темы интерфейса и Разд. C.3, Установка дополнительных тем соответственно.

9.2.2. Использование ZMI для редактирования интерфейса

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

Доступ к ZMI производится, как описано в Разд. 2.1.2, Доступ к веб-интерфейсу Zope. В ZMI находятся папки и объекты доступа к службам, предоставляющие многообразные возможности настройки сайта. В большинстве случаев для редактирования любого из элементов отображения необходимо выбрать объект, отвечающий за визуальное представление этого элемента, и произвести необходимые изменения. Для изменения или расширения функциональности элементов требуется использовать соответствующую службу.

Для изменения свойств страницы используется два каталога  — portal_view-customizations и portal_skins. Наличие двух каталогов вызвано необходимостью раздельно хранить информацию о классах объектов, созданных по технологиям, используемым в версиях до Plone 3, для этого используется каталог portal_skins, и о классах, разработанных с использованием подходов, принятых в Zope 3 (версия Plone 3 и, как ожидается, выше). В каталогах хранятся различные ресурсы, используемые для отображения — изображения, стилевые таблицы, шаблоны разметки визуальных элементов.

9.2.3. Изменение логотипа сайта

Рассмотрим в качестве примера часто возникающую задачу — изменение логотипа сайта.

Логотип сайта — прямоугольный участок верхней части страницы, где обычно размещен рисунок, являющийся визитной карточкой сайта (см. Разд. 1.7, Визуальный интерфейс).

[Внимание]Внимание

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

Логотип можно изменить несколькими способами. Здесь мы рассмотрим только два способа.

Самым простым способом изменения является помещение изображения логотипа в папку custom, предназначенную для хранения измененных элементов интерфейса — изображений, шаблонов и т.п.

Перейдите в папку custom через последовательность вызовов ZMIportal_skinscustom.

Добавьте в эту папку новый объект Image, выбрав его в меню добавления нового объекта. Установите значение свойства Id равным logo.jpg и укажите файл изображения, который предполагается использовать в качестве логотипа. После сохранения объекта новый логотип автоматически будет отображен на странице сайта. В качестве примера на Рис. 9.4 приведено отображение страницы с новым логотипом, установленным подобным образом.

Изменение логотипа

Рисунок 9.4. Изменение логотипа

[Внимание]Внимание

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

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

Второй способ изменения логотипа рассмотрен в Разд. 9.2.6, Изменение логотипа сайта через изменение шаблона.

9.2.4. Изменение свойств страницы

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

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

Окно службы base_property

Рисунок 9.5. Окно службы base_property

В приложении Разд. C.1, Параметры base_property рассмотрены все свойства, которые можно редактировать через данную службу.

Для редактирования свойств нажмите кнопку Customize. При этом, во-первых, произойдет вызов окна редактирования свойств и, во-вторых, все ресурсы (изображения, стилевые таблицы и т.п.) будут прежде всего искаться в каталоге ZMIportal_skincustoms или в каталоге ZMIportal_skincustombase_properties.

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

9.2.5. Изменение нижней части страницы (footer)

Для редактирования вида нижней части страницы перейдите в ZMI и выберите элемент portal-view-customizations, как показано на Рис. 9.6. Этот элемент представляет собой папку, в которой собраны объекты, отображающие отдельные части страницы.

Служба редактирования интерфейса

Рисунок 9.6. Служба редактирования интерфейса

В portal-view-customizations выберите объект plone.footer. В нижней части формы редактирования этого объекта расположено окно с кодом, определяющим разметку выбранного элемента, и кнопка Customize.

Страница настройки footer

Рисунок 9.7. Страница настройки footer

После нажатия кнопки будет создана копия страницы с кодом и она станет доступна для редактирования. Все элементы, подвергшиеся редактированию, в списке содержимого папки portal-view-customizations будут отмечены цветом.

Код, определяющий вид нижней части страницы, написан на языке HTML. В код вставлены специальные теги языка определения шаблонов (Tal), используемого в Plone для создания динамически изменяемых страниц. Редактируя соответствующие части кода, можно настроить отображение нижней части страницы.

На Рис. 9.8 показан пример кода, изменяющего надпись.

Редактирование кода footer

Рисунок 9.8. Редактирование кода footer

Теперь нижняя часть страницы выглядит, как показано на Рис. 9.9.

Новый вид нижней части страницы

Рисунок 9.9. Новый вид нижней части страницы

9.2.6. Изменение логотипа сайта через изменение шаблона

Таким же способом, как изменение нижней части, можно изменить и логотип сайта. Описанным выше способом перейдите в каталог portal-view-customizations и выберите объект plone.logo.

Окно редактирования шаблона логотипа

Рисунок 9.10. Окно редактирования шаблона логотипа

В открывшейся форме (см. Рис. 9.10) представлен код шаблона части страницы, ответственного за представление логотипа. В частности, здесь определен адрес гиперссылки, приписанной логотипу. По умолчанию это адрес текущего сайта. В большинстве случаев ничего редактировать не надо. Достаточно нажать кнопку Customize. Это является сигналом о том, что ресурсы, используемые в шаблоне, находятся в папке custom или папке custom/base_properties. Идентификатор выбранной папки должен совпадать с идентификатором папки, указанным в окне редактирования свойств службы base-property.

Теперь необходимо перейти в одну из указанных папок и добавить туда объект типа Image. Идентификатор объекта может быть любым, например mylogo. Укажите местоположение нового логотипа в файловой системе и сохраните изменения.

Для окончания настройки вызовите форму редактирования свойств службы base-property и в поле logoName укажите идентификатор созданного объекта. После сохранения изменений можно переходить на страницу сайта и любоваться изменениям.

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

[Внимание]Внимание

Не пытайтесь редактировать шаблон без наличия соответствующих знаний и навыков. Это может привести к непредсказуемым последствиям.