Extend a template like Laravel Blade #286

devsrealm · 2021-08-16T04:53:06Z

devsrealm
Aug 16, 2021

Hey guys, is there any way I can extend a template in Plates like we do in Laravel Blade, here is an example:

example-template-layout.blade

<!DOCTYPE html>
<head>
@section('styles')
        <link rel="stylesheet" href="{{ URL::asset('css/style1.css') }}">
        <link rel="stylesheet" href="{{ URL::asset('css/style2.css') }}">
        <link rel="stylesheet" href="{{ URL::asset('css/dependencies/font-awesome-animation_0.3.0.css') }}">
@show
</head>

<body class="antialiased">

So, if I want to use this template in another file, I can easily do:

@extends('Core::layouts.beatstoreLayout')
...........................................................
...........................................................

and it would automatically show the styles for me, if I wanna override the style, I can also do it easily.

Is there something similar in Plate?

Thanks, and would be hopefully waiting for any reply from the community.

devsrealm · 2021-08-16T07:04:29Z

devsrealm
Aug 16, 2021
Author

After skimming through the codebase, I think I can somehow get it done with extensions, so, I'll have like a default styles or scripts, and I can make use of them in my templates plus a way to override them in other templates.

If anyone has a better idea, do let me know.

1 reply

devsrealm Aug 16, 2021
Author

If anyone is interested, here is a way of doing it, but it didn't quite solve the main problem:

Create an extension that has the following methods:

    /**
     * @param array $styles
     * @return string
     */
    public function styles(array $styles): string
    {

        #
        # Clean up styles array: Would replace any chars except a to Z, 0 to 9, underscore, dot, dash, and forwardslash
        #
        $styles = preg_replace(
            pattern: '/[^A-Za-z0-9_.\-\/]/',
            replacement: '',
            subject: $styles);

        return implode(PHP_EOL, array_map(function ($v) {
            return "<link rel='stylesheet' href='/$v'>";
        }, $styles));

    }

    /**
     * This would return the defaultStyles.
     * @param array $pop
     * You can select whatever styles you want by passing it to pop
     * @param array $add
     * Add additional styles
     * @return string
     */
    public function defaultStyles(array $pop = [], array $add = []): string
    {

        $defaultStyles = [
            'css/style1.css',
            'css/style2.css',
            'css/dependencies/font-awesome-animation_0.3.0.css'
        ];

        if ($pop){
            $defaultStyles = array_intersect($defaultStyles, $pop);
            if ($add){
                $defaultStyles = array_merge($defaultStyles, $add);
                return $this->styles($defaultStyles);
            }
            return $this->styles($defaultStyles);
        }

        return $this->styles($defaultStyles);

    }

To use the style in your template, you simply do:

<head>
    <?= $this->defaultStyles() ?>
</head>

To pop or select a style, you do:

