Как создать правильный хедер для шаблона битрикса.
Пример для файла header.php в 1С-Битрикс (Битрикс24?)
Без долгих вступлений, приступим к разбору кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> - //обязательно! //не позволяет подключиться к файлу на прямую. <!DOCTYPE HTML> - //обязательный параметр <html lang="ru-RU"> <head> <?IncludeTemplateLangFile(__FILE__);?> - //подключение lang (языковых) файлов <?$APPLICATION->ShowHead();?> - //Подключает стили и скрипты из основного шаблона <title><?$APPLICATION->ShowTitle()?></title> - //вывод тайтла в основном шаблоне сайта <?$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/my-css.css');?> - //подключение CSS //из шаблона <?$APPLICATION->SetAdditionalCSS("/bitrix/templates/.default/css/my-css.css")?> - //подключение css //по прямому пути <?$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/my-js.js');?> - //подключение JS из шаблона <?$APPLICATION->AddHeadScript('/bitrix/templates/.default/js/my-js.js')?> - //подключение JS //по прямому пути <link rel="shortcut icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico" /> - //подключение favicon </head> <body> <?$APPLICATION->ShowPanel();?> - //подключаем панель администратора |
Отличный пример headera взятый из интернета с комментариями. Не хватает нескольких вещей, которые можно найти на официальном видео-курсе, привожу пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();?> <?$bIsMainPage = $APPLICATION->GetCurPage(false) == SITE_DIR;?> <!DOCTYPE html> <!--[if lt IE 8]> <html class="no-js lt-ie9 lt-ie8"><![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> <!--[if gt IE 8]> <html class="no-js"><![endif]--> <head> <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?$APPLICATION->ShowTitle();?></title> <?$APPLICATION->ShowHead();?> <?$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/common-styles.css")?> <link rel="icon" href="<?=SITE_TEMPLATE_PATH?>/ico/favicon_bx.png"> <!--[if lt IE 9]> <script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/vendor/modernizr-html5shiv-respond.min.js');?>"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/vendor/modernizr.min.js');?>"></script> <!--<![endif]--> <? $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/jquery.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/bootstrap/collapse.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/bootstrap/tooltip.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/plugins.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/jquery.touchSwipe.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/jquery.ba-throttle-debounce.min.js'); ?> </head> <body> <!--[if lt IE 8]> <p class="chromeframe">Вы используете <strong>устаревший </strong> браузер. Пожалуйста <a href="http://browsehappy.com/"> обновите свой браузер</a> или <a href="http://www.google.com/chromeframe/?redirect=true">установите Google Chrome Frame</a> чтобы улучшить взаимодействие с сайтом.</p> <![endif]--> <?$APPLICATION->ShowPanel();?> |
Как видим, добавились проверки на всеми горячо любимый Internet Explirer. Тег, который сейчас используется в каждом шаблоне и нужен для адаптивности:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
А также проверка на главную страницу:
|
1 |
<?$bIsMainPage = $APPLICATION->GetCurPage(false) == SITE_DIR;?> |
Если у вас есть советы или замечания, жду в комментариях 🙂
UPDATE — немного D7:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();?> <?$isMainPage = $APPLICATION->GetCurPage(false) == SITE_DIR;?> <!DOCTYPE html> <html> <head> <? use Bitrix\Main\Application; use Bitrix\Main\Page\Asset; use Bitrix\Main\Localization\Loc; Loc::loadMessages(__FILE__); ?> <meta charset="utf-8"/> <title><?$APPLICATION->ShowTitle()?></title> <?$APPLICATION->ShowHead();?> <!-- partial:parts/_head.html --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- libraries --> <? Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/bower_components/jquery/dist/jquery.min.js'); Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/bower_components/tether/dist/js/tether.min.js'); Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/bower_components/bootstrap/dist/js/bootstrap.min.js'); ?> <!-- CSS стили --> <? Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/bower_components/ion.rangeSlider/css/ion.rangeSlider.css'); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/bower_components/components-font-awesome/css/font-awesome.min.css'); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/bower_components/ion.rangeSlider/css/ion.rangeSlider.skinHTML5.css'); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/bower_components/bootstrap/dist/css/bootstrap.min.css'); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/bower_components/jquery-autocompleter/jquery.autocompleter.css'); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/build/css/slick.css'); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/build/css/slick-theme.css'); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/build/css/jquery.fatNav.min.css'); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH .'/assets/build/css/main.css'); ?> </head> <body class="<?=$APPLICATION->ShowProperty('CLASS')?>"> <?$APPLICATION->ShowPanel();?> |
1. Язык в теге html
2. Исчез . Думаю его лучше оставить.
От себя:
1. Так же можно перевести на D7.
2. Лично мое мнение уже не стоит поддерживать IE 9-
Согласен с вами. ИЕ еще несколько лет назад было глупо поддерживать 🙂 Однако, такой вариант некоторые требуют даже сейчас