PageTree demo by

Editing pages

Dynamic pages

Since 2.5, the URL of a page can contain parameters: one page then displays one record per address, like a blog post page at /blog/:slug.

What is a dynamic page?

A page whose URL contains a segment starting with : is a dynamic page. The page /blog/:slug answers /blog/my-first-post, /blog/autumn-news and so on: the blocks are the same, only the record they display changes.

It works like a CMS page of your theme with url = "/blog/:slug", but the page is built with blocks in the Editor.

URL syntax

The URL uses the October CMS syntax:

URLMeaning
/blog/:slugRequired parameter.
/blog/:page?Optional parameter: /blog is also served.
/blog/:page?1Optional parameter with a default value (1).
/product/:id|^[0-9]+$Parameter checked with a regular expression: /product/42 is served, /product/abc is not.
/docs/:path*Wildcard parameter: it takes the rest of the URL, slashes included (/docs/guide/install).

The URL is checked on save. Two rules are enforced:

  • the home page (/) cannot be dynamic;
  • two pages cannot use the same pattern with different parameter names (/blog/:slug and /blog/:name).

Which page is served?

Dynamic pages are matched last:

  1. the CMS pages of the theme;
  2. the static PageTree pages (URL without parameter);
  3. the dynamic PageTree pages. Between them, the most specific URL wins.

So /blog/archive keeps its own page even if /blog/:slug exists. Unlike a static PageTree page, a dynamic page never takes over the URL of a CMS page of the theme.

The visibility rule is the same as for any page (Active, Published, publication date): see Publishing and URLs.

Display the record of the URL

The parameters reach the blocks in three ways:

  • Custom blocks: a data source can be filtered by a URL parameter and return a single record. This is the usual way to build a dynamic page. See Filter by URL parameter.
  • Block templates read the parameters with this.param, for example {{ this.param.slug }}.
  • CMS components placed as blocks accept {{ :slug }} in their properties, as on a CMS page. A RainLab.Blog post component, for example, takes {{ :slug }} as its slug. See CMS components as blocks.

When no record matches

A data source with the Show the 404 page when there is no result option turns the page into the 404 page of the theme, with the 404 status, when it finds nothing: /blog/unknown is a real “page not found”.

  • The option only applies to dynamic pages: a static page is never turned into a 404.
  • In the edit mode on the website, the page stays displayed so it can still be edited.
  • An optional parameter left out of the URL does not filter: a list shows every record, a single record source is empty.

Preview with sample values

In the Editor, the preview has no URL. To see the page with a real record, choose the values of its parameters:

  1. Click Preview with… in the preview toolbar.
  2. For each parameter, pick a value among the records of the filtered data sources, or type one. Values are grouped by source, with the blocks that read them.
  3. The preview is rendered again with these values; the button then shows them (Preview with: my-first-post).

The values are saved with the page and shared by all its blocks. Open page opens the website at the URL built with them. They are not part of the history: changing them records no version.

The panel warns when a parameter is filtered on several models (one URL can only match one of them), and when a block filters on a parameter missing from the URL of the page: that filter is then ignored.

SEO of a dynamic page

The title and description of a dynamic page can follow the displayed record, with tokens such as {{ post.title }} in the SEO fields, or with a data source used for the page SEO. See SEO.

Example: a blog

Blog posts are stored in a Tailor section Blog\Post.

  1. Create a custom block Article with a data source post (Tailor Blog\Post), filtered on the column slug by the URL parameter slug, with Single record and Show the 404 page when there is no result checked. Its template:
    <article>
        <h1>{{ post.title }}</h1>
        {{ post.content|raw }}
    </article>
  2. Create a page with the URL /blog/:slug and add the Article block.
  3. Click Preview with… and choose a post to check the page.
  4. In the SEO settings, set the meta title to {{ post.title }} | My blog.

/blog/my-first-post shows that post with its title in the browser tab, /blog/unknown shows the 404 page.