Не так давно возникла задача сделать простую Landing Page (целевая страница сайта). На такой странице, как правило располагается вся необходимая информация о товаре/услуге.
Технически она создается в виде отдельного html-файла. Проблема тут только в том, что работать с «голым» HTML не очень удобно, ну и страшно не хотелось отказываться от возможностей LESS для создания css-стилей.
Ставить отдельную копию MaxSite CMS тоже не совсем разумно: ради пары страниц это явный перебор. Таким образом родился небольшой PHP-фреймворк «Landing Page Framework» специально «заточенный» для создания одиночных страниц.
Его смысл в том, чтобы выделить верстку каждой страницы в отдельный php-файл, и при этом обеспечить вебмастера привычными «плюшками».
В частности LPF может выполнять автоматическую компиляцию LESS в CSS, выполнять авторасстановку тэгов (вручную расставлять P — бр-р-р-р...), поддерживать привычный BBCode. Помимо этого будет работать ЧПУ, а также поддержка любого CSS-,JS-фреймворка. Плюс высочайшая скорость работы (при минимальной нагрузке на сервер) и не требуется база данных.
Установка
Landing Page Framework — не требует инсталяции. Достаточно загрузить файлы на сервер и всё сразу начинает работать. Единственное, что возможно придётся указать права на запись на каталог кеша (и /css/), а также убедиться, что работает ЧПУ (обычно с этим проблем нет).
Для чего годится LPF
В первую очередь, конечно же, для создания landing pages. Также он отлично подходит для небольших сайтов из ограниченного количества страниц. Поскольку фреймворк работает на PHP, то с помощью LPF можно организовать простую CMS со связями между страницами и общими блоками (через set-каталог и компоненты).
LPF прекрасно подходит для изучения различных CSS-фреймворков. Причем их можно подключать как на уровне всего сайта (то есть для всех страниц), так и для каждой страницы отдельно. Для примера я сделал подключение:
- bootstrap
- foundation
- kickstart
- pure
- uikit
Всё это работает без каких-либо переделок и ухищрений.
LPF можно использовать и для обучению верстке, и для организации разных демо-страниц. Если бы LPF появился раньше, то все свои примеры по MaxSite CMS я бы делал именно на нём. :-)
Простота освоения
Страницы сайта размещаются каталоге /pages/. Причем имя страницы совпадает с именем её каталога. Это очень простая схема, при которой невозможно запутаться. Для главной страницы используется каталог /home/, но при необходимости можно задать любой другой.
Каждая страница содержит два файла: text.php и variables.php. Первый содержит текст страницы, второй — какие-то её опции, вроде title или meta.
Файл text.php по сути выводится как тело HTML-страницы между BODY. Выводится всё, что в нём указано без обработки. Но, при желании, можно разрешить использование BBCode (как в MaxSite CMS), разметки Markdown и даже HAML. Если лень расставлять абзацы P, то можно разрешить авторасстановку тегов. Всё это опционально и будет работать только по желанию вебмастера.
Строго говоря, в LPF можно подключить любой autotag, даже если вы его сделаете сами.
Если стоит задача вывести какой-то код в секции HEAD, то создается файл head.php. Файл header.php подключается сразу в начале секции BODY, а footer.php — в конце.
Про CSS/LESS
В LPF используются часть функций из MaxSite CMS (кого-то это удивляет?). Компилятор LESS — один из краеугольных камней фреймворка, поэтому он настроен сразу на автоматическое выполнение. Исходные less-файлы хранятся в каталоге /css-less/ с основным файлом style.less. Результат компилируется в каталог /css/ в файл style.css. Таким образом, в style.less правильным будет только подключение через @import любых других файлов со стилями. Организация less-файлов уже целиком ложится на вебмастера.
Отмечу особенность LESS-компиляции, которая с недавних пор также доступна пользователям MaxSite CMS. Сама библиотека компилятора достаточно объемна и компиляция требует дополнительных ресурсов сервера. Чтобы сгладить его работу происходит кеширование результата. В отличие от других разработок, в моей сверяется время не только основногого less-файла с конечным, но и всех остальных less-файлов. Если какой-то из них изменён, то произойдет автоматическая компиляция.
Раньше приходилось на этапе разработки включать принудительную компиляцию, теперь же это просходит автоматически.
Про компоненты
Смысл компонентов, такой же как и в MaxSite CMS — вынести сложный многократно используемый код отдельно и подключать только при необходимости. В Landing Page Framework компоненты располагаются в каталоге /components/ каждый в своем подкаталоге.
Подключение компонента происходит вручную в нужном месте страницы с помощью функции mso_component(). Первым параметром указывается название/каталог компонента, вторым — опции компонента. Переданные опции автоматически доступны в файле компонента в переменной $OPTIONS. Что это за компонент и какие у него должны быть опции — зависят уже только от самого компонента.
Для примера я включил в комплект фреймворка menu, просто потому что он мне понадобился на своём сайте. Ну и как пример работы. Делать какие-то другие варианты я не планирую, поскольку компоненты обычно завязаны на HTML-разметку, CSS-стили и JS-скрипты, которые могут быть произвольными и меняться от сайта к сайту.
LPF as CMS
Если на сайте две и более страниц, то неизбежно возникнут какие-то общие блоки. Самый простой вариант — счетчики, шапка и подвал сайта. Очевидно, что такие блоки удобно оформить в отдельных файлах и подключать уже в коде страниц. Я долго не мог определиться как назвать такие блоки и пришел к выводу, что такие вещи нужно группировать в отдельном каталоге в виде набора SET.
Например для своего сайта я сделал /set/mysite/, где разместил header.php, footer.php и counters.php. В тексте страниц подключение выполняется одной коммандой:
<?php require(SET_DIR . 'mysite/header.php') ?>
Поскольку организация каталога /set/ может быть произвольной (или даже вовсе отстутствовать), то он и не создается при установке LPF. Но при этом существуют две php-константы SET_DIR и SET_URL, которые чуточку упрощают написание php-кода.
Итого
Анонсирую Landing Page Framework в первую очередь для вебмастеров, которым может быть полезен подобный инструмент. Делал я его под свои задачи, но после публикации первых версий, интересные идеи и дельные замечания мне подкинул Павел Белоусов (@pafnuty_name). Сейчас список задач пуст и LPF уже прошел небольшое тестирование, поэтому его можно использовать на рабочих сайтах.
Комментариев: 20 RSS
1librarian19-09-2013 00:59
Ссылка на markdown — неправильная.
Ещё идея — подключение автоматического типографа для вывода текста.
2Admin19-09-2013 07:21
Ссылку поправил. Что за типограф? Есть php-библиотека?
3Андрей19-09-2013 10:41
В новых версиях Maxsite это тоже есть, я правильно понял?
4Андрей19-09-2013 10:42
Я о компиляции LESS, конечно же.
5Admin19-09-2013 12:52
Неправильно написал. Будет в версии 0.854. Забыл, что её я ещё не выкладывал. :-)
6Руслан24-09-2013 11:52
Было бы классно, сделать что-то типа мини cms
С админкой и прочим. На минимальном уровне хотя бы
7Андрей11-10-2013 20:02
Если бы не странные клиенты, не было бы странного вопроса..))
Проблемка выскочила, если название страницы содержит (или нет) заглавные буквы, то это разные страницы
8Андрей24-10-2013 13:28
Такой вопрос, где хранить различные функции, чтобы использовать в разных местах на разных страницах. Смог запустить только вписав в engine.php А это наверное не самое правильное?
9Admin24-10-2013 14:18
Где угодно. Например в set-каталоге и подключать через require().
10Андрей24-10-2013 15:05
Наверное не правильно выразился. Суть в том, что использую наборы одинаковых страниц для разных пользователей. Целиком весь Landing Page Framework переименовываю под это. Чтобы не ковырять каждую страницу, делая исправления, решил вынести данные в отдельное единое место. Я переменным присваиваю значения. Они вставляются в текст на разных страницах. Думал как сделать отдельный файлик, вроде function.... Хмм.. Или именно его (файлик) и включить в engine.php ? Или есть вариант автомата?
11Admin24-10-2013 16:16
Ничего не понял... Наугад: engine/config.php
12Андрей25-10-2013 16:07
Работает))) Спасибо.
13Evgeny Karsky27-10-2013 13:33
Максим, крутяк фреймворк получился! Обкатывал тут его. Приятно удивлен работе и идеологии. Примитивную админку прикрутить отличная CMS получится.
14pltvs05-11-2013 10:11
Статья хорошая! Я следующим образом работаю с Markdown: http://plutov.by/post/markdown_php
15Александр Шиллинг05-07-2014 12:13
Спасибо Max за LPF! Как раз сейчас потребовался подобный Framework для создание LP и вот уже есть готовое решения! :) Не планируешь выкладывать исходный код на github?
16Наталья20-10-2014 15:53
Крутой фреймворк. Спасибо разработчикам.
Ещё не разобралась со всеми возможностями, но то, с чем уже разобралась, более, чем впечатляет.
17Наталья21-10-2014 06:16
Ребята, а как-нибудь можно вставлять javascript-ы на LPF, чтобы они работали? У меня ни Яндекс-карта не отображается, ни калькулятор считать не хочет. В коде ошибок нет, на странице без фреймворка всё работает.
18Admin21-10-2014 07:21
1. Проверьте наличие js в исходном коде Ctrl+U.
2. Посмотрите в консоли js-ошибки F12.
19Наталья21-10-2014 07:26
Конечно, перед отправкой сообщения сюда, всё это проверила. Код js есть, ошибок нет.
20Наталья21-10-2014 15:36
Через конструктор карт на Яндексе (http://api.yandex.ru/maps/tools/constructor/) получается отобразить карту. Через песочницу (http://api.yandex.ru/maps/jsbox/2.1/) вообще никак не отображается, хотя код на странице выводится.
С калькулятором пока не разобралась.
Ещё можете подсказать, как отправку сообщений с сайта сделать? Весь день мучила разные варианты, так и не получилось.