pierresilva/laravel-themes

Laravel 5.3 主题支持

5.3 2017-02-09 02:22 UTC

This package is auto-updated.

Last update: 2024-09-19 00:11:12 UTC


README

Laravel Themes 提供了一种将一组视图和资源组合在一起的方法,用于 Laravel 5.3。

快速安装

首先通过 Composer 安装此包。

composer require pierresilva/laravel-themes

此操作完成后,只需将服务提供者和外观类添加到项目的 config/app.php 文件中

服务提供者

pierresilva\Themes\ThemesServiceProvider::class,

外观

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

发布配置文件

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

这将把捆绑的配置文件复制到 config/themes.php

配置选项

默认活动主题

定义默认活动主题。

'active' => 'default'

文件夹结构

从命令行生成文件夹结构。

php artisan generate:theme themeslug

然后按照说明进行操作。

清单文件

每个主题必须提供一个清单文件(theme.json),存储在主题的根目录中,该文件定义了关于主题的附加细节。

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

获取清单属性

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

设置清单属性

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

设置活动主题

使用配置文件

config/laravel-themes.php

...

    'active' => 'foobar'

...

运行时设置

app/Http/Controllers/Controller.php

use Theme;

...

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

...

外观引用

Theme::all()

获取所有主题。

返回

集合

示例
$themes = Theme::all();

Theme::setActive($theme)

设置将被用于检索视图文件的当前活动主题。

参数

$theme (string) 主题缩写。必需

返回

null

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

Theme::getActive()

返回当前活动主题。

返回

string

示例
$activeTheme = Theme::getActive();

Theme::view($view, $data)

渲染定义的视图。这将首先检查当前活动主题是否有请求的视图文件;如果没有,它将回退到从 Laravel 提供的默认视图目录加载视图文件。

参数

$view (string) 视图文件的相对路径。必需 $data (mixed) 您想传递给要显示的视图文件的其他数据。

返回

视图

示例
$foo = 'bar';

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

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

以与 Theme::view() 相同的方式渲染定义的视图,但允许设置自定义状态响应和渲染页面的标头。

参数

$view (string) 视图文件的相对路径。必需 $data (mixed) 您想传递给要显示的视图文件的其他数据。 $status (integer) HTTP 状态码。 $header (array) HTTP 标头。

返回

响应

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

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

开始构建一些惊人的主题吧!

假设我们在应用程序中有一个如下结构的 bootstrap 主题

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

首先,我们需要 theme.json 清单文件。

{
    "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>

请注意,我们需要使用 Theme::asset() 来加载我们的主题资源文件。bootstrap 是在我们的 theme.json 文件中定义的主题缩写。

在我们的控制器中,使用以下代码加载视图

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

现在,对于我们的 login.blade.php

@extends('bootstrap::layout')

@section('content')
    <h1>Log In</h1>

    <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

请注意,我们在登录视图中使用 @extends('bootstrap::layout'),其中 bootstrap 是我们 theme.json 中定义的主题缩写,layout 是我们的布局文件。

作者

Pierre Silva

许可证

Laravel Themes 是开源软件,许可协议为 MIT 许可协议