Webové šablóny ako súčasti

Článok
10/25/2024

Webové šablóny je možné vytvárať a používať ako komponenty na webových stránkach, čo umožňuje tvorcom používať tieto opakovane použiteľné komponenty a poskytovať parametre na splnenie požiadaviek.

Ako vývojár môžete vytvoriť webovú šablónu, ktorá poskytne špecifické funkcie, ktoré môžu tvorcovia nakonfigurovať pri navrhovaní webových stránok.

Môžete napríklad vytvoriť nasledujúce komponenty (a iné) ako komponenty webovej šablóny, ktoré je možné konfigurovať v dizajnérskom štúdiu:

Zoznam miest s mapami
Karuselový displej
Galéria obrázkov alebo videí

Ak chcete pridať komponent na webovú stránku, môžete stránku upraviť pomocou Visual Studio Code pre web a pridanie objektu Liquid include do kópie stránky:

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

Príklad:

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

Vytvoriť komponent webovej šablóny

Ak chcete vytvoriť komponent webovej šablóny, ktorému môžete povoliť, aby výrobca odovzdával parametre, musíte pridať značku {% manifest %} do webovej šablóny. Sekcia manifestu popisuje parametre, ktoré môžete nakonfigurovať na odovzdávanie a používanie kódom webovej šablóny.

Manifest je objekt JSON, ktorý definuje vlastnosti webovej šablóny zobrazenej v dizajnérskom štúdiu: typ, zobrazovaný názov, popis, tabuľky a parametre. Tieto vlastnosti webovej šablóny možno použiť na preklenutie priepasti medzi profesionálnymi vývojármi a nenáročnou úpravou kódu. Parametre sa týkajú premenných, ktoré vývojári používajú vo svojom zdrojovom kóde a tvorcovia s nenáročným kódom môžu konfigurovať ich hodnoty.

Zjavné podporované vlastnosti

Zjavná vlastnosť	Description
Type	Je potrebné nastaviť na Funkčné. Funkčné: Pridajte komponent webovej šablóny prostredníctvom procesu Pridať komponent v dizajnérskom štúdiu.
displayName	Priateľský názov pre komponent webovej šablóny, ktorý sa má objaviť v dizajnérskom štúdiu.
description	Popis webovej šablóny komponentu.
tabuľky	Pole Dataverse tabuliek, ktoré môže výrobca použiť na navigáciu priamo do pracovného priestoru údajov na úpravu konfigurácie tabuliek alebo záznamov. Tabuľky musia byť uvedené pomocou ich logického názvu.
parametre	Parametre s definovanými vlastnosťami: id: zodpovedá premennej použitej v kóde webovej šablóny a značke Liquid include. displayName: Priateľské meno v dizajnérskom štúdiu. description: Krátky text zobrazený v popise, ktorý poskytuje kontext tvorcom používajúcim komponent.

Príklad:

{% 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-->

Napísať kód webovej šablóny

Ak chcete rozšíriť existujúcu predpripravenú webovú šablónu, odporúčame vám vytvoriť kópiu webovej šablóny a rozšíriť ju, aby ste zachovali zdrojový kód a zabránili strate údajov.

Všetky parametre sa odovzdávajú ako reťazce v úvodzovkách. Vo vašom kóde sa odporúča podľa potreby previesť hodnoty parametrov na požadované typy. Konverzia parametrov sa môže dosiahnuť pomocou filtrov Liquid.

Príklady:

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

Nakonfigurujte komponent webovej šablóny na webovej stránke

Po vytvorení komponentu webovej šablóny (s sekciou manifestu) môžete pridať zodpovedajúci Liquid odkaz na kópiu webovej stránky (pomocou Visual Studio Code pre web, Visual Studio Code, aplikácie Správa portálu alebo inými metódami) odovzdaním rôznych parametrov, ako je znázornené v tomto príklade:

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

Parametre si môžete nakonfigurovať priamo v dizajnérskom štúdiu. Týmto spôsobom môže profesionálny vývojár vytvárať pokročilé komponenty pomocou webových šablón, ktoré môžu tvorcovia s nízkym kódom nakonfigurovať pomocou dizajnérskeho štúdia.

Konfigurácia parametrov v dizajnérskom štúdiu.

Obmedzenia a známe problémy

Vkladanie komponentov webovej šablóny do iných komponentov webovej šablóny nie je podporované.

Ďalší krok

Ako vytvoriť komponent webovej šablóny

Zdieľať cez