1С-Битрикс
3504 2

Битрикс — пример для файла header.php

Как создать правильный хедер для шаблона битрикса.

Пример для файла 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С-Битрикс, обращайтесь ко мне.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Популярные статьи:

2 комментария

  1. 1. Язык в теге html
    2. Исчез . Думаю его лучше оставить.
    От себя:
    1. Так же можно перевести на D7.
    2. Лично мое мнение уже не стоит поддерживать IE 9-

    Ответить

    1. Согласен с вами. ИЕ еще несколько лет назад было глупо поддерживать 🙂 Однако, такой вариант некоторые требуют даже сейчас

      Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *