Développeurs

Intégration au thème

Une page PageTree est rendue avec un layout de votre thème. Cette page explique ce que ce layout doit contenir et comment exploiter les données de la page.

Les layouts

Chaque page choisit son layout dans l’en-tête de l’éditeur. La liste contient les layouts du thème actif. Rien d’autre n’est nécessaire : les blocs sont injectés à l’emplacement de {% page %}, comme pour une page CMS.

Le même layout sert à l’aperçu du back-office. Un layout qui s’affiche correctement seul donnera donc un aperçu fidèle.

Les balises {% styles %} et {% scripts %}

Les composants October CMS placés comme blocs déclarent leurs fichiers CSS et JavaScript comme sur une page CMS. Pour qu’ils soient chargés, le layout doit contenir les balises standard :

<head>
    {% styles %}
</head>
<body>
    {% page %}
    {% scripts %}
</body>

Les feuilles de style des blocs intégrés, elles, sont ajoutées avec le HTML des blocs. Elles ne dépendent pas de ces balises.

Afficher des blocs dans une page CMS

Pour afficher les blocs d’une page PageTree dans une page CMS de votre thème, utilisez la balise {% pagecomponent %} :

title = "Page personnalisée"
url = "/personnalisee"
layout = "default"
==
function onStart()
{
    $page = \LucasPalomba\PageTree\Models\Page::where('slug', 'ma-page')->first();
    $this['blocks'] = $page ? ($page->template['components'] ?? []) : [];
}
==
{% for block in blocks %}
    {% pagecomponent block %}
{% endfor %}

Les blocs dont la case Affiché ? est décochée ne sont pas rendus. Les blocs Composant CMS ne sont pas rendus non plus par cette balise : ils ne fonctionnent que dans une page PageTree servie à son adresse.

Le sélecteur de pages

Les pages PageTree sont disponibles dans le sélecteur de pages d’October CMS (menus, champs de lien) sous le type Block Pages. L’adresse générée est construite à partir du slug de la page.

Les variables this.page

PageTree remplit les propriétés natives de la page CMS. Les thèmes qui les utilisent déjà fonctionnent sans modification.

<title>{{ this.page.meta_title }}</title>
<meta name="description" content="{{ this.page.meta_description }}">

Le tableau this.page.apiBag.pagetree_seo contient notamment meta_title, meta_description, og_title, og_description, og_image, canonical_url, robots, twitter_card, exclude_from_sitemap, slug, published_at et updated_at.

Le composant pageTreeSeo

Pour des balises SEO complètes, ajoutez le composant pageTreeSeo (« PageTree SEO ») à votre layout et affichez-le dans le <head> :

[pageTreeSeo]
==
<head>
    {% component 'pageTreeSeo' %}
</head>

Il génère :

• la balise <title>, construite avec le modèle de titre des réglages (par exemple {title} | {site}) ;
• la description et la directive robots ;
• l’URL canonique ;
• les alternatives hreflang (multisite) ;
• les balises Open Graph et la carte Twitter/X ;
• les données structurées JSON-LD WebPage et BreadcrumbList.

Deux propriétés du composant permettent de désactiver une partie de la sortie :

Sur les pages CMS classiques du thème, le composant utilise leurs propres propriétés meta_*. Vous pouvez donc le placer dans un layout partagé.