Créer un modèle de page personnalisé

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 :

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.

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