How to use Blade with Statamic Multisite

2 min read

Published on 8th December 2023

Tutorials Statamic PHP Tooling

Understanding Blade in Statamic
Setting Up Blade in Statamic Multisite
Using Blade Templates
Leveraging Blade Directives
Handling Partials and Layouts
Multisite and Localization

Statamic's robust CMS capabilities, combined with Laravel Blade's expressive templating, provide a powerful platform for managing multisite setups. Blade, known for its elegant syntax and data-handling efficiency, can be a game-changer in your Statamic multisite environment. Let's explore how to effectively use Blade as your templating engine in a Statamic multisite context.

Understanding Blade in Statamic

In Statamic, Blade isn't just an alternative to the default Antlers template engine; it's a powerful way to leverage Laravel's native features, like dependency injection and service containers, directly in your templates. This makes Blade an excellent choice for developers familiar with Laravel looking to build complex, data-rich sites.

Setting Up Blade in Statamic Multisite

Enable Blade: Ensure Blade is enabled in your Statamic project. In a standard Statamic setup, Blade is available alongside Antlers.
Organize Blade Views: In a multisite setup, organize your Blade views within the resources/views directory. You can structure them into subdirectories for each site, like views/site_one and views/site_two.

Configure Blade Templates for Each Site: In your config/statamic/sites.php, you can specify different layouts or views for each site:

'sites' => [
    'default' => [
        // ...
        'views' => 'site_one',
    ],
    'french' => [
        // ...
        'views' => 'site_two',
    ],
],

Using Blade Templates

In your Blade templates, you can utilize Laravel's and Statamic's functionalities:

Display Content: Use Blade's syntax to display content fields:
```
<h1>{{ $entry->get('title') }}</h1>
```

Loop Through Collections: Easily loop through collections and display entries:

@foreach ($collection as $item)
    <article>
        <h2>{{ $item->get('title') }}</h2>
        {{-- More fields --}}
    </article>
@endforeach

Leveraging Blade Directives

Blade’s custom directives can simplify template syntax:

Creating Site-Specific Directives: You can create directives specific to each site in your multisite setup.
```
Blade::directive('siteOneHeader', function () {
    return "<header>Site One Header</header>";
});
```
In your Blade view:
```
@siteOneHeader
```

Handling Partials and Layouts

Use Blade’s layout and include features to manage reusable elements across different sites:

Layouts: Define a main layout for each site and extend it in individual views.

{{-- resources/views/site_one/layouts/app.blade.php --}}
<html>
    <head></head>
    <body>
        @yield('content')
    </body>
</html>

In your view:

{{-- Use the layout --}}
@extends('site_one.layouts.app')

@section('content')
    <h1>Welcome to Site One</h1>
@endsection

Partials: Manage reusable components like headers and footers using Blade’s @include:
```
@include('partials.header')
```

Multisite and Localization

For multisite setups with different languages, Blade's localization features come in handy:

Translation Strings: Use Laravel’s translation strings in your templates:
```
<h1>{{ __('messages.welcome') }}</h1>
```

Integrating Laravel Blade into your Statamic multisite setup allows for a more flexible, Laravel-centric development process. Blade’s powerful templating features, combined with Statamic’s robust content management, provide a seamless experience for managing complex, multi-faceted websites.