126  /  330

Кастомизация шаблонов компонентов

Просмотров: 5889 (Статистика ведётся с 06.02.2017)

Кастомизация шаблона компонента, как правило, преследует две цели:

  • Приведение формы вывода данных компонента в соответствие с дизайном сайта;
  • Организация вывода данных компонента в виде, недоступном в стандартном варианте.

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

Детально с кастомизацией шаблонов можно познакомиться в разделе Кастомизация шаблона.

Пример редактирования шаблона на основе компонента меню

Выделите в 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. Проверка, вызван ли этот файл напрямую или нет. Если напрямую – прекратить работу.
3. Если массив с пунктами меню $arResult не пуст, то выполнять дальнейшие действия
4,5. Внешний блок и начало списка пунктов меню
6. Цикл по массиву с пунктами меню. В $arItem – текущий элемент цикла.
8-10. Если текущий пользователь обладает правами на просмотр данной страницы, вывести элемент списка с ссылкой на эту страницу. В полях LINK и TEXT содержится адрес страницы и название пункта меню, соответственно.
12. Конец цикла по массиву с пунктами меню.
14,15. Конец списка пунктов меню и конец блока
16. Специальный HTML-тэг, специфичный для использованной верстки
17. Конец условия на наличие пунктов меню (см. строку 3)

Таким образом, шаблон меню содержит:

  • область пролога шаблона меню;
  • область тела шаблона меню (вывод повторяющихся элементов);
  • область эпилога шаблона меню.

После адаптации шаблон примет вид (зеленым цветом выделены изменения):

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/.
Внимание! Вы можете использовать стили компонента и каталог шаблона компонента для хранения стилей и дополнительных файлов. Это позволит вам переносить шаблон компонента между проектами.

20
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии