Відео урок Створення HTML шаблону в 1С Бітрікс, це четверте відео з серії уроків «Інтеграція шаблону в систему 1С Бітрікс».

У відео ми з Вами розберемо:

• Як перенести готову верстку HTML шаблону в Бітрікс
• Підключимо скрипти та перенесемо структуру сайту в бітрікс
• Підключимо мовні файли та перевіримо, як це працює
• Розберемо найпоширеніші помилки

Створюємо шаблон через адміністративний розділ

Ми не будемо використовувати поточний шаблон з маркеплейсу, а створимо свій з нуля на прикладі того, що є зараз. Для цього перейдемо до адміністративної частини сайту, Налаштування, Налаштування продуктів, вибираємо Шаблони сайтів. Додаємо новий шаблон.

Задаємо основні налаштування шаблону, ID пропишемо "lendtv", в полі назва "Лендінг", в описі прописуємо "Наш шаблон лендінга", порядок вказуємо "1", Тип залишаємо за замовчуванням "Шаблон сайту". Спускаємось нижче.

У дане поле нам потрібно вставити код нашої HTML сторінки, який буде розділений макросом #WORK_AREA# , верхня частина у нас підемо в header.php , а нижня частина після макросу у файл footer.php .

Відкриваємо нашу сторінку верстки HTML шаблону в редакторі, виділяємо код, копіюємо та вставляємо у нашу форму. Ми з Вами домовилися, що всі робочі блоки віднесемо до header. Для цього спускаємося до закриття секції. Ставимо курсор між section і footer, тиснемо #WORK_AREA#, додався маркер.

За допомогою вставки даного маркера система Бітрікс автоматично створить файли header.php і footer.php з розміщеним у них нашим кодом. Вкладку «Стилі сайту» залишаємо порожньою, у «Стилі шаблону» копіюємо наш основний код стилів із файлу style.css і зберігаємося.

Відкриваємо PhpShtorm, переходимо в папку з нашими шаблонами і виконуємо синхронізацію, щоб відобразилися новостворені файли в нашому редакторі. Відкриваємо папку з нашим шаблоном і в ній бачимо ряд створених файлів самої системи з уже розподіленим і заповненим кодом. Нам залишається перенести додаткові файли та скрипти для необхідної роботи шаблону. Для цього просто їх копіюємо до нашої директорії шаблону.

Пропишемо код перевірки

Наприклад відкриємо наш встановлений шаблон з маркеплейсу і скопіюємо код для перевірки константи «B_PROLOG_INCLUDED» , ця константа забороняє запуск цього файлу без підключення ядра Бітрікс.

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); // Перевірка

Підключення перекладу

Підключаємо ленгівські файли, які відповідають за переклад нашого шаблону. Вставляємо цей код.

IncludeTemplateLangFile(__FILE__); //

переклад файлів

Приклад:

Підключаємо скрипти

Для того, щоб відображалися наші методи, ми використовуємо метод «ShowHead» , він виведе наші цілі дані сторінок, а також підключить скрипти з шаблону. Замінюємо на виклик методу. $APPLICATION->ShowHead();

//

підключення скриптів зі сторінки шаблону

Підключення title Наступним етапом підключаємо title за допомогою методу ShowTitle.

$APPLICATION->ShowTitle();

//

висновок title

2017 .

Підключення директорій файлів

Потім вкажемо шлях до наших файлів за допомогою константи "SITE_TEMPLATE_PATH", вона допомагає визначити директорію, де вони знаходяться.

// шлях до директорії шаблону (обов'язково поставити флеш наприкінці).

Виносимо мовну фразу

Тепер винесемо мовні файли, які підключатимемо без компонентів, тобто безпосередньо через шаблон. Для цього створимо відповідну директорію, де вони зберігатимуться. Створюємо папку lang, в ній піддиректорії ru та en.

Відкриваємо директорію ru та створюємо в ній файл, з якого виноситимемо мовні фрази, пишемо header.php . В основному шаблон дивимося, що нам потрібно винести в ленгівські файли. Візьмемо з header.php шаблону заголовки наших блоків, відкриваємо leng , формуємо масив з першою нашою фразою "В даний час ми працюємо над дивовижним проектом" з ключем "WORKING_PROJECT", а в header.php пропишемо замість фрази функцію "GetMessage" з нашим ключем "WORKING_PROJECT" .

Потім замінимо заголовок "Контакт", створюємо масив з ключем "CONTACT" і змінюємо заголовок на функцію з нашим ключем.

Додаємо фрази у footer.php

Переходимо в footer , тут можна вивести цей блок так через включну область, але для прикладу давайте винесемо ці фрази в Leng . Переходимо в директорію ru і створюємо новий файл під назвою, у якого виноситимемо фрази, пишемо footer.php . У ньому створюємо масив з нашою фразою "ДАЛЬВЕББУД" з ключем "COPY_DWS" і вставляємо функцію "GetMessage" в основний файл з нашим параметром ключа.

Копіюємо масив з файлу header, переходимо в нашу директорію en, створюємо файл header.php, вставляємо масив і вставляємо перекладені фрази.

Теж проробимо з footer, копіюємо масив, переходимо в директорію en, і створюємо файл footer.php в який вставляємо наш масив і перекладаємо фрази.

Увімкнемо шаблон у налаштуваннях сайту

Перейдемо в адміністративний розділ, Налаштування продукту, Сайти, Список сайтів, відкриваємо поточний сайт, спускаємося в низ і в Шаблонах вкажемо наш створений шаблон «Лендінг», зберігаємося.

Переходимо у візуальну частину та дивимося, що в нас вийшло.

Шаблон завантажився, але немає основної картинки. Швидше за все це пов'язано з тим, що раніше файл стилів знаходився в папку styles, але ми його перемістили на директорію вище у файл template_styles.css тим самим шлях до нього змінився, і для нормального відображення картинки нам потрібно відкоригувати даний файл.

Спускаємося нижче, бачимо, що у footer не відображається копірайт, і я це навмисно зробив, щоб показати, що часто зустрічає помилку.

Давайте це виправимо, перейдемо в наш шаблон, відкриємо template_styles.css , знаходимо код для виведення картинки, прибираємо [../] , оскільки поточний файл знаходиться в основній директорії шаблону. Збережемося, перейдемо на сайт та подивимося відображення. Бачимо, з'явилася іконка завантаження та картинка слайдера.

Оновлюємо головну сторінку, спускаємо донизу, і у нас все нормально виводиться. Давайте перевіримо англійську версію наших заголовків, для цього в налаштуваннях шаблону змінюємо мову на англійську та зберігаємося. Переходимо у візуальну частину та всі заголовки, які ми виносили окремо у leng файли змінилися.

Резюмую:

При створенні footer , якщо потрібно винести фрази в leng , не забуваємо прописати перевірку підключення ядра і підключення мовних файлів.

Якщо з основного шаблону змінюємо шлях файлу style.css , тоді змінюємо цей шлях у самому коді, оскільки щодо файлу картинки будуть в іншій директорії.

Прописуючи шлях, за допомогою константи SITE_TEMPLATE_PATH , не забувайте ставити в кінці її флеш.

На цьому урок з Установці HTML закінчую, в наступних відео будемо виводити деякі блоки в окремі області, що включаються. З програмуємо компоненти, форму і так далі.

У другій статті, присвяченій шаблонам бітрикс, ми поговоримо про управління шаблонами, опишемо процес встановлення нового шаблону, а також розповімо, як налаштувати відображення різних шаблонів для різних сторінок та розділів.

Шаблон бітрікс - це набір php-файлів, файлів стилів, зображень, а також шаблонів компонентів. Всі шаблони розташовані в папці /bitrix/templates/ і можуть застосовуватися як один шаблон до декількох сайтів, так і кілька шаблонів одного сайту. На сторінці Установки → Установки продукту → Шаблони сайтів в адміністративній панелі відображаються у списку доступних шаблонів.

Встановлення нового шаблону

Шаблон бітрікс є архів.tar.gz, що містить всі необхідні php-файли, файли стилів, скрипти і картинки. Встановити новий шаблон можна, як просто розпакувавши архів у папку /bitrix/templates/, так і скориставшись формою на сторінці Налаштування → Установки продукту → Шаблони сайтів в адміністративній панелі бітрикс. На цій сторінці необхідно натиснути кнопку Завантажити шаблон, вибрати на локальному диску архів із шаблоном та ввести символьний код шаблону.

На малюнку 1 показано список шаблонів адміністративної панелі, на малюнку 2 — форма додавання нового шаблону.

Після гаружки архіву він автоматично розпакується в папку /bitrix/templates/ і відображатиметься у списку шаблонів в адмінці.

Під час завантаження шаблону можна вибрати веб-сайт, до якого цей шаблон буде застосовуватися за промовчанням.

Застосування шаблону до поточного сайту

Після того, як шаблон завантажено та додано до системи, його можна застосувати до одного із сайтів. Для цього необхідно в адміністративній панелі на сторінці Налаштування/Налаштування продукту/Список сайтів вибрати сайт, для якого має бути застосований шаблон (на малюнку 3 показано список сайтів в адмінці).

Відкриється форма налаштування сайту. Останніми параметрами цієї форми є налаштування шаблонів сайту. Тут можна вибрати один або кілька шаблонів, які будуть використовуватись для даного сайту.

Умови застосування шаблонів

Для того, щоб в рамках одного сайту за різних умов використовувалися різні шаблони, на формі налаштування сайту можна вказати умови застосування шаблону. У системі передбачені такі типи умов: Для папки або файлу, Для груп користувачів, Період часу, Параметр URL, Вираз PHP. Розглянемо кожне з них докладніше:

Для папки або файлу— цю умову слід застосовувати, коли різні шаблони повинні застосовуватися для різних сторінок і розділів. Для того, щоб шаблон застосовувався тільки для розділу особистого кабінету користувача, як значення цієї умови слід вказати - "/personal/" - шлях до розділу від кореневої папки, в якому знаходиться розділ "Особистий кабінет". Якщо шаблон повинен відрізнятися тільки для сторінки з помилкою 404, як значення умови слід вказати — “/404.php”.

Для груп користувачів- Часте завдання, коли зовнішній вигляд сайту має відрізнятися для менеджерів та звичайних відвідувачів, вирішується за допомогою умови цього типу. Як значення властивості слід вказати групу користувачів, наприклад, "Контент-редактори". Відвідувач, авторизований як користувач із групи Контент-редактори, буде бачити інший зовнішній вигляд сайту, ніж решта відвідувачів.

Період часу— добрий приклад використання цієї умови — новорічна тема для сайту. Якщо новорічний шаблон повинен застосовуватися на сайті протягом періоду часу з 25 грудня по 10 січня, потрібно вказати цей діапазон як вигнання умови типу Період часу. Після закінчення періоду шаблон автоматично зміниться на шаблон за промовчанням.

Параметр в URL— найчастіше цей тип умови використовується для створення версії для друку або для тестування шаблону. Для створення використання шаблону друку як значення умови цього типу слід вказати “print=Y”. Для тестування нового шаблону як умову можна вказати “test=Y” — і на будь-якій сторінці, якщо переданий параметр test рівний Y використовуватиметься тестовий шаблон.

Вираз PHP- Як значення цієї умови може виступати будь-який вираз PHP, функція API Бітрікс.

Шаблони сайтів застосовуються відповідно до значення індексу сортування. Якщо для сторінки може бути використано декілька шаблонів, буде обрано той, що має більший індекс сортування. Тому уважно вказуйте сортування шаблонів — неправильне розташування індексів сортування може призвести до неприємних помилок.

Не забувайте, що “не слід множити те, що існує без необхідності”, тобто, якщо якесь завдання можна вирішити без створення додаткового шаблону, то краще додатковий шаблон не створювати. Це пов'язано з тим, що, копіюючи шаблон для внесення незначних змін, ви змушуєте себе підтримувати кілька однакових файлів, одночасно вносити правки до декількох шаблонів.

Отже, ми розглянули процес керування шаблонами: завантаження в систему нового шаблону, застосування шаблону до сайту, умови застосування різних шаблонів на сторінці. У наступних статтях ми перейдемо безпосередньо до створення власного шаблону.

В черговий раз, намагаючись знайти собі програміста, який працював із CMS 1C-Bitrix зі своїм містом, натикаюся на проблему…

Програмісти є, що працювали з різними безкоштовними фреймворками на кшталт Joomla, WordPress і т.д., але коли справа доходить до Бітрікса, всі як один кажуть: - Ой, вона платна, навіщо мені це коли є купа інших безкоштовних. І не хочуть братися за вивчення чогось нового.

Так починав і я, крім одного, мені відразу показали, як що і чому. Але матеріалу в мережі та на хабрі я так і знайшов. Тому почну з простого, як звичайного програміста, що володіє знаннями PHP і хоча б базовими HTML, CSS, JS почати працювати з Бітрікс.

Про структуру каталогів шаблону не говоритиму, про це можна почитати . Перше, із чим доводиться стикатися, це інтеграція HTML шаблону на CMS.

