Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам - УРОК 2


В рамках данного урока мы перенесём часть статического контента шаблона во включаемые области для того, чтобы его было проще редактировать.

Существует 3 вида включаемых областей:

  • Для страницы (применяется для конкретной страницы)
  • Для раздела (применяется для конкретного раздела и наследуется, если в дочернем разделе нет своего файла включаемой области)
  • Из файла (содержимое берётся из конкретного файла и потому всегда статично)

В нашем шаблоне легко заметить несколько объектов, которые можно реализовать на включаемых областях последнего 3 типа, это: логотип, слоган, телефон и e-mail, а так же подпись\копирайт внизу сайта, а так же кнопки социальных сервисов:

области шаблона для выноса во включаемые области

области шаблона для выноса во включаемые области

В дальнейшем мы так же будем использовать другие виды включаемых областей (в основном для размещения в них компонентов и вывода динамического контента "по необходимости").

 

Все статические включаемые области мы будем хранить в одном месте - в шаблоне. Для этого создадим там папку /include/ и будем размещать файлы всех включаемых областей в ней.


Пример создания включаемой области (логотип)

В папке /include/ создадим файл logo.php содержимое которого и будет нашей включаемой область.

Перенесём внутрь файла из шаблона:

<img src="<?=SITE_TEMPLATE_PATH?>/img/logo.png" alt="">

В шаблоне же на это место поставим:

<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "file",
"PATH" => SITE_TEMPLATE_PATH."/include/logo.php",
"EDIT_TEMPLATE" => ""
),
false
);?>

 

Полный список включаемых областей, созданных в рамках данного урока:

  • E-mail.php
  • copyright.php
  • logo.php
  • phone.php
  • slogan.php
  • social-icons.php

 

Это простой и короткий урок.

Однако очень важно научиться грамотно использовать включаемые области. Никогда не используйте include функции PHP для подключения текстовых областей - для этого существуют включаемый области! Только при таком подходе редактор будет иметь возможность внести правку в контент прямо из публичного раздела:

редактирование включаемой области из публичной части сайта

Результаты работы данного урока вы можете скачать из репозитория на GitHub.


Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам - УРОК 2

<p style="text-align: justify;">В рамках данного урока мы перенесём часть статического контента шаблона во включаемые области для того, чтобы его было проще редактировать.</p> <p style="text-align: justify;">Существует 3 вида включаемых областей:</p> <p> </p> <ul> <li style="text-align: justify;">Для страницы (применяется для конкретной страницы)</li> <li style="text-align: justify;">Для раздела (применяется для конкретного раздела и наследуется, если в дочернем разделе нет своего файла включаемой области)</li> <li style="text-align: justify;">Из файла (содержимое берётся из конкретного файла и потому всегда статично)</li> </ul> <p style="text-align: justify;">В нашем шаблоне легко заметить несколько объектов, которые можно реализовать на включаемых областях последнего 3 типа, это: логотип, слоган, телефон и e-mail, а так же подпись\копирайт внизу сайта, а так же кнопки социальных сервисов: </p> <p> <img src="/upload/medialibrary/d3d/d3db2df2c7aa8a999ebf2d062432d49c.png" title="области шаблона для выноса во включаемые области" hspace="5" vspace="5" border="0" alt="области шаблона для выноса во включаемые области" width="700" height="208" /> </p> <p><img src="/upload/medialibrary/7bb/7bbba17f5a9379e1897f92c202c65b1a.png" title="области шаблона для выноса во включаемые области" hspace="5" vspace="5" border="0" alt="области шаблона для выноса во включаемые области" width="700" height="140" /></p> <p style="text-align: justify;">В дальнейшем мы так же будем использовать другие виды включаемых областей (в основном для размещения в них компонентов и вывода динамического контента &quot;по необходимости&quot;).</p> <p> </p> <p style="text-align: justify;">Все статические включаемые области мы будем хранить в одном месте - в шаблоне. Для этого создадим там папку /include/ и будем размещать файлы всех включаемых областей в ней.</p> <p> <br /> </p> <h2>Пример создания включаемой области (логотип)</h2> <p style="text-align: justify;">В папке /include/ создадим файл logo.php содержимое которого и будет нашей включаемой область.</p> <p style="text-align: justify;">Перенесём внутрь файла из шаблона:</p> <table border="1" cellpadding="1" cellspacing="1"> <tbody> <tr><td>&lt;img src=&quot;&lt;?=SITE_TEMPLATE_PATH?&gt;/img/logo.png&quot; alt=&quot;&quot;&gt;</td></tr> </tbody> </table> <p style="text-align: justify;">В шаблоне же на это место поставим:</p> <table border="1" cellpadding="1" cellspacing="1"> <tbody> <tr><td>&lt;?$APPLICATION-&gt;IncludeComponent( <br /> &quot;bitrix:main.include&quot;, <br /> &quot;&quot;, <br /> Array( <br /> &quot;AREA_FILE_SHOW&quot; =&gt; &quot;file&quot;, <br /> &quot;PATH&quot; =&gt; SITE_TEMPLATE_PATH.&quot;/include/logo.php&quot;, <br /> &quot;EDIT_TEMPLATE&quot; =&gt; &quot;&quot; <br /> ), <br /> false <br /> );?&gt;</td></tr> </tbody> </table> <p> </p> <p style="text-align: justify;">Полный список включаемых областей, созданных в рамках данного урока:</p> <div> <ul> <li style="text-align: justify;">E-mail.php</li> <li style="text-align: justify;">copyright.php</li> <li style="text-align: justify;">logo.php</li> <li style="text-align: justify;">phone.php</li> <li style="text-align: justify;">slogan.php</li> <li style="text-align: justify;">social-icons.php</li> </ul> </div> <p>   </p> <p>Это простой и короткий урок.</p> <p>Однако очень важно научиться грамотно использовать включаемые области. Никогда не используйте include функции PHP для подключения текстовых областей - для этого существуют включаемый области! Только при таком подходе редактор будет иметь возможность внести правку в контент прямо из публичного раздела:</p> <p><img src="/upload/medialibrary/c45/c452d670e6c76e98d4bfafb4af7fd9ca.png" title="редактирование включаемой области из публичной части сайта" hspace="5" vspace="5" border="0" alt="редактирование включаемой области из публичной части сайта" width="700" height="400" /></p> <p>Результаты работы данного урока вы можете скачать из репозитория <noindex><a href="https://github.com/lexnekr/bitrixtemplate_stylish/tree/15b706fc0275a29fa1a9a1dc563232792542825b" target="_blank" rel="nofollow" >на GitHub</a></noindex>.</p> <div style="text-align: right;"><a href="http://plus.google.com/+АлексейЗадойный?rel=author" target="_blank">Задойный А.В.</a></div>

Возврат к списку

Яндекс.Метрика