Plantilles web com a components
Les plantilles web es poden crear i utilitzar com a components a les pàgines web per permetre als creadors utilitzar aquests components reutilitzables i proporcionar paràmetres que s'ajustin a les necessitats.
Com a desenvolupador, podeu crear una plantilla web per proporcionar funcionalitat específica que els creadors poden configurar mentre dissenyen pàgines web.
Per exemple, podeu crear els components (i altres) següents com a components de plantilla web que es poden configurar al taller de disseny:
- Llista d'ubicacions amb assignacions
- Visualització de carrussel
- Galeria d'imatges o vídeos
Per afegir un component a una pàgina web, podeu editar la pàgina utilitzant Visual Studio Code per al web i afegir un objecte d'incloure de Liquid a la còpia de pàgina:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Exemple:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Crear un component de plantilla web
Per crear un component de plantilla web al qual podeu permetre que un desenvolupador passi paràmetres, heu d'afegir una etiqueta {% manifest %} a la plantilla web. La secció de manifest descriu els paràmetres que podeu configurar per passar i utilitzar el codi de plantilla web.
El manifest és un objecte JSON que defineix les propietats de la plantilla web que es visualitza al estudi de disseny: tipus, nom de visualització, descripció, taules i paràmetres. Aquestes propietats de les plantilles web es poden utilitzar com a pont entre els desenvolupadors professionals i l'edició amb poc codi. Els paràmetres es relacionen amb variables que utilitzen els desenvolupadors al seu codi d'origen i els creadors amb poc codi poden configurar els seus valors.
Propietats admeses del manifest
| Propietat del manifest | Descripció |
|---|---|
| Type | S'ha d'establir com a Funcional. Funcional: afegiu el component de plantilla web mitjançant el procés Afegeix un component a Design Studio. |
| displayName | Nom descriptiu per al component de plantilla web, que s'obrirà al estudi de disseny. |
| descripció | Descripció del component de la plantilla web. |
| taules | Una matriu de taules de Dataverse que un creador pot utilitzar per navegar directament a l'espai de treball dades per editar la configuració de les taules o els registres. Les taules s'han de llistar amb el seu nom lògic. |
| paràmetres | Paràmetres amb propietats definides: id: matches utilitzada en el codi de la plantilla web i l'etiqueta d'inclusió de Liquid. displayName: Nom amigable a l'estudi de disseny. description: text curt que apareix a través d'un consell d'eina per proporcionar context als creadors que utilitzen el component. |
Exemple:
{% 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-->
Escriure codi de plantilla web
Si voleu ampliar una plantilla web de sèrie existent, us recomanem que creeu una còpia de la plantilla web i que amplieu la còpia per conservar el codi d'origen i evitar la pèrdua de dades.
Tots els paràmetres es passen com a cadenes. Al codi, es recomana convertir els valors de paràmetre als tipus desitjats segons calgui. La conversió de paràmetres es pot aconseguir amb filtres de Liquid.
Exemples:
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Configurar un component de plantilla web en una pàgina web
Quan es crea el component de la plantilla web (amb una secció de manifest), podeu afegir una referència corresponent de Liquid a la còpia de la pàgina web (mitjançant Visual Studio Code per al web, Visual Studio Code, aplicació d'administració del portal o altres mètodes) que passi els diferents paràmetres, tal com es mostra en aquest exemple:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Podeu configurar els paràmetres directament al estudi de disseny. D'aquesta manera, un desenvolupador professional pot crear components avançats mitjançant plantilles web que els creadors amb poc codi poden configurar amb el design studio.
Limitacions i problemes coneguts
La imbricació dels components de les plantilles web en altres components de plantilla web no està admesa.
Pas següent
Com crear un component de plantilla web