Чанки — это кусочки статического текста, которые вы можете повторно использовать на своем сайте. По функциям они похожи на файлы или «блоки» в других системах управления контентом. Типичными примерами чанков могут быть ваша контактная информация или уведомление об авторских правах. Хотя чанки не могут содержать никакой логики напрямую, они могут содержать вызовы Сниппетов, которые являются исполняемыми битами кода PHP, которые производят динамический вывод.
Создание¶
Прежде чем вы сможете использовать чанк, вы должны сначала создать и назвать его, вставив текст в менеджер MODX (Элементы —> Чанки —> Новый чанк):
Использование¶
Чтобы использовать Чанк, вы ссылаетесь на него по имени в ваших шаблонах или в содержимом вашей страницы.
[[$chunkName]]
Эта ссылка затем заменяется содержимым Чанка.
Вы также можете передать свойства в чанк. Скажем, у вас был чанк с именем intro и содержимым:
Привет,
[[+name]]. У тебя есть[[+messageCount]]сообщений.
Вы можете заполнить эти значения с:
[[$intro? &name=`George` &messageCount=`12`]]
Который будет выводить:
Привет, George. У тебя есть 12 сообщений.
Вы могли бы сделать еще один шаг, добавив Переменные шаблона что позволяет пользователю указать свое имя для каждого ресурса:
[[!$intro? &name=`[[*usersName]]` &messageCount=`[[*messageCount]]`]]
или в самом чанке:
Привет, [[*usersName]]. У тебя есть [[*messageCount]] сообщений.
Обработка чанка через API¶
Чанки также часто используются для форматирования вывода сниппетов. Чанк может быть обработан из сниппета с помощью функции process(); например, с учетом следующего чанка с именем rowTpl:
<tr class="[[+rowCls]]" id="row[[+id]]">
<td>[[+pagetitle]]</td>
<td>[[+introtext]]</td>
</tr>
следующий сниппет кода извлекает его и обрабатывает его с массивом свойств для всех опубликованных ресурсов и возвращает отформатированные результаты в виде таблицы, устанавливая класс «alt» для четных строк:
$resources = $modx->getCollection('modResource',array('published' => true));
$i = 0;
$output = '';
foreach ($resources as $resource) {
$properties = $resource->toArray();
$properties['rowCls'] = $i % 2 ? '' : 'alt';
$output .= $modx->getChunk('rowTpl',$properties);
$i++;
}
return '<table><tbody>'.$output.'</tbody></table>';
Модификация чанка через API¶
Чанками также можно манипулировать с помощью MODX API:
<?php
/* create a new chunk, give it some content and save it to the database */
$chunk = $modx->newObject('modChunk');
$chunk->set('name','NewChunkName');
$chunk->setContent('<p>This is my new chunk!</p>');
$chunk->save();
/* get an existing chunk, modify the content and save changes to the database */
$chunk = $modx->getObject('modChunk', array('name' => 'MyExistingChunk'));
if ($chunk) {
$chunk->setContent('<p>This is my existing chunks new content!</p>');
$chunk->save();
}
/* get an existing chunk and delete it from the database */
$chunk = $modx->getObject('modChunk', array('name' => 'MyObsoleteChunk'));
if ($chunk) $chunk->remove();
?>
Смотрите также¶
- modChunk
Open COllective
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$400 per month—let’s make that $500!
Learn more
В этой статье рассмотрим понятие, назначение и применение чанков в MODX Revolution. Кроме этого познакомимся с тем, как выполняется обработка и управление чанками в сниппетах через API.
Что такое чанк
Чанк — это элемент MODX, который представляет собой кусок текста или HTML-кода. Предназначен он для формирования некоторого фрагмента (куска, части) HTML-страницы. Например, чанк можно использовать для вывода раздела head HTML-документа, меню, блоков информации в основной и дополнительной области сайта, футера и многих других частей страницы.
Например, чанк (его содержимое), который используется для вывода меню сайта:
[[pdoMenu?
&parents=`0`
&level=`1`
]]
Кроме этого чанки в MODX Revolution также используются в качестве шаблонов для вывода результатов работы сниппета.
Например, чанк (tpl.Tickets.list.row), который используется в качестве шаблона сниппета getTickets:
[[!getTickets? &tpl=`tpl.Tickets.list.row`]]
Внутри чанках, как и во многих других элементах MODX Revolution (шаблонах, TV-параметрах, полях ресурса), нельзя непосредственно размещать php-код. Размещение в этих элементах динамического содержимого осуществляется посредством вызовов сниппетов, которые исполняют хранящийся внутри них PHP-код.
Совет: не храните повторяющийся код (раздел head, шапку сайта, меню, подвал, контактную информацию и др. блоки страницы) в шаблонах. Более предпочтительно всё это оформить в виде чанков, а затем использовать их в необходимых шаблонах. Это позволит сократить значительное количество времени, если потребуется внести изменения в некоторый блок. Вместо редактирования большого количества шаблонов, в данном случае потребуется всего внести изменения только в один чанк.
Где хранятся чанки
Чанки, как и остальные объекты MODX, хранятся в базе данных. Чанки содержатся в таблице modx_site_htmlsnippets (modx — это префикс таблиц, заданный во время установки системы).
Работа с чанками в админке MODX
Чанки в админке MODX Revolution расположены на левой панели во вкладке «Элементы».
Создание чанка
Создание чанка осуществляется с помощью кнопки «+». После нажатию на эту кнопку открывается страница, содержащая форму. Среди полей этой формы, основными являются имя и код чанка (html). Имя — это название, посредством которого этот чанк можно будет вызывать в шаблоне, содержимом ресурса или в другом месте. Код чанка (html) — это контент, который парсер будет выводить на месте вызова чанка.
Кроме этого система MODX позволяет хранить содержимое чанка во внешнем файле. Для этого необходимо установить галочку в поле статичный, выбрать источник файлов и указать его расположение.
Редактирование чанка
Для редактирования некоторого чанка в админке необходимо нажать на него левой кнопкой мыши. После этого откроется форма полями чанки, в которую необходимо внести изменения и нажать на кнопку «Сохранить».
Как использовать чанки в MODX
Вставка чанка в шаблон или содержимое ресурса осуществляется с помощью следующего тега MODX:
[[$chunkName]]
Во время обработки страницы, парсер MODX заменит тег чанка его содержимым.
Чанк и его параметры
Чанки в MODX могут иметь параметры. Например, рассмотрим чанк «intro», имеющий следующее содержимое:
Привет, [[+name]]. У Вас [[+messageCount]] сообщений.
Он имеет 2 плейсхолдера: [[+name]] и [[+messageCount]]. Передать значения этим плейсхолдерам можно с помощью указания соответствующих параметров вызову чанка:
[[$intro? &name=`Роман` &messageCount=`7`]]
В результате, получим следующее содержимое:
Привет, Роман. У Вас 7 сообщений.
Если пойти немного дальше, то можно, например, создать TV-параметры name и messageCount, и добавить их (эти переменные) к соответствующему шаблону. После этого у каждого ресурса, имеющего этот шаблон, появятся эти TV-параметры. Значения этих TV-параметров можно использовать в качестве значений параметров чанка:
[[!$intro?
&name=`[[*name]]`
&messageCount=`[[*messageCount]]`
]]
или в содержимом чанка:
Привет, [[*name]]. У Вас [[*messageCount]] сообщений.
Условия в чанках
Условия и другие фильтры MODX можно использовать в любых специальных тегах этой системы.
Например, внутри чанка в зависимости от идентификатора родителя текущего ресурса вывести один или другой чанк.
[[*parent:is=`10`:then=` [[$chunk1]] `:else=` [[$chunk2]] `]]
Но с фильтрами в MODX надо быть очень осторожными, т.к. они могут сильно увеличить время генерации страницы. Это происходит потому, что условия в тегах MODX работают не так как обычные условия в php. Например, в вышеприведённом примере оба чанка вызовутся, не зависимого от того какой идентификатор имеет родитель текущего ресурса. А уже только потом будет определяться какой из этих чанков будет выведен на страницу. Поэтому в MODX они и называются фильтрами. А теперь давайте представим, что в этих чанках есть вызовы некэшируемых сниппетов. В результате в не зависимости от идентификатора родителя текущего ресурса эти вызовы будут выполняться как в первом, так и во втором чанке. Это может привести к значительному увеличению времени генерации страницы и нагрузке на сервер. В таких случаях лучше фильтры не использовать, а выполнять эти действия с помощью сниппета.
<?php
$output = 'chunk2';
if ($modx->resource->parent==10) {
$output = 'chunk1';
}
return $modx->getChunk($output);
Обработка чанка с помощью API
Чанки часто выступают в качестве шаблонов для вывода результатов работы сниппета. Обрабатывается чанк в сниппете через функцию getChunk().
Например, рассмотрим, как использовать чанк «rowTpl» в сниппете.
Чанк «rowTpl», имеет следующее содержимое:
<tr class="[[+rowCls]]" id="row[[+id]]"> <td>[[+pagetitle]]</td> <td>[[+introtext]]</td> </tr>
Содержимое (php-код) сниппета, который получает все опубликованные ресурсы на сайте и выводит их в таблицу. Для вывода данных отдельного ресурса (одной строки таблицы, состоящей из 2 ячеек) используется шаблон rowTpl.
// получить массив (коллекцию) опубликованных ресурсов
$resources = $modx‐>getCollection('modResource',array('published' => true));
// переменная-счётчик
$i = 0;
// переменная, хранящая результат
$output = '';
// перебрать все ресурсы
foreach ($resources as $resource) {
// создать ассоциативный PHP массив из полей ресурса
$properties = $resource‐>toArray();
// установить ключу rowCls ассоциативного массива $properties значение alt, если ресурс чётный
$properties['rowCls'] = $i % 2 ? '' : 'alt';
// получить содержимое чанка rowTpl, передав в него массив полей ресурса в качестве параметров
$output .= $modx‐>getChunk('rowTpl',$properties);
// увеличить значение переменной на 1
$i++;
}
// вернуть в качестве результата таблицу опубликованных ресурсов
return '<table><tbody>'.$output.'</tbody></table>';
Управление чанком через API
Управлять чанками в MODX можно через API:
<?php
/* 1. Создать новый чанк, наполнить его контентом. Сохранить этот чанк в базу данных. */
// 1.1. Создать новый чанк
$chunk = $modx‐>newObject('modChunk');
// 1.2. Установить этому новому чанку имя NewChunkName
$chunk‐>set('name','NewChunkName');
// 1.3. Установить этому чанку контент
$chunk‐>setContent('<p>Это мой новый чанк!</p>');
// 1.4. Сохранить этот чанк в базу данных
$chunk‐>save();
/* 2. Получить существующий чанк, изменить содержимое этого чанка. Сохранить изменения в базу данных */
// 2.1. Получить чанк, имеющий имя NewChunkName
$chunk = $modx‐>getObject('modChunk', array('name' => 'NewChunkName'));
// 2.2. Если чанк с таким именем существует, то...
if ($chunk) {
// 2.3. Установить ему следующий контент
$chunk‐>setContent('<p>Это мой чанк, но уже с новым контентом!</p>');
// 2.4. Сохранить изменения
$chunk‐>save();
}
/* 3. Получить существующий чанк и удалить его из базы данных */
// 3.1. Получить чанк, имеющий имя NewChunkName
$chunk = $modx‐>getObject('modChunk', array('name' => 'NewChunkName'));
// 3.2. Если чанк с таким именем существует, то удалить его.
if ($chunk) $chunk‐>remove();
Оглавление
Чанки — это кусочки статического текста, которые вы можете повторно использовать на своем сайте. Хотя чанки не могут содержать никакой логики напрямую, тем не менее, они могут содержать вызовы сниппетов, которые представляют собой исполняемый PHP код, который в свою очередь производит динамический вывод данных.
Создание чанка
Прежде чем использовать чанк, вы должны сначала создать его и дать ему имя. Перейдите во вкладку дерева «Элементы», выберите «Чанки», затем «Новый чанк» или «Быстро создать чанк».
Использование чанка
Для использования чанка, вам необходимо обратиться к нему по его имени:
[[$chunkName]]Этот плейсхолдер заменится содержимым чанка.
Вы также можете передать свойства в чанк. Скажем, у вас был фрагмент с именем intro и содержимым:
Привет, [[+name]]. У вас [[+messageCount]] непрочитанных сообщений.Вы можете заполнить эти значения следующим образом:
[[$intro? &name=`Аркашка` &messageCount=`7`]]В итоге вы увидите следующий вывод:
Привет, Аркашка. У тебя 7 непрочитанных сообщений.Обработка чанка через API MODx
Чанки также часто используются для форматирования вывода сниппетов. Чанк может быть обработан из сниппета с помощью функции process(); . В качестве примера возьмем чанк со содержимым ниже и именем rowTpl:
<tr class="[[+rowCls]]" id="row[[+id]]">
<td>[[+pagetitle]]</td>
<td>[[+introtext]]</td>
</tr>Сниппет ниже, извлекает содержимое чанка и обрабатывает его с массивом свойств для всех опубликованных ресурсов и возвращает отформатированные результаты в виде таблицы, устанавливая класс «alt» для четных строк:
<?php
$resources = $modx->getCollection('modResource', array('published' => true));
$i = 0;
$output = '';
foreach ($resources as $resource) {
$properties = $resource->toArray();
$properties['rowCls'] = $i % 2 ? '' : 'alt';
$output .= $modx->getChunk('rowTpl', $properties);
$i++;
}
return '<table><tbody>' . $output . '</tbody></table>';Модификация чанка через API MODx
Чанками также можно управлять с помощью API MODx:
<?php
/* Создаем новый чанк, заполняет небольшим контентом и сохраняем в базу данных */
$chunk = $modx->newObject('modChunk');
$chunk->set('name','NewChunkName');
$chunk->setContent('<p>Это мой новый чанк!</p>');
$chunk->save();
/* Получаем существующий чанк по его имени, меняет контент и сохраняем в базу данных */
$chunk = $modx->getObject('modChunk', array('name' => 'MyExistingChunk'));
if ($chunk) {
$chunk->setContent('<p>Это уже существующий чанк с новым контентом!</p>');
$chunk->save();
}
/* Получаем существующий чанк по его имени и удаляем его из базы данных */
$chunk = $modx->getObject('modChunk', array('name' => 'MyObsoleteChunk'));
if ($chunk) $chunk->remove();
Время работы: 0,1472 s
Время запросов: 0,1472 s
Количество запросов: 26
Источник: cache
Изучаем потоки, чанки и ищем конец
Время на прочтение
1 мин
Количество просмотров 11K
Примечание: ниже перевод статьи «On Streaming, Chunking, and Finding the End», в которой авторы рассматривают процесс передачи информации по HTTP-соединению и возможности для ускорения этого процесса. Мои комментарии далее курсивом.
Два способа передачи
Как и в большинстве механизмов передачи данных, в HTTP существует два основных способа отправить сообщение: «все и сразу» или «по частям». Другими словами, в HTTP есть возможность отправлять данные до тех пор, пока еще есть хотя бы что-то, что можно отправить, либо отправить все данные как одну логическую единицу, указав предварительно ее размер.
Если вы занимаетесь веб-разработками достаточно продолжительное время, скорее всего, вы уже знаете, как работает сброс буфера (flush) на стороне сервера. Этот метод позволяет начать отправку части данных пользователю, в то время как скрипт может продолжать выполнять некоторые, достаточно медленные, действия (скажем, ресурсоемкий запрос к базе данных). Если вы уже применяли эту возможность, тогда вы, вероятно, использовали преимущества потокового (streaming) механизма, хотя могли и не знать всех деталей работы HTTP-протокола.
читать дальше на webo.in →
Всем привет. В прошлом уроке мы научились устанавливать систему управления сайтом Modx Revolution. В этом уроке мы найчимся внедрять или устанавливать шаблон в эту систему. Также я приведу список необходимых дополнений, которые нам понадобятся для создания сайта на Modx Revolution.
Для начала установим нужные дополнения. Если вы забыли как устанавливать пакеты из репозитория, напомню. Заходим в Пакеты/Установщик
Нажимаем «Загрузить пакет»
И вбиваем в поиск нужный нам пакет
Вот список дополнений, которые, на мой взгляд, необходимы для работы с шаблоном и нормального функционирования простого многостраничного сайта:
Ace — редактор HTML/CSS/PHP/JavaScript кода для удобной работы над чанками, сниппетами, плагинами и шаблонами страниц (что это такое мы узнаем ниже).
AjaxManager — плагин для быстрой работы админки на технологии ajax (без перезагрузки страницы)
Все эти дополнения вам нужно установить из официального репозитория, инструкцию как пользоваться к которому я привел выше. И два дополнения нужно установить из репозитория modstore.pro. Но для начала нужно создать нового поставщика пакетов.
Как подключиться к репозиторию modstore.pro
1. Переходим на сайт https://modstore.pro/
2. Регистрируемся
Вводим email, пароль, имя. Жмём «Регистриция». На почту придёт письмо с ссылкой для подтверждения регистрации и паролем. Переходим по ссылке, входим в аккаунт.
3. Кликаем по своему имени и заходим в раздел «Ключи для сайтов»
кликаем «Создать ключ»
откроется такое окно
если требуется, пишем описание ключа, например «для тестового сайта». Нажимаем «Сохранить». Ключ создан.
Копируем сам ключ и идём в админку Modx Revolution
4. Заходим в Пакеты/Установщик и кликаем на «Поставщики»
Жмём «Добавить нового поставщика»
Название — modstore.pro
Url поставищка — https://modstore.pro/extras/
Имя пользователя — ваша электронная почта, при помощи которой вы авторизуетесь на этом сайте.
Ключ API — ваш сгенерированный ключ доступа, который вы только что скопировали.
Описание — необязательное поле.
Жмем «Сохранить». Если вы всё правильно заполнили, то появится новый поставщик
Теперь мы можем установить еще два дополнения, которые в любом случае нам понадобятся. Этот репозиторий нам понадобится еще ни раз. Заходим в Пакеты/Установщик, кликаем на иконку открытия кнопки «Загрузить пакеты»
Выбираем «Выберите поставщика»
Выбираем поставщика modstore.pro
и теперь в том же окне поиска ищем и устанавливаем следующие дополнения:
TinyMCE Rich Text Editor — это текстовый редактор, с помощью которого мы будем форматировать текст на страницах
AdminPanel — панель внизу сайта, которая видна только администратору сайта для редактирования текущей страницы
Итого в нашем менеджере пакетов должно быть 5 дополнений
1. Перенос всех файлов сайта на хостинг
Заходим в наш FTP-клиент (в моём случае это Coda2) и подключаемся к нашему сайту
нам нужно перекачать папки css, fonts, img и js из папки assets из папки сайта на компьютере в папку assets на сервере. Я это делаю просто зажатием и перетаскиванием всех папок в другое окно.
Дожидаемся успешного переноса.
2. Создание шаблона «Главная страница»
Идём в «Элементы»/ Начальный шаблон. Переименовываем его в «Главная страница». Копируем содержимое файла index.html и заменяем содержимое в «Код шаблона (HTML)»
То, что у нас подсвечивается код — это заслуга пакета Ace, который мы установили ранее. Сохраняем шаблон. Я вам предлагаю посмотреть результат. Кликните на Содержимое/Перейти на сайт
И о Боги…Вот он наш сайт
Кстати, если вы кликните по «Редактировать текущую страницу», то попадёте в админку на редактирование главной страницы. Это в работе дополнение «AdminPanel».
Мы уже видим резуальтат на лицо. Правда, на этом работа над сайтом только начинается. Самое время познакомиться со следующими понятиями.
Что же такое чанки, шаблоны, ресурсы, tv-параметры, сниппеты и плагины
Чанки — это блоки кода, которые используются в разных шаблонах. Они нужны для того, чтобы не писать каждый раз один и тот же код в каждом шаблоне
Например, у нас будет блок head, отвечающий за подключение стилей, скриптов и прочего, который будет присутствовать на каждой странице, на каждом шаблоне
Шаблоны — это целые HTML страницы, которые присваиваются к определенным ресурсам. Они нужны для того, чтобы не копировать один и тот же код целой HTML страницы для множества ресурсов.
Например, у нас будут несколько страниц Услуг, у которых будет один и тот же Шаблон «Услуги»
Ресурсы — это страницы нашего сайта: Главная страница, О компании, Главная услуг, множество страниц Услуг, Контакты и так далее
TV-параметры — это поля, в которые мы будем загружать определенную информацию: изображения, заголовки, текст и прочее.
Например, у нас будет tv-параметр img, который будет отвечать за загрузку изображений на страницу.
Сниппеты и плагины — это php код, с помощью которого мы будем делать навигацию, форму обратной связи, выводить статьи в ленте новостей и прочее.
В теории может быть не всё понятно, предлагаю перейти к практике.
Создание чанков
HTML код в шаблоне «Главная страница» очень объемный, его необходимо разбить на чанки. Тем более, что такие блоки, как «шапка сайта» (header) и «подвал» (footer) нам понадобятся и на других страницах.
Начнём с чанка подключения стилей и скриптов. Перейдите в Элементы и нажмите на плюсик возле слова «Чанки»
Чанк head
Назовём чанк head и скопируем в Код чанка следующий код:
<base href="[[!++site_url]]" />
<meta charset="[[++modx_charset]]">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>[[*pagetitle]] - [[++site_name]]</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<!-- CSS
========================= -->
<!--bootstrap min css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!--owl carousel min css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!--slick min css-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--magnific popup min css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--font awesome css-->
<link rel="stylesheet" href="assets/css/font.awesome.css">
<!--animate css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--jquery ui min css-->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css">
<!--slinky menu css-->
<link rel="stylesheet" href="assets/css/slinky.menu.css">
<!--plugins css-->
<link rel="stylesheet" href="assets/css/plugins.css"><!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/custom.css"><!--modernizr min js here-->
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
Это модифицированный код из нашего HTML шаблона, куда я добавил:
<base href="[[!++site_url]]" /> - это настройка базового url для нормальной работы сайта.
<meta charset="[[++modx_charset]]"> - правильная кодировка сервера
<title>[[*pagetitle]] - [[++site_name]]</title> - в title будет подставляться Заголовок страницы и Название сайта
Теперь идём обратно в Шаблон Главной страницы и вместо
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Lukani – Plant and Flower Shop eCommerce HTML Template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico"><!-- CSS
========================= -->
<!--bootstrap min css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!--owl carousel min css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!--slick min css-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--magnific popup min css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--font awesome css-->
<link rel="stylesheet" href="assets/css/font.awesome.css">
<!--animate css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--jquery ui min css-->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css">
<!--slinky menu css-->
<link rel="stylesheet" href="assets/css/slinky.menu.css">
<!--plugins css-->
<link rel="stylesheet" href="assets/css/plugins.css"><!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/custom.css"><!--modernizr min js here-->
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
вставляем
[[$head]]
Это и есть вызов чанка в шаблоне. Тоже самое проделываем с другими блоками (чанками), которые будут присутствовать и в других шаблонах
Чанк menu_mobile
Вырезаем
<!--offcanvas menu area start-->
<div class="off_canvars_overlay"></div>
<div class="offcanvas_menu">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="canvas_open">
<a href="javascript:void(0)"><i class="icon-menu"></i></a>
</div>
<div class="offcanvas_menu_wrapper">
<div class="canvas_close">
<a href="javascript:void(0)"><i class="icon-x"></i></a>
</div><div class="call-support">
<p>Телефон для справок: <a href="tel:89999999999">89999999999</a></p>
</div>
<div id="menu" class="text-left ">
<ul class="offcanvas_main_menu">
<li class="menu-item-has-children">
<a href="index.html"> Главная</a>
</li>
<li class="menu-item-has-children active">
<a href="services.html">Услуги</a>
<ul class="sub-menu">
<li><a href="service.html">Услуга 1</a></li>
<li><a href="service.html">Услуга 2</a></li>
</ul>
</li>
<li class="menu-item-has-children active">
<a href="about.html">О компании</a>
<ul class="sub-menu">
<li><a href="faq.html">Вопрос-ответ</a></li>
<li><a href="404.html">404 ошибка</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="contact.html"> Контакты</a>
</li>
</ul>
</div><div class="offcanvas_footer">
<span><a href="#"><i class="fa fa-envelope-o"></i> demo@example.com</a></span>
<ul>
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-vk"></i></a></li>
<li class="pinterest"><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--offcanvas menu area end-->
и копируем этот код в новосозданный чанк menu_mobile. А за место него вставлем конструкцию
[[$menu_mobile]]
Чанк header
Вырезаем код
<header>
<div class="main_header header_3 header_transparent sticky-header">
<div class="header_container">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-2 col-md-3 col-4">
<div class="logo">
<a href="index.html"><img src="assets/img/logo/logo.png" alt=""></a>
</div>
</div>
<div class="col-lg-6">
<!--main menu start-->
<div class="main_menu menu_three menu_position">
<nav>
<ul>
<li><a class="active" href="index.html">главная</a></li>
<li><a href="#">Услуги <i class="fa fa-angle-down"></i></a>
<ul class="sub_menu pages">
<li><a href="service.html">Услуга</a></li>
</ul>
</li>
<li><a href="#">О компании <i class="fa fa-angle-down"></i></a>
<ul class="sub_menu pages">
<li><a href="faq.html">Вопрос-ответ</a></li>
<li><a href="404.html">404 ошибка</a></li>
</ul>
</li>
<li><a href="contact.html"> Контакты</a></li>
</ul>
</nav>
</div>
<!--main menu end-->
</div><div class="col-lg-4 col-md-6 col-sm-5 col-6">
<div class="header_right_info header_right_two">
<div class="search_container">
<form action="#">
<div class="search_box">
<input placeholder="Поиск по сайту..." type="text">
<button type="submit"><i class="icon-search"></i></button>
</div>
</form>
</div>
<p><i class="icon-phone"></i> 8999 <span class="tel_big">999999</span></p></div>
</div>
</div>
</div>
</div>
</div></header>
<!--header area end-->
И вставляем его в новосозданный чанк header. А вместо него на главной пишем
[[$header]]
Чанк scripts
Идём вниз Шаблона Главная страница, находим
<!-- JS
============================================ -->
<!--jquery min js-->
<script src="assets/js/vendor/jquery-3.4.1.min.js"></script>
<!--popper min js-->
<script src="assets/js/popper.js"></script>
<!--bootstrap min js-->
<script src="assets/js/bootstrap.min.js"></script>
<!--owl carousel min js-->
<script src="assets/js/owl.carousel.min.js"></script>
<!--slick min js-->
<script src="assets/js/slick.min.js"></script>
<!--magnific popup min js-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--counterup min js-->
<script src="assets/js/jquery.counterup.min.js"></script>
<!--jquery countdown min js-->
<script src="assets/js/jquery.countdown.js"></script>
<!--jquery ui min js-->
<script src="assets/js/jquery.ui.js"></script>
<!--jquery elevatezoom min js-->
<script src="assets/js/jquery.elevatezoom.js"></script>
<!--isotope packaged min js-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--slinky menu js-->
<script src="assets/js/slinky.menu.js"></script>
<!-- Plugins JS -->
<script src="assets/js/plugins.js"></script><!-- Main JS -->
<script src="assets/js/main.js"></script>
Вырезаем, пишем вместо этого
[[$scripts]]
Сохраняем, создаём новый чанк scripts и вставляем туда этот код.
Чанк footer
<!--footer area start-->
<footer class="footer_widgets">
<div class="footer_top">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="widgets_container contact_us">
<h3>Opening Time</h3>
<p><span>Mon - Fri:</span> 8AM - 10PM</p>
<p><span>Sat:</span> 9AM-8PM</p>
<p><span>Suns:</span> 14hPM-18hPM</p>
<p><b>We Work All The Holidays</b></p>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<div class="widgets_container widget_menu">
<h3>Information</h3>
<div class="footer_menu">
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faq.html">Frequently Questions</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-5">
<div class="widgets_container widget_app">
<div class="footer_logo">
<a href="index.html"><img src="assets/img/logo/logo.png" alt=""></a>
</div>
<div class="footer_widgetnav_menu">
<ul>
<li><a href="#">Payment</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Internet</a></li>
</ul>
</div>
<div class="footer_social">
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="footer_app">
<ul>
<li><a href="#"><img src="assets/img/icon/icon-app.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/img/icon/icon1-app.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="widgets_container widget_menu">
<h3>My Account</h3>
<div class="footer_menu">
<ul>
<li><a href="my-account.html">My Account</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="cart.html">Shopping cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="#">Order History</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="widgets_container widget_menu">
<h3>Customer Service</h3>
<div class="footer_menu">
<ul>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="contact.html">Site Map</a></li>
<li><a href="my-account.html">My Account</a></li>
<li><a href="#">Returns</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div><div class="footer_bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="copyright_area">
<p class="copyright-text">© 2021 <a href="index.html">Lukani</a>. Made with <i
class="fa fa-heart text-danger"></i> by <a href="https://hasthemes.com/"
target="_blank">HasThemes</a> </p></div>
</div>
<div class="col-lg-6 col-md-6">
<div class="footer_payment">
<a href="#"><img src="assets/img/icon/payment.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--footer area end-->
Чанк newsletter
<!--newsletter area start-->
<div class="newsletter_area_start newsletter_two">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section_title">
<h2>Get <span>20% Off</span> Your Next Order</h2>
</div>
<div class="newsletter_container">
<div class="subscribe_form">
<form id="mc-form" class="mc-form footer-newsletter">
<input id="mc-email" type="email" autocomplete="off" placeholder="Enter you email" />
<button id="mc-submit">Subscribe</button>
<div class="email_icon">
<i class="icon-mail"></i>
</div>
</form>
<!-- mailchimp-alerts Start -->
<div class="mailchimp-alerts text-centre">
<div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
<div class="mailchimp-success"></div><!-- mailchimp-success end -->
<div class="mailchimp-error"></div><!-- mailchimp-error end -->
</div><!-- mailchimp-alerts end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--newsletter area end-->
Чанк main_content
А в чанк main_content «складываем» всё остальное (код не буду приводить, слишком большой, думаю, и так понятно)
В итоге у нас должен получиться вот такой Шаблон «Главная страница»
<!doctype html>
<html class="no-js" lang="en"><head>
[[$head]]
</head><body>
<!--header area start-->
[[$menu_mobile]]
[[$header]][[$main_content]]
[[$newsletter]]
[[$footer]]
[[$scripts]]
</body>
</html>
Согласитесь, с таким кодом уже удобнее и приятнее работать. И если мы захотим изменить что-то, например в мобильном меню, то нам надо будет зайти в чанк menu_mobile и все изменения сохранятся на всех остальных шаблонах, которые мы создадим в следующем уроке.