Поделиться через


Веб-шаблоны как компоненты

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

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

Например, вы можете создать следующие компоненты (и другие) в качестве компонентов веб-шаблонов, которые можно настроить в студии дизайна:

  • Список мест с картами
  • Отображение в виде карусели
  • Галерея изображений или видео

Чтобы добавить компонент на веб-страницу, вы можете отредактировать страницу. Для этого используйте веб-версию Visual Studio Code и добавьте объект включения Liquid в копию страницы:

{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}

Пример:

{% include 'webTemplateName' name: 'Topics' count:'4' %}

Создание компонента веб-шаблона

Чтобы создать компонент веб-шаблона, в который можно разрешить разработчику передавать параметры, необходимо добавить тег {% manifest %} в веб-шаблон. Раздел манифеста описывает параметры, которые можно настроить для передачи и использования кодом веб-шаблона.

Манифест — это объект JSON, определяющий свойства веб-шаблона, отображаемые в студии дизайна: тип, отображаемое имя, описание, таблицы и параметры. Эти свойства веб-шаблонов можно использовать для преодоления разрыва между профессиональной разработкой и малокодовым редактированием. Параметры относятся к переменным, которые разработчики используют в своем исходном коде, а создатели, использующие малокодовый подход, могут настраивать их значения.

Поддерживаемых свойства манифеста

Свойство манифеста Описание:
Type Должно быть либо Функциональный или Макет.

Макет. Добавление компонента веб-шаблона с помощью процесса Добавить раздел в студии дизайна.

Функциональный. Добавление компонента веб-шаблона с помощью процесса Добавить компонент в студии дизайна.
displayName Понятное имя компонента веб-шаблона, которое будет отображаться в студии дизайна.
Описание Описание компонента веб-шаблона.
таблицы Массив таблиц Dataverse, которые создатель может использовать для прямого перехода к рабочей области данных для редактирования конфигурации таблиц или записей. Таблицы должны быть перечислены с использованием их логического имени.
Параметры Параметры с определенными свойствами:

id: соответствует переменной, используемой в коде веб-шаблона, и тегу включения Liquid.

displayName: Понятное имя в студии дизайна.

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

Пример:

{% manifest %} 
    { 
    "type": "Functional", 
    "displayName": "Data Cards", 
    "description": "This component displays data using a cards layout", 
    "tables": ["cards"], 
    "params": [ 
        { 
        "id": "title", 
        "displayName": "Title", 
        "description": "Heading for this component" 
        }, 
        { 
        "id": "count", 
        "displayName": "Count", 
        "description": "No. of items to be displayed" 
        }] 
    } 
{% endmanifest %} 

<!--additional web template code to use parameters to specialized functionality-->

Написание кода веб-шаблона

Если вы хотите расширить существующий готовый веб-шаблон, мы рекомендуем вам создать копию веб-шаблона и расширить копию, чтобы сохранить исходный код и предотвратить потерю данных.

Все параметры передаются в виде строк. В вашем коде рекомендуется преобразовывать значения параметров в нужные типы по мере необходимости. Преобразовать параметры можно с помощью фильтров Liquid.

Примеры:

  • {% assign posts_count = count | integer %}
  • {% assign column_count = columns | integer %}

Настройка компонента веб-шаблона на веб-странице

Когда компонент веб-шаблона (с разделом манифеста) создан, вы можете добавить соответствующую ссылку Liquid на копию веб-страницы (используя веб-версию Visual Studio Code, Visual Studio Code, приложение управления порталом или другие методы), передавая различные параметры, как показано в этом примере:

{% include 'webTemplateName' name: 'Topics' count:'4' %}

Настроить параметры можно прямо в студии дизайна. Таким образом, профессиональный разработчик может создавать расширенные компоненты, используя веб-шаблоны, которые создатели малокодовой разработки могут настроить с помощью студии дизайна.

Настройка параметров в студии дизайна.

Известные проблемы и ограничения

Вложение компонентов веб-шаблона в другие компоненты веб-шаблона не поддерживается.

Следующий шаг

Как создать компонент веб-шаблона

См. также