Как создать правильный хедер для шаблона битрикса.
Пример для файла header.php в 1С-Битрикс (Битрикс24?)
Без долгих вступлений, приступим к разбору кода:
<?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 взятый из интернета с комментариями. Не хватает нескольких вещей, которые можно найти на официальном видео-курсе, привожу пример:
<?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. Тег, который сейчас используется в каждом шаблоне и нужен для адаптивности:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
А также проверка на главную страницу:
<?$bIsMainPage = $APPLICATION->GetCurPage(false) == SITE_DIR;?>
Если у вас есть советы или замечания, жду в комментариях 🙂
UPDATE — немного D7:
<?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-
Согласен с вами. ИЕ еще несколько лет назад было глупо поддерживать 🙂 Однако, такой вариант некоторые требуют даже сейчас