Кастомізація шаблону компонента, як правило, переслідує дві мети:
- Приведення форми виведення даних компонента у відповідність з дизайном сайту;
- Організація виведення даних компонента у вигляді, недоступному в стандартному варіанті.
На простих сайтах, як правило, шаблони вимагають кастомізації тільки при вирішенні першого завдання. Для зміни системного шаблону компонента під конкретний сайт, його необхідно спочатку цілком скопіювати в папку шаблону сайту. Після цього можна перейти до редагування скопійованого шаблону.
Детально з кастомізації шаблонів можна познайомитися в розділі Кастомізація шаблону.
Приклад редагування шаблону на основі компонента меню
Виділіть в HTML-верстки код, який відповідає за показ верхнього меню. наприклад:
У цьому коді пункти меню представлені у вигляді списку, який має наступні нюансами:
- У першого пункту меню повинен бути вказаний стиль first;
- У виділеного пункту меню повинен бути вказаний стиль selected;
- Меню є однорівневим.
Модифікувати будемо код шаблону gray-tabs-menu. Скопіюйте шаблон в власний простір імен і відкрийте його для редагування.
Код меню для цього шаблону виглядає так:
Розглянемо кожен рядок цього шаблону:
Таким чином, шаблон меню містить:
- область прологу шаблону меню;
- область тіла шаблону меню (висновок повторюваних елементів);
- область епілогу шаблону меню.
Після адаптації шаблон набуде вигляду (зеленим кольором виділені зміни):
Отже, що ми зробили?
- У рядках 4,5 замінили стилі у блоку і у списку.
- У рядку 5а ввели змінну $ cnt з єдиною метою - відстежити перший елемент списку - в верстці він задається іншим стилем. Ця змінна використовується в рядку 8d в рядку 10c.
- У рядках 8-10 додали умова перевірки активного пункту меню і першого пункту меню.
- І, нарешті, видалили специфіку верстки з 16 рядка.
- Крім того, у нас немає необхідності в спеціалізованих стилях і картинках для цього шаблону. Тому потрібно видалити з каталогу /bitrix/templates/.default/components/menu/top_menu/ файл style.css і папку / images /.
Увага! Ви можете використовувати стилі компонента і каталог шаблону компонента для зберігання стилів і додаткових файлів. Це дозволить вам переносити шаблон компонента між проектами.