@lay() directive is similiar to the @template() directive.
While @template loads a full layout from a file, the @lay() directive picks a
layout from a list of layouts within a template file. It works in pairs along with the @layout:
directive which is used to sectionalize a template file which is expected to be loaded later. A sample of usage is when the footer and header section of a
page is saved together in a single page each with its own unique id which can be used to import the specific layout later where it is only required.
The example below shows how to apply this template directive.
@layout:header
</header> This is header text </header>
@layout;
@layout:footer
</footer> This is footer text </footer>
@layout;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
@lay('sections:header')
// other contents here...
@lay('sections:footer')
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header> This is my page header </header>
<footer> This is my page footer </footer>
</body>
</html>
@layout: is the directive
for sectionalizing a template file. The @lay() is the directive
for importing the section of another template file. The header and
footer are uniquely short alphanumeric ids that are used to link to the section of a template
file that is expected to be imported. The benefits of the @layout:
directive is that it can be applied in real web pages as it is never displayed as part of a resolved template.
This makes it easier to copy the section of a webpage to another webpage or template file.