Компонент Новые сообщения блога
¦ Выделите в текстовом файле теги строк таблицы:
tr
td width=25 height=25 background=/ bitrix/templates/test/images/fot_tabl_centr.jpg td width=1 valign=top height=25 background=/bitrix/templates/test/images/fot_tabl_c. gifimg width=2 height=2 src=/bitrix/templates/test/ images/fot_tabl_w.gif //td
td height=25 background=/bitrix/templates/ test/images/fot_tabl_centr.jpg td width=1 valign=top height=25 background=/bitrix/templates/test/images/fot_tabl_c. gifimg width=2 height=2 src=/bitrix/templates/test/ images/fot_tabl_w.gif //td
/tr
tr
td height=1 background=/bitrix/templates/ test/images/fot_tabl_c.gifimg width=2 height=2 src=/bitrix/templates/test/images/fot_tabl_w.gif //td
td width=1 height=1img width=2 height=2 src=/bitrix/templates/test/images/fot_tabl_w.gif //td
td height=1 background=/bitrix/templates/ test/images/fot_tabl_c.gifimg width=2 height=2 src=/bitrix/templates/test/images/fot_tabl_w.gif //td
td width=1 height=1img width=2 height=2 src=/bitrix/templates/test/images/fot_tabl_c.gif //td /tr
¦ Вставьте этот код между ?foreach ($arResult as $arItem):? и ?endforeach?, удалив все, что размещено между ними.
¦ Сохраните внесенные изменения.
¦ Перейдите в режим Просмотр.
Вы увидите, что меню изменило свой вид и стало полностью соответствовать дизайну. Ну вот мы и настроили левое меню.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 3.
Нижнее горизонтальное меню
Левое вертикальное меню у нас будет меняться в зависимости от открытого раздела. Но для упрощения перемещения между разделами полезно сохранить возможность доступа к любому разделу с любой страницы сайта. С этой целью нужно иметь одно меню в не очень мешающемся месте, куда будут выводиться ссылки на все основные разделы сайта.
Таким будет нижнее горизонтальное меню. В описании интеграции модуля меню мы будем опускать подробную расшифровку некоторых операций, выполнявшихся ранее, однако на моментах, которые нуждаются в подробном описании, мы остановимся подробно.
Сначала определим, какая таблица отвечает за вывод нижнего меню.
¦ Откройте для редактирования шаблон тестового сайта.
¦ Удалите код таблицы, расположенный между метками:
!-- #Begin_down_Menu --
!-- #End_down_Menu --
¦ Перейдите в режим визуального редактирования.
¦ Добавьте на место таблицы компонент Меню, как уже делали с левым меню.
¦ Щелчком по иконке компонента активируйте его.
¦ Вызовите закладку Свойства (рис. 4.21).
В отличие от левого меню здесь нужно настраивать свойства.
Рис. 4.21. Панель Свойства для компонента Меню
¦ В поле Тип меню для первого уровня выберите Основное.
Основное меню это тип, который у нас еще не применялся. Для верхнего меню используется меню раздела.
Это значит, что в каждом разделе его придется создавать заново. Основное меню будет транслироваться на все страницы сайта.
¦ Остальные поля оставьте без изменений.
Не используемые нами параметры работают при выборе опции Уровень вложенности меню больше 1 в шаблонах меню с раскрывающимися списками. Мы такие меню не используем, но об их наличии надо знать.
Поле Тип меню для остальных уровней определяет тип меню вложенных уровней, который будет использоваться. Поле Подключать файлы с именами вида .тип_меню.menu_ext.php это очень интересная функция. Она позволяет динамически формировать меню. Однако подключение этой возможности требует создания PHP-файлов с вводом кода.
Так как пока освоение языка PHP не входит в наши цели, об этой функции мы только упомянем.
Обратим еще ваше внимание на кнопки со знаком вопроса. При наведении на них указателя мыши появляется всплывающая подсказка с описанием параметра (как на иллюстрации). Это так называемые тул-типс советы местного значения.
Не пренебрегайте ими, они бывают очень полезны.
¦ Сохраните внесенные изменения.
¦ Перейдите в режим Разработка.
Вы увидите, что установленный компонент Меню по умолчанию подхватил использовавшийся уже шаблон меню Fishl, который мы сделали для левого меню. Нам это не нужно.
¦ Вызовите функцию Редактировать параметры компонента из меню компонента Меню (рис. 4.22).
Рис. 4.22. Редактируем параметры компонента
¦ В поле Шаблон компонента выберите Системный: .default.
¦ Сохраните внесенные изменения.
После этого вы увидите на месте нижнего горизонтального меню то же самое системное меню по умолчанию. Нам надо его модифицировать.
Но системный шаблон лучше не трогать.
¦ Скопируйте шаблон компонента по умолчанию в текущий шаблон сайта, как делали с левым меню, только назовите его по-другому, скажем, fish2.
¦ Вызовите функцию Редактировать шаблон компонента из меню компонента Меню. Откроется диалог Редактирование файла template.php.
В верхнем меню нам не нужно было переориентировать меню с вертикального на горизонтальное. Теперь придется.
¦ Из текстового файла с вырезанной таблицей вместо кода ul class=left-menu скопируйте и вставьте в шаблон открывающий код таблицы:
table width=1024 height=10 cellspacing=0 cellpadding=0 border=0 class=text
¦ Установите закрывающий тег таблицы вместо кода /ul.
Итак, мы задали размер таблицы на ширину дизайна.
¦ Измените class=text на class=bottom-menu (пусть такое имя будет у стилей для нижнего меню).
¦ Перенесите параметр class=bottom-menu в строку
a href=?=$arItem[LINK]??=$arItem[TEXT]?/a после открывающего тега a.
¦ Повторите последние действия для строки
a href=?=$arItem[LINK]? class=selected?=$a rItem[TEXT]?/a
¦ В параметре class=bottom-menu этой строки добавьте букву а.
ЗАМЕЧАНИЕ
Буква а в параметре class обозначает активную ссылку. То есть, задав специальный стиль с буквой а, можно менять внешний вид активной ссылки.
Что мы и сделаем в нижнем меню.
¦ Задайте тег tr начала строки таблицы сразу за открывающим тегом таблицы.
¦ Задайте закрывающий тег строки перед закрывающим тегом таблицы.
¦ Задайте открывающий тег ячейки td align=center на месте открывающего тега li отдельного элемента списка (для справки: в шаблоне есть два тега отдельных элементов списка для активной и для обычных ссылок).
¦ Задайте закрывающий тег ячейки на месте закрывающего тега отдельного элемента списка.
¦ Добавьте код картинки из текстового файла с вырезанной таблицей (img width=4 height=4 src=/bitrix/templates/ test/images/punkt_top.gif/) в код шаблона после тега td align=center.
¦ Сохраните внесенные изменения.
Теперь меню расположено по всей отведенной ширине, равномерно.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 2.
Теперь займемся стилями.
¦ Вызовите функцию Редактировать CSS-файл шаблона из меню компонента Меню.
Детально описывать процесс редактирования файла CSS мы не будем, базовых познаний в области HTML для этого достаточно. Единственное замечание: не забудьте создать стиль с параметром a.
¦ Отредактируйте шаблон компонента так, чтобы вид текста соответствовал утвержденному дизайну. Сделать это можно по подобию левого меню.
Одно замечание: в утвержденном дизайне шрифт в нижнем меню по размеру меньше, чем в левом.
ЗАМЕЧАНИЕ
Если бы размеры шрифтов не различались, можно было бы добавить стили не в CSS-файлы меню, а в CSS-файл шаблона сайта. Тогда достаточно было бы использовать единый файл стилей вместо нескольких стилей в разных файлах.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 2.
Верхнее частичное меню
В нашем тестовом проекте присутствует верхнее горизонтальное меню, в котором только три ссылки. Это частичное меню задумано как способ быстрого доступа к внутренним разделам и страницам, не отображаемым в левом и нижнем меню. Такой способ удобен, когда новостей у вас настолько много, что анонс статьи довольно быстро уходит с индексной страницы.
Скажем, появилась статья, которая может представлять интерес для многих читателей в течение длительного времени. Выносить ее в отдельный раздел нет смысла, но привлечь к ней внимание стоит.
Вы можете сделать ссылку на эту статью из верхнего частичного меню и держать ее на индексной странице столько, сколько сочтете нужным.
Механизм интеграции этого меню абсолютно идентичен механизму интеграции, описанному выше, за исключением одного момента. Чтобы на сайте отображались разные по своему составу меню, мы должны были использовать разные типы меню. Для левого мы использовали тип Левое меню, для нижнего Верхнее меню. Этим мы исчерпали все типы меню, имеющиеся в дистрибутиве по умолчанию.
Напомним, что типы меню выбираются в поле Тип меню для первого уровня в группе Основные параметры диалога Параметры компонента (рис. 4.23).
Рис. 4.23. Выбор типа меню
Чтобы иметь возможность задать для верхнего частичного меню отличный от других состав меню, нужно создать новый тип меню.
¦ Перейдите на панель управления.
¦ Выполните команду Настройки ^ Настройки продукта ^ Настройки модулей ^ Управление структурой.
¦ В группе Настройки для сайтов (рис. 4.24) найдите Типы меню.
¦ В пустой строке в колонке Тип введите part.
¦ В этой же строке в колонке Название введите Частичное меню.
¦ Сохраните внесенные изменения.
Рис. 4.24. Создаем дополнительное меню
Теперь у нас есть новый тип меню. Создадим и настроим верхнее частичное меню.
¦ Откройте для редактирования шаблон тестового сайта.
¦ Удалите код, имитирующий это меню, который находится между !-- #Begin_part_menu --
!-- #End_part_menu --
¦ Перейдите в режим визуального редактирования.
¦ Добавьте в место, где находился имитирующий код, компонент
Меню.
¦ Вызовите панель Свойства.
¦ В поле Тип меню для первого уровня выберите Частичное меню.
¦ Сохраните внесенные изменения.
¦ Перейдите в раздел Разработка.
¦ Скопируйте шаблон компонента. Назовите его, скажем, fish3.
За основу возьмите шаблон fish2.
¦ Вызовите функцию Редактировать параметры компонента из меню компонента Меню.
¦ Задайте для меню шаблон fish3.
¦ Сохраните внесенные изменения.
Перейдя в режим Разработка, вы не увидите никаких изменений, только на пустом месте, где были надписи частичного меню, появится ярлык Меню компонента. Место это пустое, потому что мы не создали ни одного пункта меню.
Создавать меню сейчас мы не будем, так как, по нашему замыслу, частичное меню должно вести на отдельные разделы и статьи, которые мы еще не загрузили в проект. В следующей главе мы займемся наполнением сайта контентом, там и создадим верхнее частичное меню.
Цепочка навигации
Цепочка навигации позволяет пользователю ориентироваться на сайте. Она очень полезна при разветвленной структуре сайта.
¦ Откройте для редактирования шаблон тестового сайта.
¦ Перейдите в режим текстового редактирования.
¦ Найдите и удалите код, имитирующий цепочку навигации на шаблоне сайта, расположенную между
!-- #Begin_nav --
!-- #End_nav --
¦ Перейдите в режим визуального редактирования.
¦ Откройте панель Компоненты 2.0.
¦ Выполните команду Служебные ^ Навигация.
¦ Добавьте компонент Навигационная цепочка прямо между метками навигации.
¦ Откройте панель Свойства.
На данном этапе в этой панели вас может заинтересовать одно поле, Номер пункта, начиная с которого будет построена навигационная цепочка. По умолчанию стоит 0. Это значит, что цепочка будет строиться от корня, с главной страницы. Такое положение не всегда удобно: когда пользователь на главной странице, все и так ясно, а место занимается, причем одним-единственным словом.
Как будете делать вы решайте сами. Мы установим показ навигационной цепочки по умолчанию, с 0.
Если бы на данный момент были созданы внутренние страницы сайта, например Общение ^ Блоги, то мы увидели бы появившуюся цепочку навигации (рис. 4.25).
В этом месте мы немного нарушим порядок действий и опишем настройку внешнего вида компонента, как будто у нас уже есть внутренние страницы. Вы можете вернуться к этой части настройки дизайна сайта потом, когда создадите разделы.
Рис. 4.25. Цепочка навигации
Итак, цепочка отображена, но ее вид не соответствует оформлению сайта. Повторим процесс подгонки. Правда, оговоримся сразу: активную ссылку красным (как в дизайне) можно сделать, только если в шаблоне написать условие PHP: если ссылка последняя, выделить цветом.
Мы этим заниматься не будем, так как книга рассчитана на тех, кто не знает PHP. Поэтому последняя ссылка останется серой.
¦ Перейдите в раздел Разработка.
¦ Скопируйте шаблон цепочки навигации. Вновь созданный шаблон назовите, скажем, fish_breadcrumb.
¦ Вызовите функцию Редактировать CSS-файл шаблона из меню компонента Цепочка навигации и отредактируйте стили так, чтобы они отображали Цепочку навигации, как на сайте.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 2.
Единственное, что вы не сможете сделать в этом файле, изменить разделитель в цепочке с на /. Это делается в шаблоне компонента.
¦ Вызовите функцию Редактировать шаблон компонента из меню компонента Цепочка навигации.
¦ Найдите в нем код gt; и замените его прямым слешем /.
¦ Сохраните внесенные изменения.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 2.
Цепочка навигации интегрирована в дизайн и выглядит как положено.
Компонент Новые сообщения блога
Предполагается, что наш сайт предназначен для общения единомышленников. В качестве основой формы такого общения выбран блог сетевой журнал. К настройкам самих блогов мы еще вернемся.
А пока нужно внедрить в шаблон компонент Новые сообщения блога. С его помощью новые сообщения в блогах будут выводиться на всех страницах тестового шаблона.
Прежде всего, как обычно, определим HTML-код, имитирующий вывод новых сообщений.
¦ Откройте для редактирования шаблон тестового сайта.
¦ Перейдите в режим текстового редактирования.
¦ Найдите и удалите код, имитирующий вывод новых сообщений блога, расположенный между
!-- #Begin_blog --
!-- #End_blog --
¦ Перейдите в режим визуального редактирования.
¦ Вызовите панель Компоненты 2.0.
¦ Откройте раздел Общение ^ Блоги.
¦ Перенесите компонент Новые сообщения на место, где был имитирующий код, между метками.
¦ Вызовите панель Свойства.
В исходном дизайне предусмотрен вывод только трех последних сообщений. Конечно, это не догма, но пока последуем за дизайнером.
Потом всегда можно переиграть эти настройки.
¦ В поле Количество результатов, выводимых на страницу поставьте значение 3.
Есть еще важный параметр, существенно влияющий на внешний вид проекта: Длина выводимого текста сообщения, но его значение вам надо будет подбирать экспериментально на реальном проекте. Пока это поле оставим без изменений.
¦ Сохраните внесенные изменения.
¦ Перейдите в режим Просмотр.
В режиме Просмотр вы не увидите никаких изменений, только текст, имитирующий блоги, пропадет. Дело в том, что блоги, поставляемые по умолчанию в дистрибутиве, привязаны к демо-сайту.
Нам надо перенастроить их на наш сайт.
¦ Перейдите на панель управления.
¦ Выполните команду Сервисы ^ Блоги ^ Группы блогов. Откроется форма Группы блогов.
На данный момент мы не можем сказать, к какой из представленных групп по умолчанию привязан блог администратора. Это можно узнать, но нам это не нужно.
Поэтому мы не будем ни создавать новые группы, ни переназначать на них блог администратора, а просто переопределим все существующие группы на наш сайт.
ЗАМЕЧАНИЕ
В главе 3 мы рассматривали в теории, как совершать групповые операции по редактированию. Теперь освоим это на практике.
¦ Поставьте флажок Для всех на панели действий. Флажки появятся у всех групп сразу.
¦ Щелкните по кнопке т на панели действий. Откроется та же форма, но с полями для редактирования.
¦ В колонке Сайт смените привязку к сайту с демо-сайта на сайт Matchfishing.
¦ Сохраните внесенные изменения.
¦ Перейдите в раздел Просмотр.
Вы видите, что в колонке под названием Блоги появились анонсы самых последних по времени сообщений (рис. 4.26).
Но нам надо отредактировать параметры и настроить шаблон.
В предложенном варианте дизайна в качестве новых сообщений выводится только текст. Без авторства и даты, но с аватаром. Задумка красивая, но есть одно но. Идея с аватарами накладывает ограничения на их размер, что не совсем удобно.
Это, конечно, мелочи можно потерпеть мелкие аватары в самих блогах. Серьезнее другое: для реализации подобного варианта придется менять сам компонент.
Этого на нашем уровне подготовки мы делать не будем. Потому отойдем от дизайна и вместо аватара выведем имя автора со ссылкой на его профиль:
- удалим картинку;
- удалим дату;
- удалим ссылку на комментарии;
- переведем ссылку с картинки на имя пользователя.
Рис. 4.26. Так отображаются блоги на данный момент
Займемся этими изменениями.
¦ Перейдите в режим Разработка.
¦ Скопируйте шаблон компонента в текущий шаблон сайта. Назовите его, скажем, fish blog new mess.
¦ Вызовите функцию Редактировать шаблон компонента из меню компонента Новые сообщения.
¦ Найдите и удалите из шаблона код:
span class=blog-author
a href=?=$arPost[urlToAuthor]?
title=?=GetMessage(BLOG_BLOG_M_TITLE_BLOG)? class=blog-user-grey/anbsp;;
¦ Удалите закрывающий тег /span для удаляемого стиля. Этим вы удалите картинку.
¦ Из этого удаленного кода скопируйте в буфер PHP-вызов ссылки на профиль автора? = $arPost[urlToAuthor]?.
¦ В PHP-коде
a href=?=$arPost[urlToBlog]?
title=?=GetMessage(BLOG_BLOG_M_TITLE_BLOG)?
?=$arPost[AuthorName]?
замените вызов ссылки на блог вызовом ссылки на профиль автора.
Этими действиями в имени автора блога вы замените ссылку на блог ссылкой на профиль автора.
¦ Найдите и удалите из шаблона код:
?if(IntVal($arPost[NUM_COMMENTS]) 0):?
nbsp;nbsp;span class=blog-comment-num title=?=GetMessage(BLOG_BLOG_M_NUM_ COMMENTS)??=$arPost[NUM_COMMENTS]?/span
?endif;?
Так вы удалите картинку и ссылку на комментарии к блогу.
¦ Найдите и удалите из шаблона код:
span class=blog-clock title=?=GetMessage(BLOG_BLOG_M_ DATE)??=$arPost[DATE_PUBLISH_FORMATED]?
/span
?if(IntVal($arPost[VIEWS]) 0):?
nbsp;nbsp;span class=blog-eye title=?=GetMessage(BLOG_BLOG_M_VIEWS)??=$arPost[VI EWS]?/span
?endif;?
Тем самым вы удалите дату и время сообщения.
В исходном дизайне ссылка на само сообщение идет не из названия сообщения (как пока у нас), а с картинки.
¦ Скопируйте из удаленного HTML-кода код картинки:
img width=20 height=20 border=0 align=right src=/bitrix/templates/test/images/ukaz_inf.jpg ¦ Вставьте его перед закрывающим тегом /a в коде:
a href=?=$arPost[urlToPost]?
?
if(strlen($arPost[TITLE])0) echo $arPost[TITLE]; else
echo GetMessage(BLOG_MAIN_MES_NO_SUBJECT);
?/a
¦ Удалите из этого фрагмента PHP-код запроса имени сообщения:
?
if(strlen($arPost[TITLE])0) echo $arPost[TITLE]; else
echo GetMessage(BLOG_MAIN_MES_NO_SUBJECT);
?
Этим вы удалите название сообщения и перенесете ссылку с названия на картинку. Осталось последнее: перенести текст выше картинки-ссылки.
¦ Перенесите PHP-код вывода текста сообщения ?=$arPost[TEXT_ formated]? перед HTML-кодом ссылки на сообщение.
¦ Перед PHP-кодом вывода текста сообщения, который вы только что перенесли, поставьте двоеточие. В этом случае сообщение будет отображаться как прямая речь согласно нормам русского языка.
Теперь надо вычистить шаблон от оставшихся ненужных кодов, вставить HTML-коды, задающие прежнее оформление, и назначить новые стили, определяющие форматирование текста.
¦ Удалите из кода получившиеся лишними пары small/small, b/b и пару тегов br /,span class=blog-post-info /span.
Код span class=blog-post-date не удаляйте, мы потом просто его переименуем.
¦ Удалите из кода фрагмент, задающий проверку первого сообщения, и горизонтальную линию, разделяющую сообщения.
if($arPost[FIRST]!=Y)
{
?div class=blog-line/div?
}
¦ Удалите оба кода br clear=left /.
¦ Удалите код:
?
if(strlen($arPost[IMG]) 0) echo $arPost[IMG];
?
¦ Скопируйте из удаленного кода HTML-код таблицы table width=99% cellspacing=3 cellpadding=5 border=0 и вставьте его перед PHP-кодом начала цикла foreach.
¦ Закройте тег таблицы по завершении цикла (в самом конце кода).
¦ Параметр width=9 9% исправьте на 96% так внешний вид таблицы будет полностью соответствовать утвержденному дизайну.
¦ Скопируйте из удаленной таблицы и вставьте в шаблон компонента (после тега цикла foreach) теги строки и ячейки таблицы tr td bgcolor=#dedee2 bordercolor=#bfbfbf class=br.
¦ Закройте теги строки и ячейки перед командой завершения PHP-цикла ? }?.
Из всех стилей в новом шаблоне используются только два. Их шрифты будут практически одинаковыми, отличие будет в цвете.
Пусть они называются blog-author и blog-text.
¦ Добавьте указание на класс class=blog-author в тег ссылки на профиль пользователя.
¦ В тегеspan class=blog-post-dateизмените blog-post-date на blog-text.
¦ Сохраните внесенные изменения.
ЗАМЕЧАНИЕ
Образец исходного и конечного кода есть в приложении 3.
Вы увидите, что внесенные изменения полностью преобразовали вид компонента, но его вид по оформлению текста еще не соответствует заданному в дизайне.
¦ Вызовите функцию Редактировать CSS-файл из меню компонента
Новые сообщения блогов.
¦ Удалите из шаблона все стили и их параметры.
