Creazione dei modelli Web

Completato

Per creare modelli di pagina personalizzati è possibile usare la riga Modello Web, che è fondamentalmente un modello di layout. Ad esempio, se un modello Web include HTML statico, l'elemento HTML viene visualizzato così com'è nell'output della pagina che usa tale modello. Il vero vantaggio dei modelli Web è dato dalla capacità di contenere codice Liquid, che aggiunge funzionalità di elaborazione al contenuto statico, incluso l'accesso ai dati di Dataverse.

Modello Web è una semplice tabella che contiene le seguenti colonne:

• Nome: quando un modello è incluso in altri contenuti o esteso da altri modelli, viene indicato con questo nome.

• Sito Web: riga del sito Web in cui si usa il modello.

• Origine: il contenuto di origine del modello. Può essere testo statico, un frammento HTML o, più spesso, un layout creato con Liquid.

• Tipo MIME: definisce il tipo MIME (Multipurpose Internet Mail Extensions) che il server invia al client quando viene eseguito il rendering del modello. Se non si fornisce un valore, si presume che sia text/html, che è un tipo standard per le pagine HTML. È possibile creare un modello Web con rendering di contenuti specializzati. Ad esempio, è possibile creare un modello Web che restituisce alcuni dati di Microsoft Dataverse in formato json. In questo caso, il tipo MIME è impostato su application/json.

Gestione dei modelli Web

Le implementazioni Liquid nei siti Web Power Pages contengono numerosi tag di modello che aiutano a gestire i modelli e a promuovere l'uso ripetuto.

Tag FetchXML

Il tag fetchxml consente agli utenti di eseguire query sui dati di Dataverse e il rendering dei risultati in una pagina.

{% fetchxml varResults %}
<!— Fetchxml query -->
<fetch>
  <entity name="account">
    <attribute name="name" />
  </entity>
</fetch>
{% endfetchxml %}

La variabile varResults contiene i risultati della query.

{% for account in varResults.results.entities %} 
  <p>{{ account.name }}</p>
{% endfor %}

Importante

Le autorizzazioni di tabella vengono sempre applicate ai dati recuperati usando Liquid, incluso il tag fetchxml.

Tag Comment

Con il tag comment non viene eseguito il rendering dei contenuti all'interno del blocco, né il codice Liquid associato. Questo tag è utile per includere commenti estesi in modelli complessi e per escludere temporaneamente i blocchi di codice durante la risoluzione dei problemi.

This is a {% comment %}very useful {% endcomment %}comment.

La logica precedente genera il seguente risultato:

This is a comment.

Tag Raw

Il tag raw consente di restituire l'output del codice Liquid in una pagina senza che sia analizzato e implementato. Questo tag è utile per generare contenuti che usano sintassi lato client in conflitto, come handlebars. È utile anche quando il contenuto della pagina deve includere frammenti di codice Liquid, ad esempio un articolo della Knowledge Base che discute l'uso del linguaggio Liquid e include esempi.

Hello, {% raw %}{{ user.fullname }}.{% endraw %} Nice to meet you.

La logica precedente genera il seguente risultato:

Hello, {{ user.fullname }}. Nice to meet you.

È importante notare che il rendering di user.fullname si esegue esplicitamente invece di essere elaborato come istruzione Liquid e convertito nel nome effettivo dell'utente.

Tag Include

Il tag include inserisce il contenuto di un modello in un altro, in base al nome. Questo tag consente di riusare frammenti di modelli comuni in più scenari, ad esempio il rendering dei collegamenti ai social. Il modello incluso ha accesso a tutte le variabili definite nel modello padre e consente l'uso di parametri.

{% include 'Breadcrumbs', separator: '>' %}

Questa logica include l'output generato dal modello Breadcrumbs che ha una variabile separator impostata sul simbolo di parentesi uncinata chiusa (>).

Tag Block

Con il tag block è possibile definire un blocco all'interno di un modello, definendo un'area che, se necessario, può essere sovrascritta dai modelli che estendono il modello corrente.

Tag Extend

Quando viene usato assieme al tag block, il tag extend fornisce l'ereditarietà del modello. Questo tag consente a più modelli di usare un layout condiviso sovrascrivendo aree specifiche del layout padre. Quando viene usato, extend deve essere il primo contenuto nel modello e può essere seguito solo da uno o più tag block.

Modello di base

La logica del modello di base è la seguente:

<div>
Hello
{% block content %}default content{% endblock %}
</div>

Modello figlio

La logica del modello figlio è la seguente:

{% extends 'Base Template' %}
{% block content %}Power Pages websites{% endblock%}

Il modello figlio genera il seguente output:

<div>
  Hello
  Power Pages websites
</div>

I tag extend e block vengono usati in genere per separare i modelli di layout e di contenuto. I modelli padre o di base di solito definiscono un layout di pagina generale, ad esempio specificando se si tratta di una pagina con una o due colonne. I modelli figlio che estendono il modello di base possono definire solo il contenuto dei blocchi come specificato dal padre.

Per un esempio completo di codice Liquid che mostra l'ereditarietà del modello con i tag block/extend e include, consultare Layout di pagina personalizzati in Power Pages.

Procedure consigliate per i modelli Web

Per migliorare la struttura dei modelli e rendere più gestibili i modelli Web, seguire queste indicazioni:

• Scegliere nomi descrittivi per i modelli perché saranno indicati o inclusi in altri modelli.

• Suddividere il layout della pagina e separare il layout dal contenuto. Questi layout sono i candidati per i modelli estendibili.

• Cercare frammenti ripetibili e riusabili; possono essere definiti come modelli secondari e useranno il tag include.

• Usare il tag include per promuovere il riuso del layout e dei frammenti JavaScript di uso comune. Rendere i modelli JavaScript "intelligenti" usando i parametri disponibili nel tag include. Questi frammenti vengono incorporati.

• Spostare i blocchi JavaScript più grandi e riusabili in file separati e inserirli invece come riferimento. Il browser del client li carica separatamente e possono essere memorizzati nella cache. Inoltre, è possibile comprimere gli script caricati esternamente, con un impatto positivo sulle prestazioni.

• Trovare le parti della pagina che devono essere tradotte per l'implementazione multilingue. Definire queste pagine come contenuto della pagina o frammenti di contenuto.

• Identificare i frammenti modificabili. Individuare le parti della pagina Web di cui si vuole assegnare la responsabilità per la gestione e la manutenzione dei contenuti agli utenti.

• Creare un layout ampio durante la creazione di un modello, ma evitare di inserire troppe righe vuote usando trattini nei tag, ad esempio:

  {%- if username -%}
    Hello, {{ user.firstname}}
  {%- endif -%}
  

• Usare il tag comments per descrivere le parti più complesse del modello.

• Studiare i modelli già distribuiti con il portale di avvio e cercare le tecniche Liquid in Layout di pagina personalizzati in Power Pages.

Durante il provisioning di un portale di avvio vengono installati numerosi modelli Liquid pronti per l'uso: Modelli Web incorporati. I loro nomi sono predefiniti e alcuni di questi modelli potrebbero non essere disponibili per la modifica.

Per altre informazioni, vedere Panoramica di Liquid.