2022-12-21 04:20:11 +00:00
|
|
|
# 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*
|
|
|
|
|
```html
|
|
|
|
|
<!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*
|
|
|
|
|
```html
|
|
|
|
|
{% 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 :
|
|
|
|
|
```html
|
|
|
|
|
<!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*
|
|
|
|
|
```html
|
|
|
|
|
{% extends "path/home" %}
|
|
|
|
|
|
|
|
|
|
{% section "header" %}{% endsection %}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
**[HTML]** Would render as such :
|
|
|
|
|
```html
|
|
|
|
|
<!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>
|
|
|
|
|
```
|
|
|
|
|
|
2023-02-01 18:20:42 +00:00
|
|
|
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*
|
|
|
|
|
```html
|
|
|
|
|
{% extends "path/home" %}
|
|
|
|
|
|
|
|
|
|
{% section "header" %}
|
|
|
|
|
<a href="#mylink">First link here !</a>
|
|
|
|
|
{% endsection %}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
*path/home-admin-nav.phtml*
|
|
|
|
|
```html
|
|
|
|
|
{% 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 :
|
|
|
|
|
```html
|
|
|
|
|
<h4>My new NAV header</h4>
|
|
|
|
|
<a href="#mylink">First link here !</a>
|
|
|
|
|
<a href="#mylink">Second link here !</a>
|
|
|
|
|
```
|
