Инструкция по работе с HTML-модулем ant123_contact
1. Начало работы:
Прежде всего, у Вас уже должна быть распакована обертка шаблона. Данный модуль будет интегрироваться Вами вручную.
Корректная работа модуля подразумевает, что все пункты данной инструкции будут выполнены в строгом порядке.
Также подразумевается, что Вы владеете базовыми навыками HTML и CSS - на уровне копирования разметки и стилей, т. п.
Важно! Подключаемые стили и скрипты не должны повторяться в основном шаблоне!
Для комфортной работы с модулем рекомендуем использовать редактор Visual Studio Code.
1.1 Структура модуля
Модуль имеет следующую структуру файлов и папок:
-
css - стили модуля;
- ant123_contact.css - стили, относящиеся только к модулю;
- bootstrap.min.css - стили Bootstrap;
- style.css - стили общего шаблона.
- img - медиа модуля;
- php - скрипт отправки почты;
-
js - скрипты модуля;
- ant123_contact.js - JS-скрипты, относящиеся только к модулю;
- bootstrap.min.js - скрипты Bootstrap;
- jquery.js - библиотека jQuery;
- jquery-migrate.min.js - необходимые компоненты jQuery.
- index.html - базовое представление модуля;
- full.html - представление модуля рядом с другими секциями сайта;
1.2 С чем будем работать
Нам потребуются только те элементы, которые касаются конкретно самого модуля. То есть, следующие файлы мы НЕ трогаем:
- ./css/bootstrap.min.css
- ./css/style.css
- ./js/bootstrap.min.js
- ./js/jquery.js
- ./js/jquery-migrate.min.js
Данные файлы уже включены в основной шаблон и здесь приведены в качестве коробки.
Если Вы еще не скачали обертку шаблона, то самое время сделать это прямо сейчас!
Откройте скачанный архив обертки шаблона. Обертка шаблона представляется в двух вариантах:
- clear template - полностью чистая обертка. Начните добавлять модули с нуля.
- default template - шаблон, в который уже включены модули по умолчанию. Глядя на этот пример, вы сможете добавлять модули, как по образцу.
В архиве обертки шаблона Вы также найдете подробное руководство, которое рекомендуется к прочтению.
Итак, предположим, что мы выбрали вариант default template. В нем уже присутствуют стандартные модули. Они отлично подходят для того, чтобы разобраться, как подключать модули.
1.2 Подключение модулей в шаблон
Все, что требуется - это просто копирование нескольких файлов и кода разметки.
- Скопируйте файл ant123_contact/css/ant123_contact.css в default template/css
- Скопируйте файл ant123_contact/php/ant123_contact.php в default template/php
- Скопируйте файл ant123_contact/js/ant123_contact.js в default template/js
- Откройте файл ant123_contact/index.html в редакторе VS Code, выделите и скопируйте строки с 33 по 109, т.е., содержимое тега main
-
Откройте HTML-файл шаблона в редакторе VS Code, где необходимо использовать модуль, в данном случае это default template/index.html и вставьте скопированную разметку внутрь тега main:
-
В этом же файле, в теге head, подключите стили модуля:
-
В этом же файле, перед закрытие тега body, подключите скрипты модуля:
- Готово! Модуль подключен к Вашему шаблону.
- Основные цвета модуля: #1089ff и #23374d. Откройте файл css/ant123_contact.css и замените их на свои.
- Изменить адрес для получения почты можно в файле ./php/ant123_contact.php.
Важно! Подключаемые стили и скрипты не должны повторяться в основном шаблоне!
Модуль должен отображаться точно так же, как Вы это видите в онлайн-конструкторе.
Если Вы обнаружили ошибки или недоработки в шаблоне и его модулях, обращайтесь в нашу техническую поддержку.