README

对于 Laravel 4，请使用 v1.x 分支！

主题是 Laravel 5 的主题管理工具，它是组织皮肤、布局和资产的最简单方法。目前主题支持 PHP、Blade 和 Twig。

安装

要获取 Theme 的最新版本，只需在您的 composer.json 文件中要求它。

"teepluss/theme": "dev-master"

然后您需要运行 composer install 来下载它并更新自动加载器。

一旦安装了 Theme，您需要将服务提供者注册到应用程序中。打开 config/app.php 并找到 providers 键。

'providers' => [

    'Teepluss\Theme\ThemeServiceProvider',

]

Theme 还附带了一个门面，它提供了创建集合的静态语法。您可以在 config/app.php 文件的 aliases 键中注册门面。

'aliases' => [

    'Theme' => 'Teepluss\Theme\Facades\Theme',

]

使用 artisan CLI 发布配置。

php artisan vendor:publish --provider="Teepluss\Theme\ThemeServiceProvider"

用法

Theme 有许多功能可以帮助您开始使用 Laravel

使用 artisan CLI 创建主题
配置
基本用法
编译器
从字符串渲染
编译字符串
从另一个视图创建符号链接
资产的基本用法
准备资产组
部分
与区域一起工作
准备用于视图的数据
面包屑
小部件设计结构
使用主题全局

使用 artisan CLI 创建主题

第一次您必须使用 artisan 命令创建 "default" 结构。

php artisan theme:create default

如果您更改了门面名称，可以添加一个选项 --facade="别名"。

要删除现有的主题，请使用以下命令

php artisan theme:destroy default

类型可以是 php、blade 和 twig。

在不使用 CLI 的情况下从应用程序创建。

Artisan::call('theme:create', ['name' => 'foo', '--type' => 'blade']);

配置

配置发布后，您将在 "config/theme" 中看到配置文件，但所有配置都可以由主题内部的配置文件替换。

主题配置位置：/resources/themes/[theme]/config.php

配置方便设置基本的 CSS/JS、部分 composer、面包屑模板以及元数据。

示例

'events' => array(

    // Before event inherit from package config and the theme that call before,
    // you can use this event to set meta, breadcrumb template or anything
    // you want inheriting.
    'before' => function($theme)
    {
        // You can remove this line anytime.
        $theme->setTitle('Copyright ©  2013 - Laravel.in.th');

        // Breadcrumb template.
        // $theme->breadcrumb()->setTemplate('
        //     <ul class="breadcrumb">
        //     @foreach ($crumbs as $i => $crumb)
        //         @if ($i != (count($crumbs) - 1))
        //         <li><a href="{{ $crumb["url"] }}">{{ $crumb["label"] }}</a><span class="divider">/</span></li>
        //         @else
        //         <li class="active">{{ $crumb["label"] }}</li>
        //         @endif
        //     @endforeach
        //     </ul>
        // ');
    },

    // Listen on event before render a theme,
    // this event should call to assign some assets,
    // breadcrumb template.
    'beforeRenderTheme' => function($theme)
    {
        // You may use this event to set up your assets.
        // $theme->asset()->usePath()->add('core', 'core.js');
        // $theme->asset()->add('jquery', 'vendor/jquery/jquery.min.js');
        // $theme->asset()->add('jquery-ui', 'vendor/jqueryui/jquery-ui.min.js', array('jquery'));


        // $theme->partialComposer('header', function($view)
        // {
        //     $view->with('auth', Auth::user());
        // });
    },

    // Listen on event before render a layout,
    // this should call to assign style, script for a layout.
    'beforeRenderLayout' => array(

        'default' => function($theme)
        {
            // $theme->asset()->usePath()->add('ipad', 'css/layouts/ipad.css');
        }

    )

)

基本用法

namespace App\Http\Controllers;

use Theme;

class HomeController extends Controller {

    public function getIndex()
    {
        $theme = Theme::uses('default')->layout('mobile');

        $view = array(
            'name' => 'Teepluss'
        );

        // home.index will look up the path 'resources/views/home/index.php'
        return $theme->of('home.index', $view)->render();

        // Specific status code with render.
        return $theme->of('home.index', $view)->render(200);

        // home.index will look up the path 'resources/views/mobile/home/index.php'
        return $theme->ofWithLayout('home.index', $view)->render();

        // home.index will look up the path 'resources/themes/default/views/home/index.php'
        return $theme->scope('home.index', $view)->render();

        // home.index will look up the path 'resources/themes/default/views/mobile/home/index.php'
        return $theme->scopeWithLayout('home.index', $view)->render();

        // Looking for a custom path.
        return $theme->load('app.somewhere.viewfile', $view)->render();

        // Working with cookie.
        $cookie = Cookie::make('name', 'Tee');
        return $theme->of('home.index', $view)->withCookie($cookie)->render();
    }

}

只获取内容 "$theme->of('home.index')->content();"。

从主题视图和应用视图中查找。

$theme = Theme::uses('default')->layout('default');

return $theme->watch('home.index')->render();

检查主题是否存在。

// Returns boolean.
Theme::exists('themename');

查找视图的位置。

$which = $theme->scope('home.index')->location();

echo $which; // themer::views.home.index

$which = $theme->scope('home.index')->location(true);

echo $which; // ./resources/themes/name/views/home/index.blade.php

编译器

主题现在支持PHP、Blade和Twig。要使用Blade或Twig模板，只需创建一个扩展名为

[file].blade.php or [file].twig.php

从字符串渲染。

// Blade template.
return $theme->string('<h1>{{ $name }}</h1>', array('name' => 'Teepluss'), 'blade')->render();

// Twig Template
return $theme->string('<h1>{{ name }}</h1>', array('name' => 'Teepluss'), 'twig')->render();

编译字符串

// Blade compile.
$template = '<h1>Name: {{ $name }}</h1><p>{{ Theme::widget("WidgetIntro", array("userId" => 9999, "title" => "Demo Widget"))->render() }}</p>';

echo Theme::blader($template, array('name' => 'Teepluss'));

// Twig compile.
$template = '<h1>Name: {{ name }}</h1><p>{{ Theme.widget("WidgetIntro", {"userId" : 9999, "title" : "Demo Widget"}).render() }}</p>';

echo Theme::twigy($template, array('name' => 'Teepluss'));

从另一个视图创建符号链接

当你有多个同名文件但需要分别存放时，这是一个很酷的功能。

// Theme A : /resources/themes/a/views/welcome.blade.php

// Theme B : /resources/themes/b/views/welcome.blade.php

// File welcome.blade.php at Theme B is the same as Theme A, so you can do link below:

// ................

// Location: resources/themes/b/views/welcome.blade.php
Theme::symlink('a');

// That's it!

资产的简单用法

在你的路由中添加资产。

// path: public/css/style.css
$theme->asset()->add('core-style', 'css/style.css');

// path: public/js/script.css
$theme->asset()->container('footer')->add('core-script', 'js/script.js');

// path: resources/themes/[current theme]/assets/css/custom.css
// This case has dependency with "core-style".
$theme->asset()->usePath()->add('custom', 'css/custom.css', array('core-style'));

// path: resources/themes/[current theme]/assets/js/custom.js
// This case has dependency with "core-script".
$theme->asset()->container('footer')->usePath()->add('custom', 'js/custom.js', array('core-script'));

你可以通过传递参数到方法强制主题查找现有主题：$theme->asset()->usePath('default')

编写内联样式或脚本。


// Dependency with.
$dependencies = array();

