4.3 KiB
Control structure - extends / section
A nice feature of most robust templating engine is the ability to inherit from other view.
Picea follows a similar train of tought, since it's also possible create a chain of inheritance
using extends which have definable parts you can declare using section.
Basic extends (string $path)
You must provide a valid $path from which the template will be inherited.
[PICEA] So, using this code:
path/base/layout.phtml
<!DOCTYPE html>
<html>
<head>
{% section "head" %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title() }} - AnExampleApp</title>
{% section %}
</head>
<body>
<header id="header"">
{% section "header" %}{% view "path/base/navigation" %}{% endsection %}
</header>
<main id="main">{% section "main" %}{% endsection %}</main>
<footer id="footer">
{% section "footer" %}
© Copyright {{ date('Y') }}
{% endsection %}
</footer>
</body>
</html>
path/home.phtml
{% extends "path/base/layout" %}
{% title "Home page" %}
{% section "main" %}
<h1>Welcome !</h1>
{# @TODO integrate our new blog engine below ! #}
<article>
This is our new blog ! We hope you are gonna enjoy your stay on our new platform !
</article>
{% endsection %}
[HTML] Would render as such :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home page - AnExampleApp</title>
</head>
<body>
<header id="header"">
<nav>
<a href="#home">Home</a>
<a href="#login">Login</a>
</nav>
</header>
<main id="main">
<h1>Welcome !</h1>
<article>
This is our new blog ! We hope you are gonna enjoy your stay on our new platform !
</article>
</main>
<footer id="footer">
© Copyright 2022
</footer>
</body>
</html>
Inherit an already extended view
We could use the previous file path/home and generate, let's say, the same page, but without a navigation menu.
[PICEA] So, using this code:
path/home-navless.phtml
{% extends "path/home" %}
{% section "header" %}{% endsection %}
[HTML] Would render as such :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home page - AnExampleApp</title>
</head>
<body>
<header id="header""></header>
<main id="main">
<h1>Welcome !</h1>
<article>
This is our new blog ! We hope you are gonna enjoy your stay on our new platform !
</article>
</main>
<footer id="footer">
© Copyright 2022
</footer>
</body>
</html>
Notice that the <header> tag is now empty, since we've redeclared it in our navless view.
Overview of section (string $name, array $options)
In your $name variable, accepted characters are alpha-numeric and those specific caracters : .-_:, so
names suches as :
`body.content`
`my-cool-section:heading`
`MyOtherSection`
`_another_accepted_name`
Allowed options are :
string `action` : allowed are `prepend`, `default`, `append`
int `order` : if you must
Actions can also be passed using specials tokens :
section.prepend and section.append can also be used without passing an action option.
path/home-nav.phtml
{% extends "path/home" %}
{% section "header" %}
<a href="#mylink">First link here !</a>
{% endsection %}
path/home-admin-nav.phtml
{% extends "path/home-nav" %}
{% section.prepend "header" %}
<h4>My new NAV header</h4>
{% endsection %}
{% section.append "header" %}
<a href="#mylink">Second link here !</a>
{% endsection %}
[HTML] Would render as such :
<h4>My new NAV header</h4>
<a href="#mylink">First link here !</a>
<a href="#mylink">Second link here !</a>