Extending templates with extends and block

Start with a template that contains one or more blocks:

{# layout.html.oxip -#}

<!DOCTYPE html>
<main>
{%- block content %}
  <p>Parent content.</p>
{% endblock -%}
</main>

Then create a template to extend it:

{# your-content.html.oxip -#}

{% extends "layout.html.oxip" %}

This is essentially the same as using layout.html.oxip directly:

<!DOCTYPE html>
<main>
  <p>Parent content.</p>
</main>

Replace parent contents

You can choose to replace the contents of the parent block with a block with the same name:

  {# your-content.html.oxip -#}

  {% extends "layout.html.oxip" %}

+ {% block content %}
+   <p>Replaced content.</p>
+ {% endblock %}
  <!DOCTYPE html>
  <main>
-   <p>Parent content.</p>
+   <p>Replaced content.</p>
  </main>

For the same effect, you can be explicit with extends(replace):

  {# your-content.html.oxip -#}

- {% extends "layout.html.oxip" %}
+ {% extends(replace) "layout.html.oxip" %}

  {% block content %}
    <p>Replaced content.</p>
  {% endblock %}

Prefix parent contents

To prefix the contents of the parent, you can use extends(prefix):

  {# your-content.html.oxip -#}

- {% extends "layout.html.oxip" %}
+ {% extends(prefix) "layout.html.oxip" %}
+
+ {% block content %}
+   <p>Prefix.</p>
+ {% endblock %}
  <!DOCTYPE html>
  <main>
+   <p>Prefix.</p>
    <p>Parent content.</p>
  </main>

Suffix parent contents

To suffix the contents of the parent, you can use extends(suffix):

  {# your-content.html.oxip -#}

- {% extends "layout.html.oxip" %}
+ {% extends(suffix) "layout.html.oxip" %}
+
+ {% block content %}
+   <p>Suffix.</p>
+ {% endblock %}
  <!DOCTYPE html>
  <main>
    <p>Parent content.</p>
+   <p>Suffix.</p>
  </main>

Surround parent contents

To surround the contents of the parent, you can use extends(surround) and {% parent %}:

  {# your-content.html.oxip -#}

- {% extends "layout.html.oxip" %}
+ {% extends(surround) "layout.html.oxip" %}
+
+ {% block content %}
+   <p>Prefix.</p>
+ {% parent %}
+   <p>Suffix.</p>
+ {% endblock %}
  <!DOCTYPE html>
  <main>
+   <p>Prefix.</p>
    <p>Parent content.</p>
+   <p>Suffix.</p>
  </main>