<head>
    <?= $this->defaultStyles((['css/base/style1.css']) ?>
</head>

To select and at the same time add more styles, simply do:

<head>
    <?= $this->defaultStyles((['css/base/style1.css'], ['css/morestyles.css']) ?>
</head>

Off-topic: What is the state of Plate Engine?

ragboyjr · 2021-08-16T14:50:34Z

ragboyjr
Aug 16, 2021
Maintainer

I think you want to look at layouts. https://platesphp.com/templates/layouts/

5 replies

devsrealm Aug 16, 2021
Author

@ragboyjr I have but it doesn't solve the problem.

The way you currently handle it is you call sections within layout, and wherever you wanna use the section you need to do ..start...stop, at least, that is what the doc said.

Even with that, you'll still need to call ...start...stop on every file you wanna use that template, here is an example of how I think it should work:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?= $this->csrf(); ?>">
    <title><?=$this->e($title)?></title>

    <?php $this->start('styles') ?>
        <?= $this->asset()->styles('public', [
            'css/style1.css',
            'css/style2.css',
        ]) ?>
    <?php $this->stop() ?>

</head>


<body class="antialiased">

<?php $this->start('scripts') ?>
    <?= $this->asset()->scripts('public', [
        'js/script1.js',
        'js/scrip2.js',
    ]) ?>
<?php $this->stop() ?>

</body>

Maybe, we can create another method called show this way, to use the above template in other file would be as simple as doing:

<?php $this->layout('Core::layout1', ['title' => 'User Profile']) ?>

and that would get all the styles and scripts. To then override/pop/push, we can use the respective functions, do you get me now?

Edit: With the current implementation of the render method, I don't even think my propose problem can be solved unless I hack things myself. Maybe, I can extend the Template class and change the logic.

ragboyjr Aug 17, 2021
Maintainer

You would have to show me a more thorough example of what the all the templates would look like in plates vs their rendered html. I'm having a hard time fully understanding.

devsrealm Aug 17, 2021
Author

Okay, cool. Say, I am creating a store and I have the following layout:

storeLayout

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?= $this->csrf(); ?>">
    <title><?=$this->e($title)?></title>

    <?php $this->start('styles') ?>
        <?= $this->asset()->styles('public', [
            'css/style1.css',
            'css/style2.css',
        ]) ?>
    <?php $this->show() ?>

</head>

<body class="antialiased">

    <div class="content">

        <main class="main-area">
            <?=$this->section('content')?>
        </main>

    </div>

<?php $this->start('scripts') ?>
    <?= $this->asset()->scripts('public', [
        'js/script1.js',
        'js/scrip2.js',
    ]) ?>
<?php $this->show() ?>

</body>
</html>

Don't worry about the asset()-> functions, it is a function I created to recursively look for styles/scripts in the public folder.

Also, just to show you how it might work, I have changed $this->stop() to $this->show(), right now, this layout is useless, to consume it, I'll create a template:

storePage

<?php $this->layout('storeLayout', ['title' => 'User Profile']) ?>

<?php $this->start('content') ?>
-----------------------------------
-----------------------------------
-----------------------------------
<?php $this->stop() ?>

As you can see, in that section above, I am not using $this->show() at this point but $this->stop(), I'll explain how everything wires up below, for now, it should give us the following HTML:

<!DOCTYPE html>
   <html lang="en">
    
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="csrf-token" content="fd51fe9e7469c1143brberwrwrqwewgwadf5936dab5745">
   <title>User Profile</title>
   <link rel='stylesheet' href='/css/style1.css'>
   <link rel='stylesheet' href='/css/style2.css'>   
    </head>

   <body class="antialiased">

    <div class="content">

        <main class="main-area">
            ------------------------
            ------------------------
            ------------------------
        </main>

    </div>

   <link rel='stylesheet' href='/js/script1.js'>
   <link rel='stylesheet' href='/js/script2.js'>
    
</body>
</html>

The way it works is, whenever we have the start...show function, it should not wait to be called in other template, which means it would render whatever is in between the function when consumed in different templates, but this does not mean we can't override it or push and pop elements.

If we do things this way, then it would be less redundant to use the storeLayout across templates. Let me know if this is clear enough?

Edit: I didn't mention this, but I was able to replicate it this way:

In layout, I'll add the following:

<?php if($this->section('scripts')): ?>
    <?=$this->section('scripts')?>
<?php else: ?>
        <?= $this->asset()->scripts('public', [
        'js/script1.js',
        'js/scrip2.js',
    ]) ?>
<?php endif ?>

then in templates that is consuming layout, I won't need to write ...start...stop, but to override it, I can do:

<?php $this->start('scripts') ?>
    'YAYA'
<?php $this->stop() ?>

It works in some cases, but there isn't a simple way of referencing the parent element in the template.

ragboyjr Aug 18, 2021
Maintainer

OK, I believe I understand what you want. I reviewed the Laravel feature set, and you just want to imitate the functionality of section / show.

I agree, you can replicate with checking if ($this->section()), but it doesn't fully replicate the behavior. Being able to easily define the default section inline and allow the children templates to append/replace if wanting.

I'm not totally sure what the best syntax/scheme plates should use to replicate it.

Something that may work is:

// in layout
<?=$this->section('scripts', function() { ?> 
  // initial content goes here
<?php }) ?>

Then that would define and eventually yield the section content after being merged from the child.

devsrealm Aug 18, 2021
Author

Well, that syntax looks shorter and cool, the problem is, it would be kind of hard to differentiate:

<?=$this->section('scripts')?>

<?=$this->section('scripts', function() { ?> 
  // initial content goes here
<?php }) ?>

But I don't think it is bad, anyone using it would just have to get used to it, so 👍

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extend a template like Laravel Blade #286

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Extend a template like Laravel Blade #286

devsrealm Aug 16, 2021

Replies: 2 comments · 6 replies

devsrealm Aug 16, 2021 Author

devsrealm Aug 16, 2021 Author

ragboyjr Aug 16, 2021 Maintainer

devsrealm Aug 16, 2021 Author

ragboyjr Aug 17, 2021 Maintainer

devsrealm Aug 17, 2021 Author

ragboyjr Aug 18, 2021 Maintainer

devsrealm Aug 18, 2021 Author

devsrealm
Aug 16, 2021

Replies: 2 comments 6 replies

devsrealm
Aug 16, 2021
Author

devsrealm Aug 16, 2021
Author

ragboyjr
Aug 16, 2021
Maintainer

devsrealm Aug 16, 2021
Author

ragboyjr Aug 17, 2021
Maintainer

devsrealm Aug 17, 2021
Author

ragboyjr Aug 18, 2021
Maintainer

devsrealm Aug 18, 2021
Author