то ждем ваше обращение в нашей службе тех поддержки.
Кастомизация шаблонов компонентов
Кастомизация шаблона компонента, как правило, преследует две цели:
- Приведение формы вывода данных компонента в соответствие с дизайном сайта;
- Организация вывода данных компонента в виде, недоступном в стандартном варианте.
На простых сайтах, как правило, шаблоны требуют кастомизации только при решении первой задачи. Для изменения системного шаблона компонента под конкретный сайт, его необходимо сначала целиком скопировать в папку шаблона сайта. После этого можно перейти к редактированию скопированного шаблона.
Детально с кастомизацией шаблонов можно познакомиться в разделе Кастомизация шаблона.
Пример редактирования шаблона на основе компонента меню
Выделите в HTML-верстке код, отвечающий за показ верхнего меню. Например:
<div class="topmenu"> <ul class="topmenu"> <li><a href="#" class="first">На главную</a></li> <li><a href="#">Новости</a></li> <li><a href="#" class="selected">Магазины</a></li> <li><a href="#">Книги</a></li> <li><a href="#">Форум</a></li> <li><a href="#">О компании</a></li> <li><a href="#">О Контакты</a></li> </ul> </div>
В этом коде пункты меню представлены в виде списка, который обладает следующими нюансами:
- У первого пункта меню должен быть указан стиль first;
- У выделенного пункта меню должен быть указан стиль selected;
- Меню является одноуровневым.
Модифицировать будем код шаблона gray-tabs-menu. Скопируйте шаблон в собственное пространство имен и откройте его для редактирования.
Редактирование шаблона можно проводить как в форме Bitrix Framework, так и копированием кода и правкой его в другом редакторе. Использовать другой редактор удобнее в случае объемных текстов, так как форма редактирования в Bitrix Framework не поддерживает цветовое выделение тегов. Для примера используйте Notepad++.
Код меню для этого шаблона выглядит так:
1 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
2
3 <?if (!empty($arResult)):?>
4 <div class="gray-tabs-menu">
5 <ul>
6 <?foreach($arResult as $arItem):?>
7
8 <?if ($arItem["PERMISSION"] > "D"):?>
9 <li><a href="<?=$arItem["LINK"]?>"><nobr><?=$arItem["TEXT"]?></nobr></a>
10 <?endif?>
11
12 <?endforeach?>
13
14 </ul>
15</div>
16<div class="menu-clear-left"></div>
17<?endif?>
Рассмотрим каждую строчку этого шаблона:
| ||||||||||||||||||||
Таким образом, шаблон меню содержит:
- область пролога шаблона меню;
- область тела шаблона меню (вывод повторяющихся элементов);
- область эпилога шаблона меню.
После адаптации шаблон примет вид (зеленым цветом выделены изменения):
1 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
2
3 <?if (!empty($arResult)):?>
4 <div class="topmenu">
5 <ul class="topmenu">
5a <? $cnt=0; ?>
6 <?foreach($arResult as $arItem):?>
7
8 <?if ($arItem["PERMISSION"] > "D"):?>
8a <?if ($arItem["SELECTED"]): ?>
8b <li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
8c <?else:?>
8d <?if ($cnt==0):?>
8e <li><a href="<?=$arItem["LINK"]?>" class="first"><?=$arItem["TEXT"]?></a></li>
8f <?else:?>
9 <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
10a <?endif?>
10b <?endif?>
10c <?$cnt++; ?>
10 <?endif?>
11
12 <?endforeach?>
13
14 </ul>
15</div>
16
17<?endif?>
Итак, что мы сделали?
- В строках 4,5 заменили стили у блока и у списка.
- В строке 5а ввели переменную $cnt с единственной целью – отследить первый элемент списка – в верстке он задается другим стилем. Эта переменная используется в строке 8d в строке 10c.
- В строках 8-10 добавили условие проверки активного пункта меню и первого пункта меню.
- И, наконец, удалили специфику верстки из 16 строки.
- Кроме того, у нас нет необходимости в специализированных стилях и картинках для этого шаблона. Поэтому нужно удалить из каталога
/bitrix/templates/.default/components/menu/top_menu/файл style.css и папку/images/.
Назад в раздел
