Support template inheritance and sections

dmolineus commented 10 years ago

As @psren proposed Plates as the template engine here #6410, at least the features of inheritance, sections should be implemented for the Contao template.

There is no BC break providing them. The next major version should use them in the core templates by default.

As you can see here, it's pretty easy to use it. I would provide an Pull Request if this feature is accepted.

HellPat commented 10 years ago

Ping :-)

leofeyer commented 10 years ago

If we should decide not to add Twig in Contao 3.3 (but only in Contao 4), I'll look into this.

HellPat commented 10 years ago

Thanks for giving Twig/Plates a try.

leofeyer commented 10 years ago

I just studied the "contao-template-extended" code and IMHO it adds a whole lot of unnecessary overhead. It seems that PHP templates is just to simple an approach for people – they tend to think way too complicated. E.g. this:

<?php // fe_custom.html5

$this->__tpl->layout('fe_page');
$this->footer = 'Custom footer';

The same can easily be accomplished with plain old PHP code:

<?php // fe_custom.html5

$this->footer = 'Custom footer';
include TL_ROOT . '/system/modules/core/templates/frontend/fe_page.html5';

Templates in Contao are PHP code already.

HellPat commented 10 years ago

One of the main benefits is block extending in my optionion.

If the core provides Blocks they could be easily overwritten. e.g. (Pseudo Code):

{% extend fe_page %}
{% block page_title %}
{{ page_title }} {{ page_root_title }}
{% endblock %}

I do not need to overwrite anything else. If any update in the template is made i don't need to update if i didn't change that specific part.

An other argument is that the template engines minimize the overhead by granular caching of the templates. It shouldn't get too big.

leofeyer commented 10 years ago

I've read through Plates and want to outline how the features can be accomplished with vanilla PHP in Contao.

Layouts

<?php

$this->footer = 'Custom footer';
include $this->getTemplate('fe_page');

Nesting

<?php

$t = new FrontendTemplate('complex_template');
$t->variable = 'Some value';
echo $t->parse();

// Or for simple templates
include TL_ROOT . '/path/to/simple_template.html5';

Sections

<?php

ob_start(); ?>

<h1>Welcome!</h1>
<p>Hello <?= $this->name ?></p>

<?php

$this->footer = ob_get_clean();
include $this->getTemplate('fe_page');

After all, it seems that the requested features are available already.

leofeyer commented 10 years ago

I have added template inheritance as used in Twig in 2987752222d6458aed2b041d227b482b98ad6c66:

Template fe_base.html5:

<!DOCTYPE html>
<html>
<head>
  <?php $this->block('head'); ?>
    <link rel="stylesheet" href="style.css">
    <title><?php echo $this->title; ?></title>
  <?php $this->endblock(); ?>
</head>
<body>
  <div id="content">
    <?php $this->block('content'); ?>
      <p>I am the default content.</p>
    <?php $this->endblock(); ?>
  </div>
</body>
</html>

Template fe_custom.html5:

<?php $this->extend('fe_base'); ?>

<?php $this->block('head'); ?>
  <?php $this->parent(); ?>
  <link rel="stylesheet" href="style_2.css">
<?php $this->endblock(); ?>

<?php $this->block('content'); ?>
  <p>I am the changed content.</p>
<?php $this->endblock(); ?>

The output of the fe_custom.html5 template is:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <title>The title</title>
  <link rel="stylesheet" href="style_2.css">
</head>
<body>
  <div id="content">
    <p>I am the changed content.</p>
  </div>
</body>
</html>

I have also added a convenience method to nest templates:

<div class="ce_text">
  <?php $this->insert('ce_text_default'); ?>
</div>

Or if you need to assign variables:

<div class="ce_text">
  <?php $this->insert('ce_text_default', array('title'=>'My custom title')); ?>
</div>

Now the only question is if and how we should adjust the existing core templates (mainly fe_page I guess)? @contao/workgroup-core @tristanlins @discordier @frontendschlampe

Serhii-DV commented 10 years ago

I think it's a great feature for templates. But, what about insert tags alternative? For example, this code could be used in custom html module.

{{extend::fe_base}}

{{block::head}}
  {{block::parent}}
  <link rel="stylesheet" href="style_2.css">
{{endblock}}

{{block::content}}
  <p>I am the changed content.</p>
{{endblock}}

<div class="ce_text">
   {{insert::ce_text_default?title=My title&text=Some text}}
</div>

leofeyer commented 10 years ago

You are jumbling things up. The templating language is PHP, not "insert tags". Please check out Plates for more information.

lionel-m commented 9 years ago

@leofeyer Can I use your examples above for the Contao documentation?

leofeyer commented 9 years ago

Yes, sure.

lionel-m commented 9 years ago

Ok thanks

contao / core