Настройка

Папка /app/custom для настройки индивидуальной части.

init.js

Файл инициализации JavaScript, используемый для запуска модулей и настройки рендера страниц и элементов. В примере ниже в событиях:

renderNode — событие отрисовки элементов, в котором элементу с ID 'news' формируется сетка новостей node.setHTML = 'html'
renderPage — событие отрисовки страниц, в котором странице с шаблоном ID 'background' формируется HTML locals.setHTML = 'html'

require('./news')

cb.system.on('renderNode', async (node, locals, lazyLoad) => {
    const {PAGE, LANG, req} = locals

    const {_item} = node

    if(_item === 'news') {
        node.setHTML = await news(locals)
        return
    }
})

cb.system.on('renderPage', async (html, locals, lazyLoad) => {
    const {PAGE, LANG, req} = locals
    const {_template, _pageId} = PAGE
        
    if(_template === 'background') {
        locals.setHTML = `<div class="background-content">${html}</div>
        <footer class="background-footer">
            ${await cb.renderPanel('footer', locals)}
        </footer>`
        return
    }
})

fields.html

Механика fields.html позволяет добавлять поля формы страницам, коллекциям и сервису "Настройки". Мы можем выбрать куда добавлять поля.

Глобальный объект MANIFEST (настройки)

Файл расположен в /app/custom/fields.html

Для страниц шаблона

Файл расположен в /app/custom/pages/templateId.fields.html

Для конкретной страницы

Файл расположен в /app/custom/pages/pageId/fields.html

Для документа коллекции

Файл расположен в /app/custom/collections/collectionId/fields.html

Псевдокод ниже добавит поле формы с файлом, которое доступно по ключу cover в коллекции или в глобальном объекте MANIFEST (для настроек) или PAGE (для страниц).

<h2 class="cb-multiform-label">Обложка</h2>
<cb-file>
    <label class="cb-button-board">
        <input name="cover" type="file" accept="image/*" data-optimize>
        <svg class="cb-icon-start"><use href="#cb-svg-add"/></svg>Добавить
    </label>
</cb-file>

Логика в том, что пользователь просто добавит обложку в управлении сайтом, а мы в событии "renderPage" или через MANIFEST получим её и покажем на экране.

nodes.html

Механика nodes.html позволяет добавлять в меню редактора любые новые элементы например "новости". Мы можем выбрать куда добавлять новые элементы.

Глобально для всех страниц

Файл расположен в /custom/nodes.html

Для страниц шаблона

Файл расположен в /custom/pages/templateId.nodes.html

Для конкретной страницы

Файл расположен в /pages/pageId/nodes.html

Для документа коллекции

Файл расположен в /app/custom/collections/collectionId/nodes.html

Правила разметки nodes.html

Все элементы с атрибутами data-item и data-name являют собой опцию "Новый элемент" в меню редактора.
Все поля формы внутри элемента сохраняются в базу данных и доступны в событии "renderElement".

Атрибуты

data-item

ID опции.

data-name

Название опции.

data-class

Опционально. Значение атрибута предустанавливает класс HTML-тега.

data-tag

Опционально. Значение атрибута предустанавливает имя HTML-тега , по умолчанию div.

<div data-item="news" data-name="Новости">
    <cb-textarea>
        <textarea name="headline" data-lang></textarea>
    </cb-textarea>
</div>

Логика в том что пользователь просто добавит элемент "новости" на страницу и заполнит в нём поле headline, а мы в событии renderElement сформируем заголовок headline и сетку новостей из базы данных.

Атрибуты fields/nodes

Механика атрибутов позволяет настраивать некоторым полям формы оптимизацию файлов и включить поддержку мультиязычности.

data-lang

Включает текстовому полю или файлу поддержку мультиязычности. Значения будут разные для каждого языка.

data-optimize

Изображение будет конвертироваться в современный формат webp, так же изображение или видео получит миниатюрную версию в 480px для мобильных.

data-size

Для выбора в редакторе изображений фиксированной ширины и высоты. Например атрибут data-size="1200 0, 720 0" задаст изображению ширину, близкую к его натуральной ширине 1200 или 720 пикселей.

data-alt

Изображение получит текстовое описания для поддержки людей с ограниченными возможностями.

data-text

Изображение или видео получит видимую подпись, легенду или описание

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

const multiform = el.closest('cb-multiform')
multiform.beforeInit = async () => {
     const unitList = await cb.postJSON('/__units', {action: 'getUnits'})
     // добавим поля в форму на основании наших новых данных
}

События мультиформы

multiform.addEventListener('updateFields', callback)

Обновление полей при подтверждении или сбросе формы

