PageTree démo by

Prise en main

Thème et layouts

PageTree fournit le contenu de la page : les blocs. Votre thème fournit tout le reste. Pour qu’une page s’affiche, le thème actif doit avoir au moins un layout.

Le rôle du layout

Un layout est le gabarit commun à vos pages : la structure HTML, les feuilles de style, l’en-tête, le menu et le pied de page. Il contient la balise {% page %}, qui marque l’endroit où le contenu de la page s’insère.

Pour une page PageTree, ce contenu est la liste de ses blocs. Le reste de l’écran vient du layout.

  • Les layouts sont des fichiers .htm du dossier layouts de votre thème, par exemple themes/mon-theme/layouts/default.htm.
  • Dans le back-office en français, October CMS les appelle Maquettes : Editeur, section CMS, Maquettes.
  • Un thème qui affiche déjà des pages CMS a déjà des layouts. PageTree les réutilise tels quels.

Choisir le layout de chaque page

Le layout se choisit page par page, dans le champ Layout de l’en-tête de la page.

  • La liste contient les layouts du thème actif. Chaque layout y apparaît sous sa description, ou sous son nom de fichier s’il n’en a pas.
  • L’aperçu de l’éditeur utilise le même layout que le site.
  • Vous pouvez avoir plusieurs layouts, par exemple un pour l’accueil et un pour les pages intérieures.

Choisissez toujours un layout. Sans layout (Sélectionner un layout), la page affiche le HTML des blocs seul, sans en-tête, sans menu et sans les styles du thème.

Un layout minimal

Voici un layout complet et fonctionnel. Enregistrez-le dans layouts/default.htm, ou créez-le depuis Editeur → CMS → Maquettes.

description = "Page standard"

[pageTreeSeo]
==
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% component 'pageTreeSeo' %}
    <link rel="stylesheet" href="{{ 'assets/css/theme.css'|theme }}">
    {% styles %}
</head>
<body>
    <header><!-- logo, menu --></header>
    <main>
        {% page %}
    </main>
    <footer><!-- pied de page --></footer>
    {% framework extras %}
    {% scripts %}
</body>
</html>
ÉlémentRôleObligatoire
{% page %}Emplacement des blocs de la page.Oui
descriptionNom du layout dans la liste Layout de l’éditeur.Non, conseillé
{% styles %}Feuilles de style des composants CMS placés comme blocs.Oui si vous utilisez des composants CMS
{% scripts %}Scripts des composants CMS placés comme blocs.Oui si vous utilisez des composants CMS
{% framework extras %}Framework AJAX d’October CMS, utilisé par les composants qui envoient des formulaires sans recharger la page.Seulement pour ces composants
[pageTreeSeo] et {% component 'pageTreeSeo' %}Balise <title>, description, URL canonique, Open Graph, carte Twitter/X, JSON-LD.Non, conseillé

Le composant pageTreeSeo écrit lui-même la balise <title> : n’en ajoutez pas une deuxième dans le layout. Ses options sont décrites dans Intégration au thème.

Les styles des blocs

Vous n’avez rien à ajouter pour les blocs intégrés : leur feuille de style est chargée avec leur HTML, quel que soit le layout. Ces styles sont volontairement légers : les règles de votre thème l’emportent toujours. Pour adapter les couleurs et les espacements à votre charte, voir Styles des blocs.

Vérifier votre layout

  1. Créez une page de test avec un bloc Bannière, choisissez votre layout et enregistrez.
  2. L’aperçu doit afficher l’en-tête et le pied de page du thème autour du bloc.
  3. Cliquez sur Ouvrir la page : le site doit afficher la même chose.

Si l’aperçu reste vide, vérifiez que le layout s’affiche correctement seul. Voir Dépannage.

Pour aller plus loin