Веб-шаблони як компоненти
Веб-шаблони можна створювати та використовувати як компоненти на веб-сторінках, щоб дозволити авторам повторно використовувати ці компоненти та надавати параметри для налаштування відповідно до вимог.
Як розробник, ви можете створити веб-шаблон, надавши дизайнерам веб-сайтів певні функції, доступні для налаштування при розробці веб-сторінок.
Наприклад, можна створити описані нижче компоненти (та інші) у формі компонентів веб-шаблону, які можна буде налаштовувати в студії дизайну.
- Список розташувань з картами
- Подання каруселі
- Колекція зображень або відеозаписів
Щоб додати компонент на веб-сторінку, можна відредагувати сторінку за допомогою веб-програми Visual Studio Code та додати до копії сторінки об'єкт Liquid include:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Приклад:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Створення компонента веб-шаблона
Щоб створити компонент веб-шаблону, до якого дизайнер зможе передавати параметри, слід додати до веб-шаблону тег {% manifest %}. У розділі маніфесту описуються параметри, які можна передавати у веб-шаблон й використовувати в коді веб-шаблону.
Маніфест – це об’єкт JSON, який визначає властивості веб-шаблону, що відображається в студії дизайну: тип, коротке ім’я, опис, таблиці та параметри. Ці властивості веб-шаблону можуть зменшити розрив між професійною розробкою та редагуванням без введення коду. Параметри мають відношення до змінних, які розробники використовують у вихідному коді, а автори, що працюють без введення коду зможуть настроювати для них свої значення.
Властивості, що підтримуються у маніфесті
| Властивість маніфесту | Опис |
|---|---|
| Ввести | Значення мають відноситися до Функціоналу або Макета. Макет: додайте компонент веб-шаблону за допомогою процесу Додати розділ в студії дизайну. Функціонал: додайте компонент веб-шаблону за допомогою процесу Додати компонент в студії дизайну. |
| displayName | Зрозуміле ім’я компонента веб-шаблона, яке відображатиметься в студії дизайну. |
| опис | Опис компонента веб-шаблона. |
| таблиці | Масив таблиць Dataverse, які автор може використовувати для переходу безпосередньо до робочої області «Дані» для редагування конфігурації таблиць або записів. Таблиці потрібно вказувати з використанням їх логічних імен. |
| params | Параметри із визначеними властивостями: id: зіставляє змінну, яка використовується в коді веб-шаблону, із тегом Liquid include. 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 за допомогою веб-програми Visual Studio Code, програми «Керування порталом» або інших методів), що передаватиме різні параметри, як показано в цьому прикладі:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Параметри можна налаштовувати безпосередньо в студії дизайну. Таким чином професійні розробники можуть створювати складні компоненти за допомогою веб-шаблонів, а автори, що працюють без введення коду, можуть налаштовувати їх у студії дизайну.
Обмеження та відомі проблеми
Вкладення компонентів веб-шаблону в інші компоненти веб-шаблону не підтримується.
Наступний крок
Інструкції для створення компонента веб-шаблона