Tīmekļa veidnes kā komponenti

Tīmekļa veidnes var izveidot un izmantot kā tīmekļa lapu komponentus, lai veidotājiem ļautu izmantot šos atkārtoti izmantojamos komponentus un nodrošināt parametrus, kas atbilst prasībām.

Jūs kā izstrādātājs varat izveidot tīmekļa veidni, lai nodrošinātu noteiktu funkcionalitāti, ko veidotāji var konfigurēt, noformējot tīmekļa lapas.

Piemēram, kā tīmekļa veidnes komponentus, ko var konfigurēt noformējuma studijā, var izveidot tālāk norādītos komponentus (un citus):

• Atrašanās vietu saraksts ar kartēm
• Karuseļa attēlojums
• Attēlu vai videoklipu galerija

Lai tīmekļa lapai pievienotu komponentu, lapu var rediģēt, izmantojot Visual Studio Code tīmeklim un pievienojot Liquid iekļaušanas objektu lapas kopijai:

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

Piemērs:

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

Izveidot tīmekļa veidnes komponentu

Lai izveidotu tīmekļa veidnes komponentu, kuram var atļaut veidotājam nodot parametrus, tīmekļa veidnei ir jāpievieno {% manifest %} etiķete. Vietnes sadaļā ir aprakstīti parametri, kurus var konfigurēt, lai tie tiktu nodoti un lietoti ar tīmekļa veidnes kodu.

Manifests ir JSON objekts, kas definē noformējuma studijā parādītās tīmekļa veidnes rekvizītus: tips, parādāmais nosaukums, apraksts, tabulas un parametri. Šos tīmekļa veidnes rekvizītus var izmantot, lai izveidotu saikni starp izstrādātājiem un mazkoda rediģēšanu. Parametri ir saistīti ar mainīgajiem, ko izstrādātāji izmanto savos avota kodā, un mazkoda veidotāji var konfigurēt savas vērtības.

Manifesta atbalstītie rekvizīti

Piemērs:

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

Rakstīt tīmekļa veidnes kodu

Ja vēlaties paplašināt esošu lietošanai gatavu tīmekļa veidni, ieteicams izveidot tīmekļa veidnes kopiju un paplašināt kopiju, lai saglabātu avota kodu un novērstu datu zudumu.

Visi parametri tiek nodoti kā virknes. Kodā ir ieteicams pēc vajadzības parametra vērtības pārvērst par nepieciešamajiem tipiem. Parametru konvertēšanu var panākt, izmantojot Liquid filtrus.

Piemēri:

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

Tīmekļa veidnes komponenta konfigurēšana tīmekļa lapā

Kad ir izveidots tīmekļa veidnes komponents (ar manifesta sadaļu), jūs varat pievienot atbilstošu Liquid atsauci uz tīmekļa lapas kopiju (izmantojot Visual Studio Code tīmeklim, Visual Studio Code, portāla pārvaldības programmu vai citas metodes), kas atbilst dažādiem parametriem, kā parādīts šajā piemērā:

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

Parametrus varat konfigurēt tieši noformējuma studijā. Šādi profesionāls izstrādātājs var būvēt progresīvos komponentus, izmantojot tīmekļa veidnes, ko mazkoda veidotāji var konfigurēt, izmantojot noformējuma studiju.

Zināmās problēmas un ierobežojumi

Tīmekļa veidnes komponentu ligzdošana citos tīmekļa veidnes komponentos netiek atbalstīta.

Nākamā darbība

Kā izveidot tīmekļa veidnes komponentu

Skatiet arī

• Rādīt produktu atsauksmes kā Kartes
• Atrašanās vietu rādīšana Kartes formātā
• Ierakstu parādīšana karuseļa veidā