Szablony sieci Web jako składniki
Szablony sieci Web mogą być tworzone i używane jako składniki stron sieci Web w celu umożliwienia twórcom korzystania z tych składników, które można ponownie wykorzystać i zapewnić parametry spełniające wymagania.
Deweloper może utworzyć szablon sieci Web, aby udostępnić określoną funkcję, która będzie dostępna dla osób podczas projektowania stron sieci Web.
Na przykład można utworzyć następujące składniki (i inne) jako składniki szablonów sieci Web skonfigurować je w programie Design Studio:
- Lista lokalizacji z mapowaniami
- Wyświetlanie karuzelowe
- Galeria obrazów lub filmów wideo
Aby dodać składnik do strony sieci Web, można edytować tę stronę, korzystając z Visual Studio Code dla sieci Web i dodając obiekt dołączenia w języku Liquid do kopii strony:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Przykład:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Tworzenie składnika szablonu sieci Web
Aby utworzyć składnik szablonu sieci Web, do którego można zezwolić twórcy na przekazywanie parametrów należy dodać {% manifest %} tag do szablonu sieci Web. Sekcja manifest opisuje parametry, które można skonfigurować do przekazania i które mogą być używane przez kod szablonu sieci Web.
Manifest jest obiektem JSON, który definiuje właściwości szablonu sieci Web wyświetlanego w programie Design Studio: typ, nazwa wyświetlana, opis, tabele i parametry. Te właściwości szablonu sieci Web mogą służyć do stworzenia relacji między deweloperami a edycją mikrokodu. Parametry są powiązane ze zmiennymi, z których korzystają deweloperzy w kodzie źródłowym, a twórcy mikrokodu mogą konfigurować swoje wartości.
Manifest obsługiwanych właściwości
| Właściwość manifestu | Podpis |
|---|---|
| Type | Musi być ustawiony na Funkcjonalny. Funkcjonalność: dodawanie składnika szablonu sieci Web za pośrednictwem procesu Dodaj składnik w programie Design Studio. |
| displayName | Przyjazna nazwa składnika szablonu sieci Web, która ma być tabwyświetlana w programie Design Studio. |
| description | Opis składnika szablonu sieci Web. |
| Tabele | Macierz tabel, Dataverse których może użyć twórca, aby przejść bezpośrednio do obszaru roboczego Dane w celu edytowania konfiguracji tabel lub rekordów. Tabele należy wyszczególniać przy użyciu ich nazwy logicznej. |
| parametry | Parametry o zdefiniowanych właściwościach: id: pasuje do zmiennej używanej w kodzie szablonu sieci Web, a w języku Liquid do tagu dołączania. displayName: przyjazna nazwa w programie Design Studio. description: krótki tekst wyświetlany za pomocą podpowiedzi, aby dać twórcy kontekst używania składnika. |
Przykład:
{% 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-->
Pisanie kodu szablonu sieci Web
W celu rozszerzenia istniejącego już szablonu sieci Web, zalecane jest utworzenie kopii szablonu sieci Web i rozszerzenie kopii w celu zachowania kodu źródłowego i uniknięcia utraty danych.
Wszystkie parametry są przekazywane jako ciągi. Zaleca się przekonwertowanie w kodzie wartości parametrów na wymagane typy. Parametry konwersji można osiągnąć, korzystając z filtrów języka Liquid.
Przykłady:
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Konfigurowanie składnika szablonu sieci Web na stronie sieci Web
Gdy tworzony jest składnik szablonu sieci Web (z sekcją manifestu), można dodać odpowiednie odwołanie do kopii strony sieci Web (przy użyciu Visual Studio Code dla Web, Visual Studio Code, aplikacji Zarządzanie portalami lub innych metod) przekazując różne parametry, jak pokazano w tym przykładzie:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Parametry można skonfigurować bezpośrednio w programie Design Studio. W ten sposób deweloper może tworzyć zaawansowane składniki przy użyciu szablonów sieci web, które są skonfigurowane przez twórców mikrokodu w programie Design Studio.
Ograniczenia i znane problemy
Zagnieżdżanie składników szablonów sieci Web w innych składnikach szablonów sieci Web nie jest obsługiwane.
Następny krok
Tworzenie składnika szablonu sieci Web