Extending templates¶

Template inheritance allows you to build a base “skeleton” template that contains all the common elements of your site and defines blocks that child templates can override.

It’s easiest to understand template inheritance by starting with an example:

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css" /> <title> <? Chano :: block ( 'title' ) ?> My amazing site <? Chano :: endblock () ?> </title> </head> <body> <div id="sidebar"> <? Chano :: block ( 'sidebar' ) ?> <ul> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> </ul> <? Chano :: endblock () ?> </div> <div id="content"> <? Chano :: block ( 'content' ) ?><? Chano :: endblock () ?> </div> </body> </html>

This template, which we’ll call base.php , defines a simple HTML skeleton document that you might use for a simple two-column page. It’s the job of “child” templates to fill the empty blocks with content.

In this example, the Chano::block() method defines three blocks that child templates can opt to fill in. A child template might look like this:

<? Chano :: extend () ?> <? Chano :: block ( 'title' ) ?> My amazing blog <? Chano :: endblock () ?> <? Chano :: block ( 'content' ) ?> <? foreach ( new Chano ( $blog_entries ) as $entry ) ?> <h2> <? = $entry -> title ?> </h2> <p> <? = $entry -> body ?> </p> <? endforeach ?> <? Chano :: endblock () ?> <? Chano :: endextend () ?><? require 'templates/base.php' ?>

The Chano::extend() method is the key here. It tells the template engine that the blocks inside the <?Chano::extend()?><?Chano::endextend()?> construct extends another template. Deciding which template a child template should extend is as simple as including that file right after the endextend() method.

Depending on the value of $blog_entries , the output might look like:

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css" /> <title>My amazing blog</title> </head> <body> <div id="sidebar"> <ul> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> </ul> </div> <div id="content"> <h2>Entry one</h2> <p>This is my first entry.</p> <h2>Entry two</h2> <p>This is my second entry.</p> </div> </body> </html>