Blade sections

You can easily use Blade sections to customize your pages. There are two ways to use blade sections:

  • When you override a view and create a new blade file.

  • Modifying Uccello layout located at resources/views/layouts/uccello.blade.php.

Common sections

Here the list of blade sections common to all uccello pages:

Page title

// <title>@yield('title', config('app.name', 'Uccello'))</title>

@section('title', 'My custom page title')

Page name

This is principally used by JavaScript for doing lazy loading.

// <meta name="page" content="@yield('page')">

@section('page', 'index')

Page meta

Useful to configure some parameters to use with JavaScript and jQuery!

@section('extra-meta')
<meta name="my-meta" content="meta-content">
@append

Favicon

// <link rel="icon" href="@section('favicon'){{ ucasset('images/favicon.png') }}@show" type="image/x-icon">

@section('favicon')
{{ asset('images/my-favicon.png') }}
@endsection

Base href

@section('base-href')<base href="/">@endsection
// The link and the image
@section('brand-logo')
    <a class="brand-logo" href="/" style="padding: 7px; max-height: 50px">@section('logo'){{ Html::image(ucasset('images/logo-uccello-white.png'), null, ['style' => 'max-width: 150px;']) }}@show</a>
@endsection

// Only the image
@section('logo')
{{ Html::image(asset('images/my-logo.png'), null, ['style' => 'max-width: 150px;']) }}
@endsection

CSS files

// For all pages. Put it into resources/views/layouts/uccello.blade.php
@section('css')
{!! Html::style(mix('css/app.css')) !!}
@append

// For specific pages. Thanks to an overriding.
@section('extra-css')
{!! Html::style(mix('css/specific.css')) !!}
@append

CSS classes

// <body class="@yield('body-extra-class')">

@section('body-extra-class', 'class1 class2')

Pre-content

This is where page header, menu, sidenav, loader... are defined.

@section('pre-content')
    {{-- @include('uccello::layouts.partials.loader') --}}
    <div class="overlay"></div>
    @include('uccello::layouts.partials.header.main')
    @include('uccello::layouts.partials.sidenav.main')
@endsection

Content container

@section('content-container')
    <main id="app"> // id="app" can be used by Vue JS
        <div class="content @yield('content-class')">
            {{-- Content --}}
            @yield('content')

            @yield('extra-content')
        </div>
    </main>
@endsection

Content CSS classes

// <div class="content @yield('content-class')">

@section('content-class', 'class1 class2')

Content

Even if extra-content section is not necessary, it can be used to add for example some HTML code at the bottom of the page (e.g. modal content).

@section('content')
My page content
@endsection

@section('extra-content')
Extra content
@endsection

Post-content

Add custom code after <main>...</main>.

@section('post-content')
Some code
@endsection

Translations

This blade section is useful to add translations used by JavaScript. You could for example use the thepinecode/i18n library and add your translations to the page using this section.

@section('translations')
@translations('my_translations')
@endsection

JavaScript files

// For all pages. Put it into resources/views/layouts/uccello.blade.php
@section('script')
{!! Html::script(mix('js/app.js')) !!}
@append

// For specific pages. Thanks to an overriding.
@section('extra-script')
{!! Html::script(mix('js/specific.js')) !!}
@append
PreviousThemesNextConfig file

Last updated

Was this helpful?