Шаг третий. Заменяем участки кода на подключение компонентов битрикса.

В качестве примера установим компонент меню

Посмотрим ещё раз на код верхней части html-шаблона, который был перемещен в файл header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Oceania by FCT</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="wrapper">
<div id="header">

<div id="logo"> <h1><a href="#">Oceania</a></h1> </div>
<div id="menu">
<ul>
<li class="first current_page_item"><a href="#">Homepage</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<br class="clearfix" /> </div>

</div>
<div id="page">
<div id="content">
<div class="box">

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

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

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

Компонент меню со стандартным шаблоном, приблизительно соответствующим по дизайну этого html-шаблона, подключается следующим кодом:

<?$APPLICATION->IncludeComponent( "bitrix:menu", "blue_tabs", Array( "ALLOW_MULTI_SELECT" => "N", "CHILD_MENU_TYPE" => "left", "COMPONENT_TEMPLATE" => ".default", "DELAY" => "N", "MAX_LEVEL" => "1", "MENU_CACHE_GET_VARS" => array(""), "MENU_CACHE_TIME" => "3600", "MENU_CACHE_TYPE" => "N", "MENU_CACHE_USE_GROUPS" => "Y", "ROOT_MENU_TYPE" => "top", "USE_EXT" => "N" ) );?>

Итак, открываем на редактирование файл header.php шаблона и аккуратно вырезаем фрагмент кода, который мы указали жирным шрифтом. Вырезанный фрагмент пока скопируйте в блокнот, он ещё пригодится.

На место вырезанного фрагмента вставляем код вызова компонента меню, указанный выше. Сохраняем файл. Посмотрите что получилось - на месте демо-меню html шаблона теперь находится меню битрикса, которое показывает структуру вашего сайта (его можно отредактировать в режиме правки, задавая для отображения нужный тип меню и названия пунктов).

Логика компонента меню работает правильно, но необходимо, чтобы вид пунктов меню соответствовал дизайну html-шаблона. Поэтому необходимо провести корректировку шаблона компонента меню. Для этого на странице сайта переходим в режим правки и затем копируем шаблон компонента меню (наводим мышкой на меню и в раскрывающемся списке находим пункт "Копировать шаблон компонента"), указывая moishablon.

Далее опять идем в администрирование, открываем папку шаблона moishablon и обнаруживаем что там появилась папка components с вложенным шаблоном меню. Во его-то и предстоит подкорректировать.

Открываем шаблон меню (раскрываем эту папку components, пока не доберемся до файлов шаблона меню). Удаляем файлы стилей style.css и style.min.css - они больше не понадобятся). Открываем на редактирование файл template.php и производим некоторые замены.

Посмотрите на сохраненный ранее в блокноте фрагмент кода меню html-шаблона. Необходимо перенести имеющиеся там элементы верстки в файл template.php. Так заменяем <div class="blue-tabs-menu"> на <div id="menu"> а <li> на <li class="last">, сохраняем файл.

И последнее. Поскольку файлы стилей из шаблона компонента меню мы удалили и компонент в таком случае использует файл стилей самого шаблона (styles.css в папке moishablon), то придется туда дописать стиль пункта при наведении мыши - голубой фон:

#menu ul li.last:hover
{
background: #56AFD8 url(images/img04.jpg) top left no-repeat;
border-top: solid 1px #82D9ED;
border-bottom: solid 1px #24627C;
border-radius: 5px;
padding: 10px 15px 10px 15px;
display: inline;
text-shadow: 0 1px 1px #0E3E68;
}

Вставьте его в блок стилей меню, допустим последним стилем. На этом работа с шаблоном сайта закончена. Осталось его подключить.

ПЕРЕЙТИ К ЧЕТВЕРТОМУ ШАГУ

ВЕРНУТЬСЯ КО ВТОРОМУ ШАГУ

© 2021 Все права защищены.