Пятнадцатый урок. Landing Page Framework

Эта часть курса будет содержать много теоретической информации. Я постарался оставить только минимальный базис, который вам потребуется в работе. Некоторые уроки достаточно сложны. Постарайтесь не пропускать выполнение домашних заданий: уроки построены так, что требуют их полного выполнения.

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

LPF универсальный инстумент, с помощью которого мы будем заниматься вертской, а не сопутствующими работами, вроде подключения файлов. Кроме того под капотом LPF множество дополнительных функций, специально расчитанными для верстальщика. Например есть генератор случайного текста Lorem ipsum или генератор заглушки картинок (holder). Мы расмотрим многие из них.

Для того, чтобы создать интерактивный сайт, потребуется использовать PHP. И здесь LPF также предлагает множество готовых решений.

Ну и самое главное это то, что LPF прост в использовании.

Основную информацию (для ознакомления) вы найдёте на сайте фреймворка, поэтому здесь я её дублировать не буду. От вас потребуется его скачать и установить на свой localhost в любой подкаталог или даже в корень.

LPF берёт на себя организацию страниц сайта. Сами страницы располагаются в lpf-content/pages каждая в своем каталоге. По умолчанию для главной используются страница home — ей соответствует адрес сайта и 404 — если страница не найдена. Страница lpf-admin — админ-панель, пока она нам не нужна (или разберитесь с ней самостоятельно).

Откройте в тектовом редакторе index.php из каталога home. Будет вот такой код:

<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); 
/* ===

TITLE: Landing Page Framework

META:
	description: Landing Page Framework
	keywords: Landing page,  php-framework
	viewport: width=device-width, initial-scale=1.0
	generator: Landing Page Framework (lpf.maxsite.com.ua)

VAR:
	simple: true
	compress_text: true

=== */

?>

h1 Landing Page Framework

_ <a href="http://lpf.maxsite.com.ua/">Homesite</a>

_ <a href="<?= BASE_URL ?>lpf-admin">Admin panel</a> (Put you login/password to <b>pages/lpf-admin/auth/auth-options.php</b>)

Первая строчка с php запрещает прямой доступ к этому файлу извне. Такая защита очень частая практика и все ваши php-файлы в LPF должны ей сопровождаться. Поскольку index.php — это исполняемый php-файл, значит в нем можно программировать на PHP. По ходу уроков я буду объяснять некоторые моменты.

Сейчас нужно понять, что любой php-код начинается с <?php и заканчивается ?>. Если php-код идет до самого конца файла, то закрывающий ?> как правило не ставится.

Другой вариант php-кода заключается в использовании немного другой конструкции <?= тут код ?>. Такой код выводит «что-то» прямо в браузер. У нас встречается <?= BASE_URL ?>, что позволяет вывести/подставить php-константу BASE_URL в адрес ссылки. То есть данный адрес превратится в href="http://localhost/lpf-admin".

В LPF множество предопределенных PHP-констант. BASE_URL — это адрес (главной страницы) сайта, например http://localhost/. Как правило все адреса в LPF завершаются слэшем «/». Не важно какой будет адрес сайта — LPF сам подставит его в BASE_URL.

Настройки страницы можно размещать прямо в этом же файле в секции

/* ===

тут настройки страницы

=== */

Это так называемый формат YAML, который делает такие вещи легко читаемыми.

Настройка TITLE задаёт текст для титула браузера. Секция META содержит больше настроек, каждая из которых сформирует в HEAD-секции страницы html-тэги META. Например description: Landing Page Framework превратится в

<meta name="description" content="Landing Page Framework">

Опция viewport по сути является обязательной при верстке, поскольку задает для браузера режим масштабирования. Это актуально для дисплеев, где высокое разрешение экрана. Если этот meta-параметр не указывать, то могут быть проблемы с неверным отображением изображений.

Секция VAR содержит опции направленные на работу самого LPF на этой странице. Например compress_text: true сжимает результирующий html-код — удаляет лишние пробелы, переносы и т.п. Если вы посмотрите исходный код страницы в браузере, то увидите его минимизированную версию. Такое сжатие экономит трафик, что очень любит гугл. :-)

С помощью simple: true включается парсер кода Simple. Про него вы можете почитать самостоятельно, пока же он нам не нужен, поэтому данную строчку можно просто удалить.

Точно также вы можно отключить и сжатие html-кода. Можно поменять значение на false или вовсе удалить.

В PHP true — означает истину или 1, а false — ложь или 0. Когда у переменной значение true, то она «включается».

Всё, что вы напишите на странице будет выводиться внутри BODY. Попробуйте разместить произвольный html-фрагмент и проверьте как он отображается в браузере. Посмотрите его исходный код — вы увидите, что LPF сам сформировал секцию HEAD и BODY.

Теперь о том, как LPF подключает CSS-файлы. Тут всё очень просто: сам css-файл нужно скопировать в assets/css корня сайта. Такой файл будет автоматически подключаться ко всем страницам сайта (если где-то не задана настройка так не делать).

В некоторых редких случаях нужно подключить какой-то дополнительный css-файл только на одной странице. В этом случае в каталоге страницы нужно сделать подкаталог css и в него скопировать css-файл. Он подключится только на этой странице.

Настройки можно разместить не только в index.php, а в отдельном файле страницы variables.php. Нам в общем-то такая возможность пока не нужна, но можете посмотреть пример в lpf-admin или lpf-content/config/-variables.php (это заготовка настроек для всех страниц).

Для своей работы вам будет достаточно лишь базовых знаний LPF. Для нас это учебная платформа, где мы будем дальше тренироваться и изучать HTML-верстку.

Задания

Задания доступны только после авторизации.