How to define variable in layout, and setting the variable in page

[desbear]

I give a variable in my layout.
<main class="<?= $pageclass?>">
Then I create a page use this layout, define the variable in the page.
<? $pageclass => 'someclass'?>
but the output of the page didn't show the class name.

[johanjanssens]

Variables you define in a page, or a layout only exist in the context of that layout or page. This is done to prevent collisions between variables names. To pass a variable from a page to the layout you do the following:

In your page

To pass the variables to the page you need to define them as part of the @layout attribute. By default its written as @layout: [/path/to/file] however you can also use the expanded notation to pass in additional properties, in that case you do the following:

@layout:
    path: /default
    foo: bar 
    classes:
        a: b
        x: y
    callout: false

The path is the path of the layout and is a protected name, you cannot use that as a variable, all the rest you can choose freely. In this example I set 3 variables:

• foo
• classes
• callout

In your layout

In your layout you can now just use these variables:

<?= $foo ?>
<?= $classes ?>
<?= $callout ?>

You can also make define defaults in your layout. Your code could then look like:

---
@layout: /index
foo:  
classes: []
callout: true
---

<?= $foo ?>
<?= $classes ?>
<?= $callout ?>

Note that since 0.21 you can also define the defaults in partials: #703.

Advanced

There also is a layout() function that gives you access to the layout properties at runtime. This function returns a config object and contains all properties and their merged values.

It allows you to dynamically inspect the layout properties, add new properties and override existing ones, giving you full control. I do recommend to use the frontmatter approach as the default approach and use layout() only for more advanced requirements.

For more info: #540

[desbear]

Than you ~ :)
I define the layout like this screenshot.

And this is the page

but the output is

Did I do something wrong?

[johanjanssens]

In the second screenshot you have layout twice: layout and @layout. Pages is picking up the first one, removing it should solve it. Please note that this requires at least 0.21.

To learn about the meaning of the @ and the difference between a frontmatter attribute and a frontmatter property please read: #700

[desbear]

Hi johanjanssens
thank U again.

I remove the first layout. but still not work.
my com_pages version is 0.22.4

[waseemsadiq]

@desbear

In the Layout where you want to render the class name:

In the Page where you want to set the class name:

Result:

[desbear]

thank you~! it's work~!