Créer des modèles web

12 minutes

Pour créer des modèles de page personnalisés, vous pouvez utiliser la ligne de modèle web, qui se rapproche fortement d’un modèle de disposition. Par exemple, si un modèle web inclut du contenu HTML statique, ce contenu HTML est affiché tel quel dans la sortie de page qui utilise ce modèle. La véritable puissance des modèles web vient de leur capacité à contenir du code Liquid, qui ajoute des fonctionnalités de traitement au contenu statique, notamment l’accès aux données Dataverse.

Modèle web est une table simple qui contient les colonnes suivantes :

Nom : lorsqu’un modèle est inclus dans un autre contenu ou étendu par d’autres modèles, il est désigné par ce nom.
Site web : ligne de site web où le modèle est utilisé.
Source : contenu source du modèle. Il peut s’agir d’un texte statique, d’un fragment HTML ou (le plus souvent) d’une disposition utilisant Liquid.
Type MIME : définit le protocole MIME (Multipurpose Internet Mail Extensions, Extensions multifonctions du courrier Internet) que le serveur envoie au client lors de l’affichage du modèle. Si aucune valeur n’est fournie, la valeur est supposée être text/html, à savoir un type standard pour les pages HTML. Vous pouvez créer un modèle web qui affiche du contenu spécialisé. Par exemple, vous pouvez créer un modèle web qui renvoie certaines données Microsoft Dataverse au format json. Dans ce cas, le type MIME serait défini sur application/json.

Gestion des modèles web

Les implémentations Liquid dans les sites web Power Pages comportent plusieurs balises de modèles qui permettent de gérer les modèles et favorisent leur réutilisation.

Balise FetchXML

La balise fetchxml permet aux utilisateurs d’interroger des données Dataverse et affiche les résultats sur une page.

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

La variable varResults contient les résultats de la requête.

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

Important

Les autorisations de table sont toujours appliquées aux données récupérées à l’aide de balises Liquid, notamment fetchxml.

Balise comment

Avec la balise comment, aucun contenu du bloc n’est affiché et aucun code Liquid interne n’est exécuté. Cette balise est utile pour inclure des commentaires étendus dans des modèles complexes et pour commenter temporairement des blocs de code lorsque vous résolvez des problèmes.

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

La logique précédente génère le résultat suivant :

Ceci est un commentaire.

Balise raw

La balise raw permet la sortie de code Liquid sur une page sans analyse ni implémentation préalable. Cette balise est utile pour générer du contenu qui utilise une syntaxe côté client conflictuelle, comme Handlebars. Elle est également utile lorsque le contenu de la page doit inclure des fragments de code Liquid, comme un article de base de connaissances qui traite de l’utilisation du langage Liquid et inclut des exemples.

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

La logique précédente génère le résultat suivant :

Bonjour, {{ user.fullname }}. Enchanté.

Notez comment user.fullname s’affiche de façon explicite au lieu d’être traité comme une instruction Liquid et converti en nom réel de l’utilisateur.

Balise include

La balise include inclut les contenus d’un modèle dans un autre, par nom. Cette balise permet de réutiliser des fragments de modèles courants à plusieurs endroits, tels que l’affichage de liens sociaux. Le modèle inclus a accès à toutes les variables définies dans le modèle parent, et il est possible de transmettre des paramètres.

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

Cette logique inclut la sortie générée par le modèle Breadcrumbs qui aura une variable separator définie sur le symbole du signe supérieur (>).

Balise block

À l’aide de la balise block, vous pouvez définir un bloc dans un modèle, ce qui définit une région susceptible d’être remplacée par les modèles qui étendent le modèle actuel.

Balise extend

Lorsqu’elle est utilisée avec la balise block, la balise extend fournit l’héritage du modèle. Cette balise permet à plusieurs modèles d’utiliser une disposition partagée, tout en remplaçant des zones spécifiques de la disposition parent. Quand la balise extend est utilisée, elle doit constituer le premier contenu du modèle et ne peut être suivie que par une ou plusieurs balises block.

Modèle de base

La logique du modèle de base est la suivante :

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

Modèle enfant

La logique du modèle enfant est la suivante :

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

Le modèle enfant génère la sortie suivante :

<div>
  Hello
  Power Pages websites
</div>

L’utilisation typique des balises extend et block consiste à séparer les modèles de disposition et de contenu. Les modèles parent ou de base définissent généralement une disposition étendue, par exemple s’il s’agit d’une page à une seule colonne ou à deux colonnes. Les modèles enfant qui étendent la base peuvent uniquement définir le contenu des blocs comme spécifié par le parent.

Pour examiner un exemple complet de code Liquid illustrant l’héritage de modèles avec les balises block/extend et include, consultez Modèles de page personnalisés dans Power Pages.

Bonnes pratiques en matière de modèles web

Pour améliorer la structure des modèles et rendre les modèles web plus faciles à gérer, assurez-vous de suivre les instructions suivantes :

Choisissez des noms descriptifs pour vos modèles, car ils seront référencés ou inclus dans d’autres modèles.
Décomposez la disposition de page et séparez la disposition du contenu. Ces dispositions sont des candidates pour les modèles extensibles.
Recherchez les fragments reproductibles et réutilisables, qui peuvent être définis comme sous-modèles et utilisent la balise include.
Utilisez la balise include pour réutiliser la disposition et les fragments JavaScript couramment utilisés. Rendez vos modèles JavaScript « intelligents » à l’aide des paramètres disponibles dans la balise include. Ces fragments sont insérés en ligne.
Déplacez de plus gros blocs réutilisables de code JavaScript pour séparer les fichiers et insérez-les à la place comme référence. Le navigateur du client les charge séparément et ils peuvent être mis en cache. De plus, vous pouvez réduire les scripts chargés en externe, ce qui se traduira par de meilleures performances.
Localisez les parties de la page qui doivent être traduites pour une implémentation multilingue. Définissez ces pages en tant que contenu de page ou extraits de contenu.
Identifiez les fragments modifiables. Déterminez les parties de la page web pour lesquelles vous souhaitez que les utilisateurs soient responsables de la gestion et de la maintenance du contenu.
Lors de la création d’un modèle, soyez généreux avec la disposition, mais évitez les lignes blanches excessives en utilisant des tirets dans vos balises, par exemple :
```
{%- if username -%}
  Hello, {{ user.firstname}}
{%- endif -%}
```
Utilisez la balise comments pour décrire les parties complexes du modèle.
Étudiez les modèles déjà déployés avec le portail de démarrage et recherchez les techniques Liquid dans Modèles de page personnalisés dans Power Pages.

De nombreux modèles Liquid prêts à l’emploi sont installés lorsque vous approvisionnez un portail de démarrage : Modèles web intégrés. Leurs noms sont fixes et certains modèles peuvent ne pas être disponibles pour modification.

Pour en savoir plus, consultez Vue d’ensemble de Liquid.

Continuer