mercredi 28 février 2018

Use of @push and @stack for complex Laravel Blade layout

Working with Blade (Laravel template engine), I have two layouts:

  1. guest.blade.php, for guest related stuff (login, password request, etc.). Basically it's a slim template where content is centered (mostly forms)
  2. auth.blade.php, for authenticated users stuff (you know, the full layout with header, sidebar, etc.)

These two layouts have the following features:

  1. They share some common CSS and JS (bootstrap, font-awesome, jquery, etc.) in two different partials (css.blade.php in the document head and js.blade.php at the bottom).
  2. The auth.blade.php has obviously additional assets that aren't useful in slimmer guest.blade.php but are required in (mostly) ALL of the auth pages (select2, jquery-ui, etc.). Yes, I could put these CSS' and JS' in previously mentioned css.blade.php and js.blade.php and have them all in one file, but they would bloat guest.blade.php that I'd like to keep slim. And of course I don't want to put them in every child view! :-)
  3. Some views (both auth and guest related) could ask for peculiar assets just for that view: a dashboard could require some charts assets, a media manager could require multi-uploader assets, a login page could require a CSS or JS just for that login view.
  4. Last but not least, the order in which assets are loaded is important: i.e. for CSS
    • bootstrap, font-awesome, etc.
    • additional_css_only_for_auth_template
    • peculiar_css_plugin_for_the_current_view*
    • css_layout_(adminlte)
    • peculiar_css_custom_styles_for_the_current_view**
    • custom_global_styles_to_override_adminlte

Summing, the goal is to keep one single css.blade.php for both guest.blade.php and auth.blade.php (1), add the shared auth assets when using the auth template (2), and being able to set custom assets per-view, equally when using guest and auth template (3) - and the same goes for javascript assets

* css plugins are mostly retrieved from cdn
** these are additional styles only for that view


Oh, really I think I did, but don't know if it's the right approach since it seems a strange use of @push and @stack and I'd like to know if there's a cleaner solution

layouts.guest.blade.php

...
@include('partials.css')
...

layouts.auth.blade.php

@include('partials.stack') 
...
@include('partials.css')
...

partials.css.blade.php

<!-- shared css, in auth and guest layout -->
<link href="bootstrap.css">
<link href="font-awesome.css">

<!-- shared css plugins, but only for auth layout -->
@stack('shared-auth')

<!-- peculiar css plugins for this page only -->
@stack('css-plugins')

<!-- now this is the shared layout, for auth and guest -->
<link href="adminlte.css">

<!-- pecualiar css styles, for this page only -->
@stack('css-styles')

<!-- theme, for the auth layout only -->
@stack('theme')

<!-- my global custom css -->
<link href="style.css"> 

partials.stack.blade.php (remember, this goes only on top of auth layout, so it contains the auth shared assets)

@push('shared-auth')
    <link href="jquery-ui">
    <link href="select2">
@endpush

@push('theme')
    <link href="skin-blue">
@endpush

dashboard.blade.php

@push('css-plugins')
    <link href="chart.css">
@endpush

@push('css-styles')
    <link ="custom_chart_modifications.css">
@endpush

login.blade.php

@push('css-plugins')
    <link href="icheck-blue.css">
@endpush

@push('css-styles')
    <link href="custom_style_for_login_only.css">
@endpush


Does it makes sense? The weird part to me is the @include('partials.stack') on top of layouts.auth.blade.php that pushes to the @stack of the other included file @include('partials.css')

It seems to me an uncommon (and undocumented, as far as I googled...) use of @push and @stack: are there better and recommended alternatives?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire