Создание редактируемого лендинга через механизм Ленды

Введение

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

  • разделение ленда на секции,
  • редактирование параметров ленда и его секций под админом и редактором,
  • возможность менять структуру ленда (изменение порядка секций, скрывать секции),
  • изменение блоков в head и перед закрывающим тегом /body
  • возможность подключать как статичные HTML блоки, так и динамические (с хранимой процедурой).

Ноябрь 2022. Создали типовые блоки для лендингов - примеры блоков https://demo.web-automation.ru/allsections

Образ действий при работе с лендингом 

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://falcon.web-automation.ru/land2

Для неавторизованного пользователя не подгружаются скрипты для управления лендом (эти скрипты указываются в процедуре lnd_getLanding).

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

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

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

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

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

Note