// Writing an in-line script.
$theme->asset()->writeScript('inline-script', '
    $(function() {
        console.log("Running");
    })
', $dependencies);

// Writing an in-line style.
$theme->asset()->writeStyle('inline-style', '
    h1 { font-size: 0.9em; }
', $dependencies);

// Writing an in-line script, style without tag wrapper.
$theme->asset()->writeContent('custom-inline-script', '
    <script>
        $(function() {
            console.log("Running");
        });
    </script>
', $dependencies);

在布局中渲染样式和脚本。

// Without container
echo Theme::asset()->styles();

// With "footer" container
echo Theme::asset()->container('footer')->scripts();

直接访问主题资产的路径。

echo Theme::asset()->url('img/image.png');

准备一组资产。

有些资产你现在不想添加到页面上，但有时你还需要它们，所以“烹饪”和“服务”是你的魔法。

烹饪你的资产。

Theme::asset()->cook('backbone', function($asset)
{
    $asset->add('backbone', '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js');
    $asset->add('underscorejs', '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js');
});

你可以在包的全局配置中准备。

// Location: config/theme/config.php
....
    'events' => array(

        ....

        // This event will fire as a global you can add any assets you want here.
        'asset' => function($asset)
        {
            // Preparing asset you need to serve after.
            $asset->cook('backbone', function($asset)
            {
                $asset->add('backbone', '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js');
                $asset->add('underscorejs', '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js');
            });
        }

    )
....

当你需要时提供主题。

// At the controller.
Theme::asset()->serve('backbone');

然后你可以获取输出。

...
<head>
    <?php echo Theme::asset()->scripts(); ?>
    <?php echo Theme::asset()->styles(); ?>
    <?php echo Theme::asset()->container('YOUR_CONTAINER')->scripts(); ?>
    <?php echo Theme::asset()->container('YOUR_CONTAINER')->styles(); ?>
</head>
...

部分

在你的布局或视图中渲染部分。

// This will look up to "resources/themes/[theme]/partials/header.php"
echo Theme::partial('header', array('title' => 'Header'));

// Partial with current layout specific.
// This will look up up to "resources/themes/[theme]/partials/[CURRENT_LAYOUT]/header.php"
echo Theme::partialWithLayout('header', array('title' => 'Header'));

从主题的部分和应用的部分中寻找。

echo Theme::watchPartial('header', array('title' => 'Header'));

部分作曲家。

$theme->partialComposer('header', function($view)
{
    $view->with('key', 'value');
});

// Working with partialWithLayout.
$theme->partialComposer('header', function($view)
{
    $view->with('key', 'value');
}, 'layout-name');

与区域一起工作。

主题有设置、预置和附加任何内容的神奇方法。

$theme->setTitle('Your title');

$theme->appendTitle('Your appended title');

$theme->prependTitle('Hello: ....');

$theme->setAnything('anything');

$theme->setFoo('foo');

// or

$theme->set('foo', 'foo');

在布局或视图中渲染。

Theme::getAnything();

Theme::getFoo();

// or use place.

Theme::place('anything');

Theme::place('foo', 'default-value-if-it-does-not-exist');

// or

Theme::get('foo');

检查位置是否存在。

<?php if (Theme::has('title')) : ?>
    <?php echo Theme::place('title'); ?>
<?php endif; ?>

// or

<?php if (Theme::hasTitle()) : ?>
    <?php echo Theme::getTitle(); ?>
<?php endif; ?>

获取分配给布局或区域中的内容的参数。

Theme::getContentArguments();

// or

Theme::getContentArgument('name');

// To check if it exists

Theme::hasContentArgument('name');

Theme::place('content') 是一个用于渲染子视图的预留区域。

准备数据以供视图使用

有时你不需要执行重型处理，因此你可以准备并使用它。

$theme->bind('something', function()
{
    return 'This is bound parameter.';
});

在视图中使用绑定数据。

echo Theme::bind('something');

面包屑

为了使用面包屑，请按照以下说明操作

$theme->breadcrumb()->add('label', 'http://...')->add('label2', 'http:...');

// or

$theme->breadcrumb()->add(array(
    array(
        'label' => 'label1',
        'url'   => 'http://...'
    ),
    array(
        'label' => 'label2',
        'url'   => 'http://...'
    )
));

渲染面包屑。

echo $theme->breadcrumb()->render();

// or

echo Theme::breadcrumb()->render();

您可以通过使用blade模板在您想要的位置设置面包屑模板。

$theme->breadcrumb()->setTemplate('
    <ul class="breadcrumb">
    @foreach ($crumbs as $i => $crumb)
        @if ($i != (count($crumbs) - 1))
        <li><a href="{{ $crumb["url"] }}">{{ $crumb["label"] }}</a><span class="divider">/</span></li>
        @else
        <li class="active">{{ $crumb["label"] }}</li>
        @endif
    @endforeach
    </ul>
');

小部件设计结构

主题有许多称为“小部件”的有用功能，可以是任何东西。

创建小部件

您可以使用artisan命令创建小部件类

创建为全局。

php artisan theme:widget demo --global --type=blade

小部件模板位于 "resources/views/widgets/{widget-tpl}.{extension}"

创建特定主题名称。

php artisan theme:widget demo default --type=blade

小部件模板位于 "resources/themes/[theme]/widgets/{widget-tpl}.{extension}"

文件名可以是 demo.php、demo.blade.php 或 demo.twig.php

现在你将在 /app/Widgets/WidgetDemo.php 中看到一个名为 WidgetDemo.php 的小部件类

<h1>User Id: {{ $label }}</h1>

在布局或视图中调用你的小部件

echo Theme::widget('demo', array('label' => 'Demo Widget'))->render();

使用主题全局

use Teepluss\Theme\Contracts\Theme;
use App\Http\Controllers\Controller;

class BaseController extends Controller {

    /**
     * Theme instance.
     *
     * @var \Teepluss\Theme\Theme
     */
    protected $theme;

    /**
     * Construct
     *
     * @return void
     */
    public function __construct(Theme $theme)
    {
        // Using theme as a global.
        $this->theme = $theme->uses('default')->layout('ipad');
    }

}

以覆盖主题或布局。

public function getIndex()
{
    $this->theme->uses('newone');

    // or just override layout
    $this->theme->layout('desktop');

    $this->theme->of('somewhere.index')->render();
}

rmrhz / themes

维护者

详细信息