pierresilva/laravel-themes

Laravel 5.3 Themes Support

Laravel Themes

Laravel Themes gives the means to group together a set of views and assets for Laravel 5.3., _(*1)

Quick Installation

Begin by installing the package through Composer., _(*2)

composer require pierresilva/laravel-themes

Once this operation is complete, simply add both the service provider and facade classes to your project's config/app.php file:, _(*3)

Service Provider

pierresilva\Themes\ThemesServiceProvider::class,

Facade

'Theme' => pierresilva\Themes\Facades\Theme::class,

Publishing The Config File

php artisan vendor:publish --provider="pierresilva\Themes\ThemesServiceProvider"

This will copy the bundled config file to config/themes.php, _(*4)

Configuration Options

Default Active Theme

Define the default active theme., _(*5)

'active' => 'default'

Folder Structure

Generating forlder structure from command line., _(*6)

php artisan generate:theme themeslug

And fallow the instructions., _(*7)

Manifest File

Each theme must come supplied with a manifest file (theme.json) stored at the root of the theme, which defines supplemental details about the theme., _(*8)

{
    "slug": "default",
    "name": "Default",
    "author": "John Doe",
    "description": "This is an example theme.",
    "version": "1.0"
}

Get Manifest Properties

echo Theme::getProperty('theme::property_key', 'default value if nothing is returned');

Set Manifest Properties

Theme::setProperty('theme::property_key', 'new value to be set');

Setting The Active Themes

Using The Config File

config/laravel-themes.php

...

    'active' => 'foobar'

...

Setting During Run-Time

app/Http/Controllers/Controller.php

use Theme;

...

public function __construct()
{
    Theme::setActive('foobar');
}

...

Facade Reference

Theme::all()

Get all themes., _(*9)

Returns

Collection, _(*10)

Example

$themes = Theme::all();

Theme::setActive($theme)

Sets the active theme that will be used to retrieve view files from., _(*11)

Parameters

$theme (string) Theme slug. Required, _(*12)

Returns

null, _(*13)

Example

Theme::setActive('bootstrap-theme');

Theme::getActive()

Returns the currently active theme., _(*14)

Returns

string, _(*15)

Example

$activeTheme = Theme::getActive();

Theme::view($view, $data)

Renders the defined view. This will first check if the currently active theme has the requested view file; if not, it will fallback to loading the view file from the default view directory supplied by Laravel., _(*16)

Parameters

$view (string) Relative path to view file. Required $data (mixed) Any additional data you'd like to pass along to the view file to be displayed., _(*17)

Returns

View, _(*18)

Example

$foo = 'bar';

return Theme::view('welcome', compact('foo'));

Theme::response($view, $data, $status, $headers)

Rendered the defined view in the same manner that Theme::view() does, but allows the means to set a custom status response and header for the rendered page., _(*19)

Parameters

$view (string) Relative path to view file. Required $data (mixed) Any additional data you'd like to pass along to the view file to be displayed. $status (integer) HTTP status code. $header (array) HTTP headers., _(*20)

Returns

Response, _(*21)

Example

$posts = Post::orderBy('published', 'desc')->get();

return Theme::response('blog.rss', compact('posts'), 200, [
    'Content-Type' => 'application/atom+xml; charset=UTF-8'
]);

Start building some awesome themes!

Let's say we have bootstrap theme in our application with the following structure:, _(*22)

public/
    |-- themes/
        |-- bootstrap/
            |-- theme.json
            |-- assets/
                |-- css/
                    |-- bootstrap.css
                |-- img/
                |-- js/
                    |-- bootstrap.js
                    |-- jquery.js
            |-- views/
                |-- layout.blade.php
                |-- auth/
                    |-- login.blade.php

First, we need theme.json manifest file., _(*23)

{
    "slug": "bootstrap",
    "name": "Bootstrap",
    "author": "Jhon Doe",
    "description": "Bootstrap theme.",
    "version": "1.0.0"
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap Theme Sample</title>

        <!-- Bootstrap core CSS -->
        <link href="{{ Theme::asset('bootstrap::css/bootstrap.css') }}" rel="stylesheet">
    </head>

    <body>

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

        <script src="{{ Theme::asset('bootstrap::js/jquery.js') }}"></script>
        <script src="{{ Theme::asset('bootstrap::js/bootstrap.js') }}"></script>
    </body>
</html>

Please take note that we need to use Theme::asset() to load our theme asset files. The bootstrap is a theme slug defined in our theme.json file., _(*24)

In our controller, load the view using the following code:, _(*25)

public function getLogin()
{
    return Theme::view('auth.login');
}

Now, for our login.blade.php:, _(*26)

@extends('bootstrap::layout')

@section('content')


Log In



    <form method="POST" action="/auth/login">
        {!! csrf_field() !!}

        <div>
            Email
            <input type="email" name="email" value="{{ old('email') }}">
        </div>

        <div>
            Password
            <input type="password" name="password" id="password">
        </div>

        <div>
            <input type="checkbox" name="remember"> Remember Me
        </div>

        <div>
            <button type="submit">Login</button>
        </div>
    </form>
@endsection

Note that we are using @extends('bootstrap::layout') in our login view, where bootstrap is a theme slug defined in our theme.json and layout is our layout file., _(*27)

Author

Pierre Silva, _(*28)

License

The Laravel Themes is open-sourced software licensed under the MIT license., _(*29)