Допустимо, у вас є готовий HTML шаблон і вам його необхідно інтегрувати із системою. Почнемо з установки на сервер:

Заходимо на сайт Бітрікса і качаємо інсталятор;

Заливаємо bitrixsetup.php на сервер і починаємо встановлення.
Перше, що вам пропонує настановник, це вибрати редакцію:

Вибираєте потрібний вам дистрибутив (як правило, це «Управління сайтом»), якщо у вас є ключ, то вводите його, і натискаєте «Завантажити». Процес пішов…

Якщо розпакування пройшло успішно, ви бачите вітальне вікно установки

Наступне з чим стикаються програмісти-початківці це «Обов'язкові параметри системи», а саме:

Для вирішення цієї проблеми заходимо на сервер, відкриваємо файл.htaccess і знаходимо там наступні рядки

#php_value mbstring.func_overload 2 #php_value mbstring.internal_encoding UTF-8

Розкоментуємо їх. Тиснемо F5 і все працює ... Якщо все ж таки не запрацювало (а таке іноді буває), то пишіть звернення в тих. підтримку хостингу.

Наступний етап встановлення бази даних. Тут я думаю не треба розписувати. Тому йдемо далі. Якщо все добре, то ви побачите процес встановлення Бітрікса:

Дісталися вибору рішення, запропоновані Бітріксом. Тому що нам потрібна чиста система без будь-яких доповнень вибираємо «Демо-сайт для розробників»

Далі нас вітає стандартний «Майстер»

За його допомогою можна встановити демо дані. Нам це не потрібно тиснути «Скасувати».

Усе це етап установки закінчується, переходимо безпосередньо до інтеграції шаблона. Заходимо до панелі адміністрування в розділі «Налаштування». Далі спускаємося по дереву настоянок: Налаштування продукту - Шаблони сайтів, тиснемо на кнопку «Додати шаблон»

Відкривається стандартна форма створення шаблону.

Вигадуєте ID (я зазвичай використовую main), вписуєте назву шаблону. Поле «Опис» не обов'язково, воно швидше зроблено для розробників, ніж плутати шаблони, якщо їх кілька.

Ось тут почалося найцікавіше. Зазвичай шаблон HTML сторінок виглядає так:

... ... ... ... ...

Тут головне розуміти, що відноситься до шаблону, а що до контентної частини. У цьому прикладі контентна частина починається між тегом section. Тому копіюємо шаблон у полі "Зовнішній вигляд шаблону сайту". Між тегом вставляємо службову директиву #WORK_AREA# . У результаті ваш шаблон виглядатиме ось так:

... ... ... #WORK_AREA# ...

Якщо у вас є CSS, переходимо на вкладку «Стилі шаблону» і вставляємо його туди.

Далі я зазвичай редагую файли вже через FTP. Відкриваєте свій текстовий редактор (у мене Notepad++, тому писатиму на його прикладі) і заходьте на сервер. Весь шаблон Бітрікс розміщується за адресою /bitrix/templates/назва_шаблону/ , якщо у вас є картинки або додаткові файли стилів, JS скрипти і т.д., то копіюєте все в цю папку.

Переходимо до заключної частини та прописуємо всі необхідні змінні Бітрікса. Відкриваємо файл header.php та починаємо редагувати. Перше, що потрібно зробити це, підключити висновок шапки сайту:

… …

Також ми хочемо бачити панель адміністратора сайту в публічній частині сайту:

… … …

Щоб відображався заголовок сторінки, додаємо функцію у відповідний тег. У результаті ми отримуємо такий файл:

... ... ...

До речі забув сказати, якщо все-таки є додаткові файли, будь то JS, CSS, favicon і так далі, то щоб не прописувати повний довгий шлях /bitrix/…/ є спеціальна константа SITE_TEMPLATE_PATH. Її і вставляємо на потрібні місця:

…
Також ми хочемо бачити панель адміністратора сайту в публічній частині сайту:

… … …
Щоб відображався заголовок сторінки, додаємо функцію у відповідний тег. У результаті ми отримуємо такий файл:

... ... ...
До речі забув сказати, якщо все-таки є додаткові файли, будь то JS, CSS, favicon і так далі, то щоб не прописувати повний довгий шлях /bitrix/…/ є спеціальна константа SITE_TEMPLATE_PATH. Її і вставляємо на потрібні місця: