litepie/theme

Litepie 角色包。

维护者

详细信息

github.com/Litepie/Theme

主页

源代码

问题

安装次数: 53

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

v10.2.2 2023-09-29 13:15 UTC

Requires

  • php: ^8.1|^8.2

MIT 58ca4f8c230d7568617d55fccd63fefa43dec763

  • Renfos Technologies Pvt. Ltd. <info.woop@renfos.com>

themelavalitelitepie

This package is auto-updated.

Last update: 2024-09-08 15:56:36 UTC

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' => [

    'Litepie\Theme\ThemeServiceProvider',

]

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

'aliases' => [

    'Theme' => 'Litepie\Theme\Facades\Theme',

]

使用 artisan CLI 发布配置。

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

使用

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

使用 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" 中看到配置文件，但所有配置都可以由主题内部的配置文件替换。

主题配置位置：/public/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)->output();

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

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

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

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

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

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

}

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

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

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

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

检查主题是否存在。

// 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; // ./public/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')->output();

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

编译字符串

// Blade compile.
$template = '<h1>Name: {{ $name }}</h1><p>{{ Theme::widget("WidgetIntro", array("userId" => 9999, "title" => "Demo Widget"))->output() }}</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 : /public/themes/a/views/welcome.blade.php

// Theme B : /public/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: public/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: public/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: public/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 "public/themes/[theme]/partials/header.php"
echo Theme::partial('header', array('title' => 'Header'));

// Partial with current layout specific.
// This will look up up to "public/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()->output();

// or

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

您可以使用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

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

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

现在您将在/app/Widgets/WidgetDemo.php看到一个小部件类。

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

在布局或视图中调用您的widget

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

使用主题全局

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

class BaseController extends Controller {

    /**
     * Theme instance.
     *
     * @var \Litepie\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')->output();
}

支持或联系

如果您有任何问题，请联系[email protected]

Support via PayPal