Créer un modèle de page personnalisé

Notes

À compter du 12 octobre 2022, le portail Power Apps devient Power Pages. Plus d’informations : Microsoft Power Pages est maintenant généralement disponible (blog)
Nous allons bientôt migrer et fusionner la documentation des portails Power Apps avec la documentation de Power Pages.

Dans cet exemple, nous allons créer un modèle de page personnalisé avec Liquid et un modèle de page basé sur un modèle Web. Pour plus d'informations : Stocker le contenu source à l’aide de modèles Web Notre objectif consiste à créer un modèle simple à deux colonnes qui utilise un lien Web défini comme navigation du côté gauche, le contenu de la page étant à droite.

Étape 1 : créer un modèle Web et écrire le code du modèle Liquid

Tout d’abord, nous allons créer le Modèle Web et écrire le code du modèle Liquid. Nous sommes susceptibles de réutiliser certains éléments communs de ce modèle dans d’autres modèles. Par conséquent, nous allons créer un modèle de base commun que nous étendrons avec un modèle spécifique. Notre modèle de base fournira des liens vers des miniatures et le titre/l’en-tête de la page, et définira la disposition sur une colonne :

Conseil

Découvrez l’héritage de modèle en utilisant le bloc et les balises d’extension : Balises de modèle

Disposition sur deux colonnes (modèle Web)

<div class=container>
  <div class=page-heading>
    <ul class=breadcrumb>
      {% for crumb in page.breadcrumbs -%}
        <li>
          <a href={{ crumb.url }}>{{ crumb.title }}</a>
        </li>
      {% endfor -%}
      <li class=active>{{ page.title }}</li>
    </ul>
    <div class=page-header>
      <h1>{{ page.title }}</h1>
    </div>
  </div>
  <div class=row>
    <div class=col-sm-4 col-lg-3>
      {% block sidebar %}{% endblock %}
    </div>
    <div class=col-sm-8 col-lg-9>
      {% block content %}{% endblock %}
    </div>
  </div>
</div>

Étape 2 : créer un modèle Web qui étend notre modèle de disposition de base

Utilisez le jeu de liens de navigation Web associé à la page actuelle des liens de navigation pour créer un modèle Web qui étend notre modèle de disposition de base.

Conseil

Familiarisez-vous avec la procédure de chargement de jeux de liens Web à l’aide de l’objet weblinks.

Navigation à gauche des liens Web (modèle Web)

{% extends 'Two Column Layout' %}

{% block sidebar %}
  {% assign weblinkset_id = page.adx_navigation.id %}
  {% if weblinkset_id %}
    {% assign nav = weblinks[page.adx_navigation.id] %}
    {% if nav %}
      <div class=list-group>
        {% for link in nav.weblinks %}
          <a class=list-group-item href={{ link.url }}>
            {{ link.name }}
          </a>
        {% endfor %}
      </div>
    {% endif %}
  {% endif %}
{% endblock %}

{% block content %}
  <div class=page-copy>
    {{ page.adx_copy }}
  </div>
{% endblock %}

Étape 3 : créer un modèle de page basé sur le modèle Web

Dans cette étape, nous allons créer un modèle de page basé sur le modèle Web que nous avons créé à l’étape précédente.

Étape 4 : créer une page Web pour afficher le contenu

1. Créez une page Web qui utilise notre modèle de page.

   

2. Accédez à la page Web du contenu localisé.

   

3. Accédez à la section Divers et sélectionnez le jeu de liens Web que vous souhaitez afficher dans le champ Navigation.

   

4. Lorsque vous affichez maintenant votre page, vous devriez voir la navigation latérale.

   

Voir aussi

Créer un modèle de page personnalisé pour afficher un flux RSS
Afficher la liste associée à la page active
Afficher un en-tête de site Web et une barre de navigation principale
Afficher jusqu’à trois niveaux de hiérarchie de page à l’aide de la navigation hybride

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).