Настройка проекта

В папке /app/custom находится индивидуальная часть: шаблоны страниц, коллекции, новые элементы и переменные. Не всем сайтам требуется настройка коллекций или шаблонов, поэтому начинайте с того места, над которым работайте. В процессе вы разберетесь и без усилий поставите 💯 на стенде диагностики страниц.

`/app/custom`

fields.html

Переменные (появятся в "Настройках")

<cb-input>
    <input name="contactNumber" required/>
    <label>__contactNumber__</label>
</cb-input>

Данные переменных доступны в глобальном объекте MANIFEST

fields.json

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

{
    "__contactNumber__" :{
        "ru" : "Контактный телефон",
        "en" : "Contact phone number",
        "zh" : "联系电话号码"
    }
}

init.js

Рендер функции подключаются в файле init.js и выглядят примерно так:

renderPageContent = async locals => {
    if (!cb.system.hasAccess(locals)) return ''
    return await cb.getHTML(locals, {
        Footer: () => `<footer>${MANIFEST.contactNumber}</footer>`,
    })
}

renderDocsContent = async locals => {
    if (!cb.system.hasAccess(locals)) return ''
    const {PAGE, LANG} = locals

    let html = await cb.getHTML(locals, {
        Footer: () => `<footer>${MANIFEST.contactNumber}</footer>`,
	code: el => '<code>' + el['code1'][LANG] + '</code>',
    })
 
    return html + `<aside>${PAGE.lastModified}</aside>` 
}

pagenodes.html

Элементы (При наличии, появятся в меню с элементами)

<div data-item="Footer" data-name="__footer__"></div>

<div data-item="code1" data-name="__code1__">
    <cb-textarea editor="html" editoroff>
        <textarea name="code1" data-lang></textarea>
    </cb-textarea>
</div>

pagenodes.json

{
    "__code1__": {
        "ru": "Программный код",
        "en": "Program code",
        "zh": "程序代码"
    },
    "__footer__" :{
        "ru" : "Подвал",
        "en" : "Footer",
        "zh" : "页脚"
    }
}

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

Чтобы зарегистрировать шаблон создайте html файл с названием шаблона, например "docs.html". Внутрь поместите рендер функцию "<%- await renderDocsContent(locals) %>". Каждая новая страница с таким шаблоном получит этот рендер.

`/app/custom/pages`

docs.html

Уникальный шаблон, внутри рендер

<%- await renderDocsContent(locals) %>

docs.fields.html

Переменные уникального шаблона (При наличии, появятся на страницах шаблона).

<cb-input>
    <input name="lastModified" required/>
    <label>__lastModified__</label>
</cb-input>

Данные переменных доступны в глобальном объекте PAGE.

docs.fields.json

{
    "lastModified": {
        "ru": "Последнее изменение",
        "en": "Last modified",
        "zh": "上次修改时间"
    }
}

menu.json

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

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

page.html

Стандартный шаблон, внутри рендер

<%- await renderPageContent(locals) %>

Переменные

Переменная это единица данных для страницы или одного документа коллекции. Чтобы создать переменные (любые данные формы): добавьте разметку в файлах fields.html. Разметка появится при редактировании страницы. А значение введенное пользователем будет в объекте MANIFEST для переменных из "Настроек" и в объекте PAGE для страниц шаблона.

Элементы

Чтобы зарегистрировать новые элементы, добавьте разметку в файл pagenodes.html для страниц или в nodes.html для коллекций. Каждый div с атрибутом data-item="id1" и data-name="elementName1" это новый элемент с идентификатором и названием опции в меню элементов. Значение элементов доступны в рендере по ключам в параметре "el".

Коллекции

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

`/app/custom/collections/name1`

config.json

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

{
  "active": true,
  "color": "#47b953",
  "icon": "...",
  "sort": true,
  "documentImage": "photo",
  "menu": {
    "delete": true,
    "active": true,
    "activeValue": true
  }
}

fields.html

Переменные коллекции

<cb-input>
    <input name="date" required/>
    <label>__date__</label>
</cb-input>

nodes.html

Элементы коллекции

<div data-item="feature" data-name="__feature__">
    <cb-textarea editor>
        <textarea name="text" data-lang></textarea>
    </cb-textarea>
</div>

index.css

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

index.js

Настройка отображения документа в управлении: заголовок, картинка и др.

cb.system.utils.cmsCollectionList['name1'] = 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.v
}

text.json

Наименование коллекции, название кнопки "Создать документ", и ключи с двойным подчеркиванием для наименований на языке пользователя.

{
  "name": {
    "ru": "Журнал изменений",
    "en": "Changelog",
    "zh": "变更日志",
  },
  "addButton": {
    "ru": "Добавить версию",
    "en": "Add Version",
    "zh": "添加版本"
  },
  "__date__": {
    "ru": "Дата",
    "en": "Date",
    "zh": "日期"
  },
  "__feature__": {
    "ru": "Нововведение",
    "en": "Feature",
    "zh": "特征"
  }
}

Параметры config.json

active

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

color

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

sort

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

documentImage

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

menu.delete

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

menu.active

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

menu.activeValue

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

Панели

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

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

Текстовые данные

`/custom/text`

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

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

TEXT.panel.drawerButton.ru  //Боковое меню

TEXT.panel.drawerButton[LANG] // в зависимости от языка пользователя

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

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

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

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

HTML

CSS

Бэкенд

Бэкенд

HTML

JavaScript

Компоненты

JavaScript

Бэкенд

Настройка проекта

`/app/custom`

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

`/app/custom/pages`

Переменные

Элементы

Коллекции

`/app/custom/collections/name1`

Параметры config.json

Панели

Текстовые данные

`/custom/text`