Webes sablonok összetevőként

Webes sablonok a weboldalakon összetevőkként hozhatók létre és használhatók, lehetővé téve a készítők számára, hogy hasznosítsák ezeket az újrafelhasználható összetevőket, és paramétereket biztosítanak a követelményeknek való megfeleléshez.

Fejlesztőként webes sablont hozhat létre a weblapok tervezése során a készítők által konfigurálható konkrét funkciók biztosítása érdekében.

Létrehozhatja például a következő összetevőket (és másokat) webessablon-összetevőkként, amelyek a tervezőstúdióban konfigurálhatók:

• Helylista térképekkel
• Forgótáras megjelenítés
• Képek és videók gyűjteménye

Ha összetevőt szeretne hozzáadni egy weblaphoz, a webes Visual Studio Code segítségével módosíthatja az oldalt, és hozzáadhat egy Liquid bennefoglalt objektumot a weblap példányához:

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

Példa:

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

Webes sablon összetevőjének létrehozása

Ha létre szeretne hozni egy webessablon-összetevőt, amelyen a készítők paramétereket adhatnak át, hozzá kell adnia egy {% manifest %} címkét a webes sablonhoz. A jegyzékfájl szakasz leírja azokat a paramétereket, amelyek átadásra konfigurálhatók és amelyeket a webes sablon kódja használhat.

A jegyzékfájl egy JSON-objektum, amely meghatározza a tervezőstúdióban megjelenített webes sablon tulajdonságait: típus, megjelenített név, leírás, táblák és paraméterek. A webes sablon ezen tulajdonságai segítségével áthidalhatja a profi fejlesztők és a kevés kódolást igénylő szerkesztés közötti szakadékot. A paraméterek olyan változókra vonatkoznak, amelyeket a fejlesztők a forráskódban használnak, és segítségével a kevés kódolást igénylő készítők konfigurálhatják az értékeiket.

A jegyzékfájl által támogatott tulajdonságok

Példa:

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

Webes sablon kódjának írása

Ha egy meglévő, már használható webes sablont szeretne kiterjeszteni, akkor javasoljuk, hogy hozzon létre egy másolatot a webes sablonról, és terjessze ki a másolatot a forráskód megőrzése és az adatvesztés megelőzése érdekében.

Az összes paraméter sztringként kerül átadásra. A kódban ajánlott a paraméterértékeket szükség szerint a kívánt típusokká alakítani. A paraméterek átalakítása a Liquid-szűrők segítségével valósítható meg.

Példák:

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

Webessablon-összetevő konfigurálása weblapon

A webessablon-összetevő (a jegyzékfájl szakasszal együtt) létrehozásakor egy weboldal másolatához megfelelő Liquid-referenciát adhat hozzá (a webes Visual Studio Code, a Visual Studio Code, a Portálfelügyelet alkalmazás vagy más módszerek segítségével) a különböző paraméterek átadására, amely a következő példában látható:

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

A paraméterek közvetlenül a tervezőstúdióban konfigurálhatók. Így egy profi fejlesztő speciális összetevőket buildelhet webes sablonok segítségével, amelyeket a kevés kódolást igénylő készítők a tervezőstúdió segítségével konfigurálhatnak.

Korlátozások és ismert problémák

A webessablon-összetevők más webessablon-összetevőkbe való beágyazása nem támogatott.

Következő lépés

Webes sablonösszetevő létrehozása

Lásd még

• Termékértékelések megjelenítése Kártyák
• Helyek megjelenítése Kártyák
• Rekordok megjelenítése választóként