LPF Landing Page Framework

Адаптация HTML-шаблона к LPF

В данной статье мы рассмотрим простой вариант адаптации стороннего HTML-шаблона к Landing Page Framework

Основные моменты

В Сети сейчас очень много готовых HTML-шаблонов сайтов. Как правило шаблон представляет собой набор файлов: css, js, изображений, а также index.html, содержащий всю html-разметку.

Основная задача по адаптации такого шаблона заключается в выделении контентной составляющей, та которая содержит html-разметку и основной текст, от служебной: css-стили, js-скрипты и т.п.

Landing Page Framework устроен так, что сам выполняет все необходимые подключения. Это отличается от используемого в index.html способа, где всё выполняется вручную. Поэтому прежде чем выполнять адаптацию следует предварительно проанализировать файл шаблона, и определить какие именно файлы следует отдать на «откуп» LPF.

Простой пример шаблона

Для примера рассмотрим гипотетический html-шаблон. Файловая структура может быть такой:

css/
js/
fonts/
images/

index.html

Это достаточно типовой вариант шаблона. Файл index.html будет примерно таким:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Шаблон</title>
  <meta name="description" content="">
  ... прочие meta ...

  <link href="css/template.min.css" rel="stylesheet" type="text/css">
  ... прочие link ...

  <script src="js/my.js"></script>
  ... прочие script ...

</head>
<body>
  ... контент с html-разметкой ....

  <script src="js/jquery.min.js"></script>
  ... прочие script ...
  
  <script>
  ... какой-то js-код ...
  </script>

</body>
</html>

Блок «контент с html-разметкой» должен оказаться в index.php, а всё остальное по возможности нужно сделать автоподключаемым LPF.

Шаг первый — готовим LPF

Будем считать, что у нас типовой вариант каталогов LPF. За основу возьмём страницу home.

Шаг второй — переносим контент

Копируем в index.php блок «контент с html-разметкой» из index.html.

Шаг третий — подключаем css-файлы

В LPF css-стили размещаются в каталоге assets/css. Просто скопируем в него все css-стили из каталога шаблона. Тут может быть нюанс: иногда имеет значение порядок подключения css-стилей. LPF их подключает в алфавитном порядке, поэтому добавьте к имени файла префикс «1-», «2-» и т.п. Порядок подключения можно посмотреть в секции HEAD шаблона.

Шаг четвертый — шрифты (если есть)

В LPF нет каталога для шрифтов, поэтому просто копируем каталог fonts из шаблона в каталог assets.

Шаг пятый — изображения

Аналогично поступаем и с изображениями. Как правило это каталог images. Просто копируем его из шаблона в assets/images.

На этом этапе шаблон уже должен нормально отображаться в браузере, за исключение интерактивных элементов (js мы ещё не подключили).

Шаг шестой — подключаем файлы js-скриптов

Файлы js-скриптов могут подключаться как в секции HEAD, так и в конце страницы перед закрывающим /BODY.

Кроме того, для js-скриптов часто важен порядок подключения. Поэтому js-файлы скорее всего потребуется переименовать — добавить префиксы «1-», «2-» и т.д. Самым оптимальным будет подключать файлы ровно так, как это сделано в шаблоне.

В LPF подключение js-файлов возможно в каталогах assets/js/autoload (секция HEAD) и assets/js/lazy (в конце BODY). Скопируйте js-файлы шаблона в эти каталоги, сохранив их порядок подключения.

Шаг седьмой — подключим js-код из script (если есть)

Поскольку в нашем примере js-код располагается в самом конце BODY, то такой код можно вынести в виде файлы footer.php. Создайте его и скопируйте в него код скриптов.

На этом этапе страница должна полностью соответствовать дизайну и функциональности исходного шаблона. Если что-то не работает или разваливается, то ещё раз внимательно проверьте все ли вы скопировали файлы и в правильном ли порядке. Используйте Ctrl+U в браузере, чтобы контролировать результат. Возможно в variables.php на время стоит отключить кэширование: $VAR['nocache'] = true;

Шаг восьмой — прочие подключения в HEAD

В Landing Page Framework секция HEAD формируется автоматически. Чтобы ей управлять можно использовать параметры $VAR, $META, $META_LINK в файле variables.php. Проверьте какие ещё данные требует шаблон в HEAD и укажите их в этом файле.

Если в HEAD требуется подключить какой-то другой текст, например js-код или meta-тэги, то создайте файл head.php — он будет автоматически подключён.

Если в шаблоне несколько страниц

Если в шаблоне несколько страниц, то сделайте для каждой отдельную page. Как правило в одном шаблоне используются единые css/js/images и т.п. файлы, поэтому будет достаточно адаптировать одну страница шаблона: остальные автоматом «подхватят» все подключения. Таким образом для каждой страницы потребуется лишь создать свой index.php.

Если же страница шаблона использует какие-то свои особенные файлы, то их можно разместить на уровне каталога страницы по тем же правилам. Landing Page Framework сам выполнит все подключения.

Единая «шапка» и «подвал»

Для таких задач следует вынести общие файлы каталог lpf-content/set и подключать уже на уровне страницы. Например нужно сделать общую шапку и подвал сайта. Создаём файлы в set-каталоге header.php и footer.php. В variables.php указываем:

$VAR['start_file'] = SET_DIR . 'header.php';
$VAR['end_file'] = SET_DIR . 'footer.php';

Tweet

О проекте

Landing Page Framework упрощает создание целевых страниц, избавляя вебмастера от массы рутинных операций. Фреймворк обладает мощным ядром, способным решать сложные задачи. Сайты, созданные в LPF, будут работать с очень высокой скоростью даже на слабых серверах.

Контакт