Уеб шаблони като компоненти

Статия
10/16/2024

Уеб шаблоните могат да бъдат създадени и използвани като компоненти в уеб страници, за да позволят на създателите да използват тези многократно използваеми компоненти и да предоставят параметри, за да отговорят на изискванията.

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

Например можете да създадете следните компоненти (и други) като компоненти на уеб шаблон, които могат да бъдат конфигурирани в студиото за дизайн:

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

За да добавите компонент към уеб страница, можете да редактирате страницата, като използвате Visual Studio Code for the Web и добавите обект за включване на Liquid към копието на страницата:

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

Пример:

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

Създаване на компонент за уеб шаблон

За да създадете компонент на уеб шаблон, към който можете да позволите на създател да предава параметри, трябва да добавите етикет {% manifest %} към уеб шаблона. Разделът на манифеста описва параметрите, които можете да конфигурирате за предаване и използване от кода на уеб шаблона.

Манифестът е JSON обект, който дефинира свойствата на уеб шаблона, показван в студиото за дизайн: тип, показвано име, описание, таблици и параметри. Тези свойства на уеб шаблона могат да се използват за преодоляване на разликата между професионалните разработчици и редактирането с малко код. Параметрите се отнасят до променливи, които разработчиците използват в своя изходен код, а създателите с използване на малко код могат да конфигурират своите стойности.

Свойства поддържани от манифеста

Свойство на манифест	Описание
Тип	Трябва да бъде зададено на Функционално. Функционален: Добавете компонента на уеб шаблона чрез процеса Добавяне на компонент в дизайнерското студио.
displayName	Удобно име за компонента на уеб шаблона, който ще се появи в студиото за дизайн.
описание	Описание на компонента на уеб шаблона.
таблици	Масив от Dataverse таблици, които създателят може да използва, за да навигира директно до Работната област за данни за редактиране на конфигурацията на таблиците или записите. Таблиците трябва да бъдат изброени с тяхното логическо име.
параметри	Параметри с дефинирани свойства: id: съвпада с променливата, използвана в кода на уеб шаблона и тага Liquid include. displayName: Приятелско име в дизайнерско студио. описание: Кратък текст, изплуващ чрез подсказка, за да предостави контекст на създателите, използващи компонента.

Пример:

{% 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 for the web, Visual Studio Code, приложението за управление на портал или други методи), предавайки различните параметри, както е показано в този пример:

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

Можете да конфигурирате параметрите директно в студиото за дизайн. По този начин професионалният разработчик може да изгради усъвършенствани компоненти, използвайки уеб шаблони, които създателите, използващи малко код, могат да конфигурират с помощта на студиото за дизайн.

Конфигуриране на параметри в студио за дизайн.

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

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

Следваща стъпка

Как да създадете компонент на уеб шаблон

Споделяне чрез