Block

A block is a section of html that is used in an extends mix file. It is like a template that will replace the block within the parent with matching names.

Parent

A parent file has one or more block elements, these elements will be replaced by elements within the child. We will create a parent file called main.mix. This will contain a block called content, which will also be found in the child except that the child's element will contain html.

<!doctype html>
<html>
  <head>
    <title>Horsepower</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <block name="content"></block>
  </body>
</html>

Child

A child file needs to extend a parent file, within the extends element will be one or more block elements. As you can see here we have a block element that has a name that is the same as the name within the parent and it also extends the file main (The .mix extension is optional). The block in the parent will then be replaced with this block. We will call this file child.mix

<extends file="main">
  <block name="content">
    <p>Welcome to my world!<p>
  </block>
</extends>

Result

When we run this code we will want to run the child file instead of the parent file.

Router.get('/', client => client.response.render('child.mix'))

After the code is executed we can see that the block has been replaced with the child element and we get html resulting in this.

<!doctype html>
<html>
  <head>
    <title>Horsepower</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Welcome to my world!<p>
  </body>
</html>