# 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](../overriding#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

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

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

### Page name

{% hint style="info" %}
This is principally used by JavaScript for doing lazy loading.
{% endhint %}

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

@section('page', 'index')
```

### Page meta

{% hint style="info" %}
Useful to configure some parameters to use with JavaScript and jQuery!
{% endhint %}

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

### Favicon

```php
// <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

```php
@section('base-href')<base href="/">@endsection
```

### Logo

```php
// 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

```php
// 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

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

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

### Pre-content

{% hint style="info" %}
This is where page header, menu, sidenav, loader... are defined.
{% endhint %}

```php
@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

```php
@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

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

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

### Content

{% hint style="info" %}
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).
{% endhint %}

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

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

### Post-content

{% hint style="info" %}
Add custom code after `<main>...</main>`.
{% endhint %}

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

### Translations

{% hint style="info" %}
This blade section is useful to add translations used by JavaScript. You could for example use the [thepinecode/i18n](https://github.com/thepinecode/i18n) library and add your translations to the page using this section.
{% endhint %}

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

### JavaScript files

```php
// 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
```
