Работа с лендингами (механизм Lands)

Введение

Смотреть видео Как сделать лендинг    https://rutube.ru/video/private/4a421ee8a1d6d9bdf8ee96a86912beff/?p=lhYWjoRx7UzhPb0AY1sTiw

Лендинг - это страница, разделенная на секции. Каждая секция - это отдельный HTML блок

Механизм лендинг - это не ядро платформы, а надстройка к механизму Страницы. Данные по лендингу хранятся в таблицах lnd_lands, lnd_sections и в as_htmlblocks.

Примеры механизма Лендинг: 

Ключевые полезные ссылки для работы с лендингами: 

Возможности подсистемы Лендинги: 

  • разделение ленда на секции,
  • редактирование параметров ленда и его секций под админом и редактором,
  • возможность менять структуру ленда (изменение порядка секций, скрывать секции),
  • изменение блоков в 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).

Примечания к адаптации лендингов

  1. jQuery, Bootstrap по умолчанию присоединяется к лендингу, поэтому нужно их исключить из скриптов лендинга
  2. Иногда в лендинге прописаны глобально отступы у section (а в ленде они используются как служебные секции). Поэтому можно добавить следующий CSS в стили лендинга:
    .as-lnd-section{padding: 0 0 !important;}
  3. Коды секций не должны содержать пробелы, спецсимволы. Также эти коды не рекомендуется менять (т.к. будет потерян связанный с секцией HTML блок).

Перенос лендингов на другую базу

Ленд можно переносить как SQL пакет. Используйте форму elementSQL

Дополнительные материалы

  1. Как внедрить лендинг со своим шаблоном и стилями
  2. Как сделать копию лендинга с другим адресом или перенести лендинг на другой сайт
  3. Как поменять URL у лендинга
  4. Как отключить секцию лендинга или менять их порядок на лендинге
  5. Как задать высоту/подложку секции лендинга
  6. Как максимально быстро создать лендинг на базе Falcon Space
  7. Как создать свой шаблон новой секции лендинга
  8. Как редактировать секцию лендинга
  9. Где посмотреть список лендингов
  10. Как сделать меню лендинга или меню сайта на лендах
  11. Как сделать подстановочными фавикон, SEO title у лендинга
  12. Как сделать набор типовых лендингов под некие объекты
  13. Как создать сайт полностью на лендингах
  14. Как сделать так, чтобы PWA работал для лендингов
  15. Как переместить лендинг на главную страницу (или на любую другую)

 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK