Developers

Theme integration

A PageTree page is rendered with a layout from your theme. This page explains what that layout must contain and how to use the page data.

Layouts

Each page chooses its layout in the editor header. The list contains the layouts of the active theme. Nothing else is required: blocks are injected where {% page %} is, as for a CMS page.

The same layout is used by the back-office preview. A layout that renders correctly on its own therefore gives an accurate preview.

The {% styles %} and {% scripts %} tags

October CMS components placed as blocks declare their CSS and JavaScript files as on a CMS page. For them to be loaded, the layout must contain the standard tags:

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

The stylesheets of the built-in blocks, on the other hand, are added with the block HTML. They do not depend on these tags.

Render blocks in a CMS page

To render the blocks of a PageTree page in a CMS page of your theme, use the {% pagecomponent %} tag:

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

Blocks whose Displayed? checkbox is unchecked are not rendered. CMS component blocks are not rendered by this tag either: they only work in a PageTree page served at its own address.

The page finder

PageTree pages are available in the October CMS page finder (menus, link fields) under the Block Pages type. The generated URL is built from the page slug.

The this.page variables

PageTree fills the native properties of the CMS page. Themes that already use them work without changes.

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

The this.page.apiBag.pagetree_seo array contains, among others, meta_title, meta_description, og_title, og_description, og_image, canonical_url, robots, twitter_card, exclude_from_sitemap, slug, published_at and updated_at.

The pageTreeSeo component

For complete SEO tags, add the pageTreeSeo component ("PageTree SEO") to your layout and render it in the <head>:

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

It renders:

• the <title> tag, built with the title template from the settings (for example {title} | {site});
• the description and the robots directive;
• the canonical URL;
• the hreflang alternates (multisite);
• the Open Graph tags and the Twitter/X card;
• the WebPage and BreadcrumbList JSON-LD structured data.

Two component properties let you disable part of the output:

On regular CMS pages of the theme, the component uses their own meta_* properties. You can therefore place it in a shared layout.