Работа с лендингами (механизм Lands)
Введение
Смотреть видео Как сделать лендинг https://rutube.ru/video/private/4a421ee8a1d6d9bdf8ee96a86912beff/?p=lhYWjoRx7UzhPb0AY1sTiw
Лендинг - это страница, разделенная на секции. Каждая секция - это отдельный HTML блок.
Механизм лендинг - это не ядро платформы, а надстройка к механизму Страницы. Данные по лендингу хранятся в таблицах lnd_lands, lnd_sections и в as_htmlblocks.
Примеры механизма Лендинг:
Ключевые полезные ссылки для работы с лендингами:
- Типовые секции лендингов https://falconspace.ru/landguide
- Стили Falcon Space и подсказки по разметке https://falconspace.ru/styleguide
Возможности подсистемы Лендинги:
- разделение ленда на секции,
- редактирование параметров ленда и его секций под админом и редактором,
- возможность менять структуру ленда (изменение порядка секций, скрывать секции),
- изменение блоков в head и перед закрывающим тегом /body
- возможность подключать как статичные HTML блоки, так и динамические (с хранимой процедурой).
Образ действий при работе с лендингом
0. (Необязательно. Только в случае использования внешнего шаблона лендинга). Кладем файлы лендинга в папку /uploads/lands/{landCode} (через FTP или RDP) - в ней стили, скрипты, картинки от исходного лендинга.
1. создаем лендинг (указываем код страницы landCode) через форму newLand
2. настраиваем параметры лендинга и создаем его секции
3. Указываем у лендинга подключения скриптов и стилей (примечание - вы можете использовать {baseurl} для подстановки пути к папке ресурсов лендинга).
Из head убираем теги title, meta desc, meta keywords и ссылки на favicon (эти теги добавятся автоматически на основе данных в свойствах лендинга).
4. Для каждой секции прописываем HTML блок (admin или editor) либо, SP процедуру генерации блока (SP может редактировать только админ)
Все управление по ленду находится прямо на странице ленда. Внизу кнопки редактирования настроек ленда и кода в Head, body bottom.
При наведении на каждую секцию - справа внизу появляется Кнопка редактирования блока.
Детали реализации системы лендингов
Лендинг - это страница-копия со страницы example-land с пустым шаблоном.
Вся генерация ленда происходит в процедуре [dbo].lnd_getLanding, которая возвращает все настройки, а также собирает HTML блоки от секций.
ВАЖНО! Для Core версии платформы Falcon Space необходимо передавать параметр @isCore = 1
В ленде подключаются системные скрипты и стили платформы для обеспечения работы форм управления (а также некоторые возможности могут потребоваться для нужд лендинга, например для формы обратной связи или регистрации).
По умолчанию каждая секция оборачивается в section class="as-lnd-section". Если это мешает вашей разметке, это можно отключить в параметре @enableAddingSectionCodes =0 процедуры lnd_getLanding. Если обертка не используется, то нельзя будет установить высоту секции, фон секции, а также не будет кнопок контекстного редактирования блока секции.
Данные по лендам и секциям хранятся в таблицах с префиксом lnd_
Части решения:
- страница example-land
- процедура [dbo].lnd_getLanding
- структура от html блоков таблицы для хранения кода секций
- формы editLand, landScriptsAndStyles, newLand
- таблица landSections
- ресурс - landImages
Редактирование секции лендинга
Высота секции - это установка CSS свойства min-height для секции. Если указать просто число (например, 500), то будет добавлено px (т.е. 500px).
Фон секции - указываем либо hex код через #aabbcc либо путь к картинке. Картинку можно загрузить через ресурсы ленда.
Каждая секция ленда имеет соответствующий HTML блок (он создается автоматически при создании секции) с кодом land_{landCode}_{sectionCode}. HTML блок может быть как статичным, так и динамическим.
Если требуется вставить картинку в секцию, то можно загрузить в настройках ленда картинку и использовать путь от картинки в разметке.
Секцию можно перенести или отключить (в итоге она не попадет на ленд, но останется для возможности вернуть обратно).
Пример подобного ленда можно посмотреть по адресу: https://falconspace.ru/land2
Для неавторизованного пользователя не подгружаются скрипты для управления лендом (эти скрипты указываются в процедуре lnd_getLanding).
Примечания к адаптации лендингов
- jQuery, Bootstrap по умолчанию присоединяется к лендингу, поэтому нужно их исключить из скриптов лендинга
- Иногда в лендинге прописаны глобально отступы у section (а в ленде они используются как служебные секции). Поэтому можно добавить следующий CSS в стили лендинга:
.as-lnd-section{padding: 0 0 !important;} - Коды секций не должны содержать пробелы, спецсимволы. Также эти коды не рекомендуется менять (т.к. будет потерян связанный с секцией HTML блок).
Перенос лендингов на другую базу
Ленд можно переносить как SQL пакет. Используйте форму elementSQL
Дополнительные материалы
- Как внедрить лендинг со своим шаблоном и стилями
- Как сделать копию лендинга с другим адресом или перенести лендинг на другой сайт
- Как поменять URL у лендинга
- Как отключить секцию лендинга или менять их порядок на лендинге
- Как задать высоту/подложку секции лендинга
- Как максимально быстро создать лендинг на базе Falcon Space
- Как создать свой шаблон новой секции лендинга
- Как редактировать секцию лендинга
- Где посмотреть список лендингов
- Как сделать меню лендинга или меню сайта на лендах
- Как сделать подстановочными фавикон, SEO title у лендинга
- Как сделать набор типовых лендингов под некие объекты
- Как создать сайт полностью на лендингах
- Как сделать так, чтобы PWA работал для лендингов
- Как переместить лендинг на главную страницу (или на любую другую)
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити
- Лендинги Работа с лендингами (механизм Lands) Как внедрить лендинг со своим шаблоном и стилями Как сделать копию лендинга с другим адресом или перенести лендинг на другой сайт Как поменять URL у лендинга Как использовать одни и те же секции несколько раз без дублирования Как отключить секцию лендинга или менять их порядок на лендинге Как задать высоту/подложку секции лендинга Как для ленда прописать скрипты или подключить дополнительные CSS файлы, счетчики и т.д. Как максимально быстро создать лендинг на базе Falcon Space Как прописать SEO параметры для ленда Как создать свой шаблон новой секции лендинга? Как редактировать секцию лендинга Как создать новый лендинг? Где посмотреть список лендингов? Как сделать меню лендинга или меню сайта на лендах Как сделать подстановочными фавикон, seo title у лендинга Как сделать набор типовых лендингов под некие объекты (карточки товаров)? Как создать сайт полностью на лендингах? Как сделать так, чтобы PWA работал для лендингов Как переместить лендинг на главную страницу (или на любую другую) Как устроен механизм лендингов внутри
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта