{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"uf25"},{"data":{"image":{"id":"64b81c2cc75d1e0cb44d36e5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Меню Битрикс","type":"atomic:image","key":"c0ljj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда (а если быть честным довольно часто) возникает необходимость кастомизировать родной шаблон компонента Битрикс. В данном уроке мы научимся интегрировать верстку на примере главного меню.","type":"unstyled","key":"6mdkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем тестовую страницу в рамках нашего проекта:","type":"unstyled","key":"66bgd"},{"data":{"image":{"id":"64b806177aa40e10c10776d5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тесовая страница bitrix","type":"atomic:image","key":"5oecq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прописываем заголовок для страницы, имя файла и убираем галку \"Добавить пункт меню\":","type":"unstyled","key":"1jcja"},{"data":{"image":{"id":"64b8069aa1ca8729b485d3c9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Параметры тестовой страницы","type":"atomic:image","key":"6ajts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отлично! Страница создана. Теперь выбираем пункт \"Изменить страницу\":","type":"unstyled","key":"adoi9"},{"data":{"image":{"id":"64b806e49392435cb64aa947"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменение страницы","type":"atomic:image","key":"di0ig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удаляем текст установленный системой по умолчанию и выбираем компонент \"Меню\":","type":"unstyled","key":"4i8qo"},{"data":{"image":{"id":"64b80746061e2754ac51faf6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент меню для страницы","type":"atomic:image","key":"7ehs7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В параметрах компонента выставляем нужные значения и нажимаем \"Сохранить\":","type":"unstyled","key":"492pa"},{"data":{"image":{"id":"64b80793a4f0054e61a7f9dd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Параметры компонента меню","type":"atomic:image","key":"825if"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот что в итоге должно у нас получиться:","type":"unstyled","key":"b2r40"},{"data":{"image":{"id":"64b807e67b37eb7ada59b74b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верхнее меню битрикс","type":"atomic:image","key":"47n8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как можно заметить нижнее меню сильно отличается от того, которое у нас есть в шаблоне, однако беспокоиться не стоит. Следующий шаг - это копирование шаблона компонента в папку с нашим шаблоном. Масло масляное, но именно так и нужно сделать)","type":"unstyled","key":"3o3ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копирование делается вот так:","type":"unstyled","key":"figc1"},{"data":{"image":{"id":"64b8089cc8654d122c478c4c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копирование шаблона компонента","type":"atomic:image","key":"7t5cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выставляем нужные параметры и сохраняем изменения:","type":"unstyled","key":"59gh"},{"data":{"image":{"id":"64b808edc387435ab5300108"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копирование шаблона компонента","type":"atomic:image","key":"2cjqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможно Вы зададитесь вопросом: \"А для чего вообще необходимо копировать исходный шаблон компонента?\" Ответ очень простой: это нужно для того чтобы при очередном обновлении платформы все внесенные в него ранее изменения не удалились.","type":"unstyled","key":"a0q75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":62,"style":"BOLD"},{"length":1,"offset":123,"style":"BOLD"}],"text":"Папку с шаблоном меню можно будет найти по адресу: папка local→templates→папка с названием вашего шаблона→components→bitrix→menu:","type":"unstyled","key":"5n7cd"},{"data":{"image":{"id":"64b80a348af83b4cf6dc5f97"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаблон компонента","type":"atomic:image","key":"bf81u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь двойным щелчком открываем файл template.php:","type":"unstyled","key":"eldgk"},{"data":{"image":{"id":"64b80a8ec387435ab5329bd4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл template.php","type":"atomic:image","key":"e0evl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Т.о. перед Вами откроется файл с исходным кодом шаблона:","type":"unstyled","key":"4s8ho"},{"data":{"image":{"id":"64b80ae1061e2754ac588190"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Исходный код шаблона компонента","type":"atomic:image","key":"3fisb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь нужно будет немного отступить вниз и в свободное место поместить верстку для будущего меню (в моем случае это весь код заключенный в

с классом \"menu popup-block\"):","type":"unstyled","key":"bqqn3"},{"data":{"image":{"id":"64b80c31517f3269d233e6d0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка в шаблоне компонента","type":"atomic:image","key":"7fh7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внимательно изучим имеющийся у нас код, основное внимание нужно заострить на этих моментах:","type":"unstyled","key":"d63um"},{"data":{"image":{"id":"64b80ce8e7c37d4071eecb0b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка в шаблоне компонента","type":"atomic:image","key":"8v3oo"},{"data":{"image":{"id":"64b80cf09392435cb6554103"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка в шаблоне компонента","type":"atomic:image","key":"77k8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Т.е. вверху у нас есть

с определенным классом, тег

с классом \"mane-page\". В самом низу верстки мы имеем ссылку и закрывающий тег

. Все остальные элементы списка не имеют никаких классов. Отлично, теперь нам остается только перенести все эти моменты в наш шаблон. Начнем с тегов

и , вот что должно получиться:","type":"unstyled","key":"b4qs8"},{"data":{"image":{"id":"64b80edea4f0054e61b3a90c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кастомизация шаблона","type":"atomic:image","key":"4krel"},{"data":{"image":{"id":"64b80ede4292b7151ae33382"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кастомизация шаблона (продолжение)","type":"atomic:image","key":"eo7te"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И в завершение всего нужно будет убрать все лишнее в тегах
:","type":"unstyled","key":"a17le"},{"data":{"image":{"id":"64b80fe7c387435ab53b4b5d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кастомизация шаблона (продолжение)","type":"atomic:image","key":"e0db9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого удалите всю ранее скопированную верстку и сохраните файл (можно воспользоваться комбинацией клавиш ctrl+s):","type":"unstyled","key":"f4g4d"},{"data":{"image":{"id":"64b8105603fe29059817239f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кастомизированный шаблон компонента меню","type":"atomic:image","key":"ac3cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Остается только перейти на сайт, скопировать код вызова шаблона компонента и вставить его вместо использованной ранее верстки. Нажимаем на \"Изменить страницу\", переходим на вторую вкладку в редакторе и копируем имеющийся в ней код:","type":"unstyled","key":"66b6i"},{"data":{"image":{"id":"64b811186bb59d53e12ce844"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код вызова шаблона компонента","type":"atomic:image","key":"fdqu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вставляем его в хедере именно там где он необходим:","type":"unstyled","key":"b5r0g"},{"data":{"image":{"id":"64b8119c4948f036295c57e7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код вызова внедренный в верстку","type":"atomic:image","key":"2n78o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраняем изменения и смотрим что получилось:","type":"unstyled","key":"430gd"},{"data":{"image":{"id":"64b811ea3624ae0ff5491745"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верхнее меню сайта","type":"atomic:image","key":"gl8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все отлично, мы получили рабочее меню, которое точь-в-точь совпадаем по дизайну с тем что было у нас изначально.","type":"unstyled","key":"fdo4"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":6,"offset":0}],"inlineStyleRanges":[],"text":"Ссылка на экзаменационные билеты и материалы для подготовки (там как раз есть шаблон сайта представленный выше).","type":"unstyled","key":"5sccs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Также Вас может заинтересовать:","type":"unstyled","key":"9bn4f"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"64b190f75f052d0cff3d2a82","originalUrl":"https://dzen.ru/a/ZLGQ918FLQz_PSqC","publisherId":"607b3cb2dca3153cbc0ef00f","publisherName":"MCode: Канал для программистов","title":"Учимся добавлять включаемую область в Битриксе","publishTime":1689364715564,"isPublisherVerified":false,"image":{"id":"64b1a7e5338eaf5590f2886d","groupId":9856080,"imageName":"pub_64b190f75f052d0cff3d2a82_64b1a7e5338eaf5590f2886d","namespace":"zen_doc","meta":{"mainColor":"#F8F8F8","origFormat":"PNG"},"sizes":{"orig":{"width":1438,"height":1030},"scale_360":{"width":360,"height":258},"scale_540":{"width":540,"height":387},"scale_600":{"width":600,"height":430},"scale_720":{"width":720,"height":516},"scale_1200":{"width":1200,"height":860},"scale_2400":{"width":1438,"height":1030}}},"avatarsHost":"avatars.dzeninfra.ru","lang":"ru","isMobile":true,"isNewZenVideoEmbedEnabled":true}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"63pr1"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"646136638eca3b2c6c166706","originalUrl":"https://dzen.ru/a/ZGE2Y47KOyxsFmcG","publisherId":"607b3cb2dca3153cbc0ef00f","publisherName":"MCode: Канал для программистов","title":"Топ бесплатных онлайн-курсов для работы с Битриксом","publishTime":1684698624709,"isPublisherVerified":false,"image":{"id":"646e24b170df300552753350","groupId":9213367,"imageName":"pub_646136638eca3b2c6c166706_646e24b170df300552753350","namespace":"zen_doc","meta":{"mainColor":"#A8E0F8","origFormat":"PNG"},"sizes":{"orig":{"width":939,"height":529},"scale_360":{"width":360,"height":203},"scale_540":{"width":540,"height":304},"scale_600":{"width":600,"height":338},"scale_720":{"width":720,"height":406},"scale_1200":{"width":939,"height":529},"scale_2400":{"width":939,"height":529}}},"avatarsHost":"avatars.dzeninfra.ru","lang":"ru","isMobile":true,"isNewZenVideoEmbedEnabled":true}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"c0q56"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"62dc4c1c9dd6b7359bb4a602","originalUrl":"https://dzen.ru/a/YtxMHJ3WtzWbtKYC","publisherId":"607b3cb2dca3153cbc0ef00f","publisherName":"MCode: Канал для программистов","title":"Интеграция шаблона сайта в 1С-Битрикс","publishTime":1658671070277,"isPublisherVerified":false,"image":{"id":"62dd4f0e770bcd19c6331fdc","groupId":3431006,"imageName":"pub_62dc4c1c9dd6b7359bb4a602_62dd4f0e770bcd19c6331fdc","namespace":"zen_doc","meta":{"mainColor":"#000000","origFormat":"JPEG"},"sizes":{"orig":{"width":2400,"height":1601},"scale_360":{"width":360,"height":240},"scale_540":{"width":540,"height":360},"scale_600":{"width":600,"height":400},"scale_720":{"width":720,"height":480},"scale_1200":{"width":1200,"height":801},"scale_2400":{"width":2400,"height":1601}}},"avatarsHost":"avatars.dzeninfra.ru","lang":"ru","isMobile":true,"isNewZenVideoEmbedEnabled":true}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"c0usk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#менюбитрикс #главноеменю #интеграцияверстки #шаблонкомпонента","type":"unstyled","key":"8hrsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо за внимание!","type":"unstyled","key":"cch0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":100,"offset":0,"style":"ITALIC"}],"text":"Остались вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)","type":"unstyled","key":"blmt9"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":11,"offset":41}],"inlineStyleRanges":[{"length":62,"offset":0,"style":"ITALIC"}],"text":"Если статья оказалась полезной предлагаю подписаться на канал.","type":"unstyled","key":"3rg14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"apBwr5rxXJje8P0KiMTM"}],"entityMap":{"0":{"data":{"url":"https://academy.1c-bitrix.ru/certification/exams.php"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://dzen.ru/id/607b3cb2dca3153cbc0ef00f?integration=site_desktop&place=layout"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}