multiform.addEventListener('multiformLoaded', callback)
cb.system.addEventListener('multiformLoaded', callback)

Мультиформа загружена и готова

Шаблоны страниц

Шаблоны регистрируются в файле /custom/pages/menu.json. Порядок шаблонов в меню соответствует порядку в файле.

{
    "page": {
        "ru": "Страница",
        "en": "Page",
        "zh": "页"
    },
    "docs": {
        "ru": "Документация",
        "en": "Documentation",
        "zh": "文档",
        "url": "/docs/",
        "tagName": "div",
        "className": ""
    }
}

Настройки шаблона

ulr

Опционально. Предустановит начало URL-адреса (ссылки) страницы.

tagName

Опционально. Предустановит имя родительского тега страницы, по умолчанию div. Если указать пустым — родительского тега не будет.

className

Опционально. Предустановит класс родительского тега страницы.

Коллекции

Коллекции это способ организовать информацию. Например карточки товаров или список услуг. Чтобы создать коллекцию, добавьте папку с названием коллекции и поместите туда файлы с настройками.

`/app/custom/collections/collectionID`

config.json

Настройки коллекции

skip

Поля документа, которые не находятся в форме будут удалены из документа при его изменении. Если мы хотим сохранить поля в документе (которые управляются логикой сервера) мы передаем их ключи в массив skip.

active

true Включить. false Выключить.

color

Цвет иконки в управлении

sort

true документы можно упорядочить вручную. false упорядочивание отключено. Значение может быть объектом аналогичным MongoDB для сортировки.

documentImage

Если есть изображение, его ключ можно указать для превью документа.

menu.delete

Опция удаления документа разрешена

menu.active

Опция активации документа разрешена

menu.activeValue

true/false документ активен после создания или нет

deactivated

Название статуса неактивного документа. По умолчанию статус называется "отключено"

index.css

Опционально. Дополнительная стилизация документа в управлении.

index.js

Опционально. Настройка отображения документа в управлении: заголовок, картинка и др. Псевдокод ниже для index.js добавит документу описание и вывод даты в заголовок.

cb.system.cmsCollectionList['collectionID'] = detail => {
    const {doc, title, content} = detail
    const lang = cb.cookie.get('cb.lang')
    const date = new Date(doc.date)
    const dateFormat = {month: 'long', year: 'numeric', day: 'numeric'}

    title.innerHTML = date.toLocaleString(lang, dateFormat)
    content.innerHTML =  doc.content
}

Предзагрузка данных для формировании списка документов в примере выше. Чтобы на лету использовать дополнительные данные.

let unitList
cb.system.cmsCollectionInit['collectionID'] = async (config) => {
    const res = await cb.postJSON('/__units', {action: 'getUnits'})
    unitList =  res.unitList
}

text.json

Наименование коллекции и название кнопки "Создать документ"

{
  "name": {
    "ru": "Отзывы",
    "en": "Reviews",
    "zh": "评论",
  },
  "addButton": {
    "ru": "Добавить Отзыв",
    "en": "Add a Review",
    "zh": "添加评论"
  }
}

Панели

Панели создаются и редактируются в управлении, также как страницы. А вот подключаются разработчиком в главном index.ejs. Первым аргументом передаётся ID панели, выбранный при создании.

<div class="panel">
     <%-cb.renderPanel('panelID', {LANG, req})%>
</div>

Текст

`/custom/text`

Текстовые данные не значительные для редактирования можно поместить в глобальный объект "TEXT". Например создав файл panel.json все данные будут в объекте TEXT.panel

{
    "drawerButton": {
        "ru": "Боковое меню",
        "en": "Sidebar",
        "zh": "侧边栏",
    },
    "settingsButton": {
        "ru": "Настройки приложения",
        "en": "Application Settings",
        "zh": "应用程序设置",
    }
}

TEXT.panel.drawerButton[LANG] // Боковое меню

Глобальная переменная LANG доступна в момент исполнения страницы. Текстовые данные доступны также на клиентской стороне в переменной cb.text

cb.text.panel.drawerButton //Боковое меню

Дефисы в названиях файлов my-panel.json преобразуются в верблюжий регистр TEXT.myPanel, для удобства.

Инструменты разработчика

HTML

CSS

Бэкенд

Бэкенд

HTML

Компоненты

JavaScript

Бэкенд

Настройка

init.js

fields.html

nodes.html

Правила разметки nodes.html

Атрибуты

Атрибуты fields/nodes

События мультиформы

Шаблоны страниц

Настройки шаблона

Коллекции

`/app/custom/collections/collectionID`

config.json

index.css

index.js

text.json

Панели

Текст

`/custom/text`