{"_id":"563c2376913e650d00b65dbd","parentDoc":null,"project":"563b65bd9e3f2225009fd2bc","user":"563b65409e3f2225009fd2b9","version":{"_id":"563b65bd9e3f2225009fd2bf","project":"563b65bd9e3f2225009fd2bc","__v":4,"createdAt":"2015-11-05T14:20:45.639Z","releaseDate":"2015-11-05T14:20:45.639Z","categories":["563b65be9e3f2225009fd2c0","563b6b25e951f60d000b4513","563c239e260dde0d00c5e890","563c2440260dde0d00c5e891"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"4.0.0","version":"4.0"},"__v":22,"category":{"_id":"563b6b25e951f60d000b4513","version":"563b65bd9e3f2225009fd2bf","__v":6,"pages":["563c21fd19ae7b0d0050d45b","563c220c7539dd0d00dbee87","563c2218ac77910d00279fe7","563c2233d8f2d20d00448b4f","563c2376913e650d00b65dbd","563c907319ae7b0d0050d528"],"project":"563b65bd9e3f2225009fd2bc","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-05T14:43:49.565Z","from_sync":false,"order":1,"slug":"the-basics","title":"The Basics"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-11-06T03:50:14.866Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":8,"body":"## Usage\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Usage\"\n}\n[/block]\nTheme has many features to help you get started with Laravel\n\n\n- [Configuration](#configuration)\n- [Basic usage](#basic-usage)\n- [Compiler](#compiler)\n- [Render from string](#render-from-string)\n- [Compile string](#compile-string)\n- [Symlink from another view](#symlink-from-another-view)\n- [Basic usage of assets](#basic-usage-of-assets)\n- [Preparing group of assets](#preparing-group-of-assets)\n- [Partials](#partials)\n- [Working with regions](#working-with-regions)\n- [Preparing data to view](#preparing-data-to-view)\n- [Breadcrumb](#breadcrumb)\n- [Widgets design structure](#widgets-design-structure)\n- [Using theme global](#using-theme-global)\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Configuration\"\n}\n[/block]\nAfter the config is published, you will see the config file in \"config/theme\", but all the configuration can be replaced by a config file inside a theme.\n\n> Theme config location: /public/themes/[theme]/config.php\n\nThe config is convenient for setting up basic CSS/JS, partial composer, breadcrumb template and also metas.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"'events' => array(\\n\\n    // Before event inherit from package config and the theme that call before,\\n    // you can use this event to set meta, breadcrumb template or anything\\n    // you want inheriting.\\n    'before' => function($theme)\\n    {\\n        // You can remove this line anytime.\\n        $theme->setTitle('Copyright ©  2016 - lavalite.org');\\n\\n        // Breadcrumb template.\\n        // $theme->breadcrumb()->setTemplate('\\n        //     <ul class=\\\"breadcrumb\\\">\\n        //     :::at:::foreach ($crumbs as $i => $crumb)\\n        //         @if ($i != (count($crumbs) - 1))\\n        //         <li><a href=\\\"{{ $crumb[\\\"url\\\"] }}\\\">{{ $crumb[\\\"label\\\"] }}</a><span class=\\\"divider\\\">/</span></li>\\n        //         @else\\n        //         <li class=\\\"active\\\">{{ $crumb[\\\"label\\\"] }}</li>\\n        //         @endif\\n        //     @endforeach\\n        //     </ul>\\n        // ');\\n    },\\n\\n    // Listen on event before render a theme,\\n    // this event should call to assign some assets,\\n    // breadcrumb template.\\n    'beforeRenderTheme' => function($theme)\\n    {\\n        // You may use this event to set up your assets.\\n        // $theme->asset()->usePath()->add('core', 'core.js');\\n        // $theme->asset()->add('jquery', 'vendor/jquery/jquery.min.js');\\n        // $theme->asset()->add('jquery-ui', 'vendor/jqueryui/jquery-ui.min.js', array('jquery'));\\n\\n\\n        // $theme->partialComposer('header', function($view)\\n        // {\\n        //     $view->with('auth', Auth::user());\\n        // });\\n    },\\n\\n    // Listen on event before render a layout,\\n    // this should call to assign style, script for a layout.\\n    'beforeRenderLayout' => array(\\n\\n        'default' => function($theme)\\n        {\\n            // $theme->asset()->usePath()->add('ipad', 'css/layouts/ipad.css');\\n        }\\n\\n    )\\n\\n)\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Basic usage\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"namespace App\\\\Http\\\\Controllers;\\n\\nuse Theme;\\n\\nclass HomeController extends Controller {\\n\\n    public function getIndex()\\n    {\\n        $theme = Theme::uses('default')->layout('mobile');\\n\\n        $view = array(\\n            'name' => 'Litepie'\\n        );\\n\\n        // home.index will look up the path 'resources/views/home/index.php'\\n        return $theme->of('home.index', $view)->render();\\n\\n        // Specific status code with render.\\n        return $theme->of('home.index', $view)->render(200);\\n\\n        // home.index will look up the path 'resources/views/mobile/home/index.php'\\n        return $theme->ofWithLayout('home.index', $view)->render();\\n\\n        // home.index will look up the path 'public/themes/default/views/home/index.php'\\n        return $theme->scope('home.index', $view)->render();\\n\\n        // home.index will look up the path 'public/themes/default/views/mobile/home/index.php'\\n        return $theme->scopeWithLayout('home.index', $view)->render();\\n\\n        // Looking for a custom path.\\n        return $theme->load('app.somewhere.viewfile', $view)->render();\\n\\n        // Working with cookie.\\n        $cookie = Cookie::make('name', 'Tee');\\n        return $theme->of('home.index', $view)->withCookie($cookie)->render();\\n    }\\n\\n}\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nGet only content \"$theme->of('home.index')->content();\".\n\nFinding from both theme's view and application's view.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$theme = Theme::uses('default')->layout('default');\\n\\nreturn $theme->watch('home.index')->render();\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nTo check whether a theme exists.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Returns boolean.\\nTheme::exists('themename');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nTo find the location of a view.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$which = $theme->scope('home.index')->location();\\n\\necho $which; // themer::views.home.index\\n\\n$which = $theme->scope('home.index')->location(true);\\n\\necho $which; // ./public/themes/name/views/home/index.blade.php\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Compiler\"\n}\n[/block]\nTheme supports PHP, Blade and Twig. To use Blade or Twig template you just create a file with extension\n\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"[file].blade.php or [file].twig.php\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Render from string\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Blade template.\\nreturn $theme->string('<h1>{{ $name }}</h1>', array('name' => 'Litepie'), 'blade')->render();\\n\\n// Twig Template\\nreturn $theme->string('<h1>{{ name }}</h1>', array('name' => 'Litepie'), 'twig')->render();\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Compile string\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Blade compile.\\n$template = '<h1>Name: {{ $name }}</h1><p>{{ Theme::widget(\\\"WidgetIntro\\\", array(\\\"userId\\\" => 9999, \\\"title\\\" => \\\"Demo Widget\\\"))->render() }}</p>';\\n\\necho Theme::blader($template, array('name' => 'Litepie'));\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Twig compile.\\n$template = '<h1>Name: {{ name }}</h1><p>{{ Theme.widget(\\\"WidgetIntro\\\", {\\\"userId\\\" : 9999, \\\"title\\\" : \\\"Demo Widget\\\"}).render() }}</p>';\\n\\necho Theme::twigy($template, array('name' => 'Litepie'));\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Symlink from another view\"\n}\n[/block]\nThis is a nice feature when you have multiple files that have the same name, but need to be located as a separate one.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Theme A : /public/themes/a/views/welcome.blade.php\\n\\n// Theme B : /public/themes/b/views/welcome.blade.php\\n\\n// File welcome.blade.php at Theme B is the same as Theme A, so you can do link below:\\n\\n// ................\\n\\n// Location: public/themes/b/views/welcome.blade.php\\nTheme::symlink('a');\\n\\n// That's it!\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Basic usage of assets\"\n}\n[/block]\nAdd assets in your route or controller.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// path: public/css/style.css\\n$theme->asset()->add('core-style', 'css/style.css');\\n\\n// path: public/js/script.css\\n$theme->asset()->container('footer')->add('core-script', 'js/script.js');\\n\\n// path: public/themes/[current theme]/assets/css/custom.css\\n// This case has dependency with \\\"core-style\\\".\\n$theme->asset()->usePath()->add('custom', 'css/custom.css', array('core-style'));\\n\\n// path: public/themes/[current theme]/assets/js/custom.js\\n// This case has dependency with \\\"core-script\\\".\\n$theme->asset()->container('footer')->usePath()->add('custom', 'js/custom.js', array('core-script'));\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\nYou can force use theme to look up existing theme by passing parameter to method:\n $theme->asset()->usePath('default')\n\nWriting in-line style or script.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Dependency with.\\n$dependencies = array();\\n\\n// Writing an in-line script.\\n$theme->asset()->writeScript('inline-script', '\\n    $(function() {\\n        console.log(\\\"Running\\\");\\n    })\\n', $dependencies);\\n\\n// Writing an in-line style.\\n$theme->asset()->writeStyle('inline-style', '\\n    h1 { font-size: 0.9em; }\\n', $dependencies);\\n\\n// Writing an in-line script, style without tag wrapper.\\n$theme->asset()->writeContent('custom-inline-script', '\\n    <script>\\n        $(function() {\\n            console.log(\\\"Running\\\");\\n        });\\n    </script>\\n', $dependencies);\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nRender styles and scripts in your layout.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Without container\\necho Theme::asset()->styles();\\n\\n// With \\\"footer\\\" container\\necho Theme::asset()->container('footer')->scripts();\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nDirect path to theme asset.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"echo Theme::asset()->url('img/image.png');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Preparing group of assets.\"\n}\n[/block]\nSome assets you don't want to add on a page right now, but you still need them sometimes, so \"cook\" and \"serve\" is your magic.\n\nCook your assets\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Theme::asset()->cook('backbone', function($asset)\\n{\\n    $asset->add('backbone', '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js');\\n    $asset->add('underscorejs', '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js');\\n});\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nYou can prepare on a global in package config.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Location: config/theme/config.php\\n....\\n    'events' => array(\\n\\n        ....\\n\\n        // This event will fire as a global you can add any assets you want here.\\n        'asset' => function($asset)\\n        {\\n            // Preparing asset you need to serve after.\\n            $asset->cook('backbone', function($asset)\\n            {\\n                $asset->add('backbone', '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js');\\n                $asset->add('underscorejs', '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js');\\n            });\\n        }\\n\\n    )\\n....\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nServe theme when you need.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// At the controller.\\nTheme::asset()->serve('backbone');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nThen you can get output.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"...\\n<head>\\n    <?php echo Theme::asset()->scripts(); ?>\\n    <?php echo Theme::asset()->styles(); ?>\\n    <?php echo Theme::asset()->container('YOUR_CONTAINER')->scripts(); ?>\\n    <?php echo Theme::asset()->container('YOUR_CONTAINER')->styles(); ?>\\n</head>\\n...\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Partials\"\n}\n[/block]\nRender a partial in your layouts or views.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// This will look up to \\\"public/themes/[theme]/partials/header.php\\\"\\necho Theme::partial('header', array('title' => 'Header'));\\n\\n// Partial with current layout specific.\\n// This will look up up to \\\"public/themes/[theme]/partials/[CURRENT_LAYOUT]/header.php\\\"\\necho Theme::partialWithLayout('header', array('title' => 'Header'));\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\nFinding from both theme's partial and application's partials.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"echo Theme::watchPartial('header', array('title' => 'Header'));\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\nPartial composer.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$theme->partialComposer('header', function($view)\\n{\\n    $view->with('key', 'value');\\n});\\n\\n// Working with partialWithLayout.\\n$theme->partialComposer('header', function($view)\\n{\\n    $view->with('key', 'value');\\n}, 'layout-name');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Working with regions\"\n}\n[/block]\n\nTheme has magic methods to set, prepend and append anything.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$theme->setTitle('Your title');\\n\\n$theme->appendTitle('Your appended title');\\n\\n$theme->prependTitle('Hello: ....');\\n\\n$theme->setAnything('anything');\\n\\n$theme->setFoo('foo');\\n\\n// or\\n\\n$theme->set('foo', 'foo');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\nRender in your layout or view.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Theme::getAnything();\\n\\nTheme::getFoo();\\n\\n// or use place.\\n\\nTheme::place('anything');\\n\\nTheme::place('foo', 'default-value-if-it-does-not-exist');\\n\\n// or\\n\\nTheme::get('foo');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nCheck if the place exists or not.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<?php if (Theme::has('title')) : ?>\\n    <?php echo Theme::place('title'); ?>\\n<?php endif; ?>\\n\\n// or\\n\\n<?php if (Theme::hasTitle()) : ?>\\n    <?php echo Theme::getTitle(); ?>\\n<?php endif; ?>\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nGet argument assigned to content in layout or region.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Theme::getContentArguments();\\n\\n// or\\n\\nTheme::getContentArgument('name');\\n\\n// To check if it exists\\n\\nTheme::hasContentArgument('name');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nTheme::place('content') is a reserve region to render sub-view.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Preparing data to view\"\n}\n[/block]\nSometimes you don't need to execute heavy processing, so you can prepare and use when you need it.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$theme->bind('something', function()\\n{\\n    return 'This is bound parameter.';\\n});\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nUsing bound data on view.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"echo Theme::bind('something');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Breadcrumb\"\n}\n[/block]\nIn order to use breadcrumbs, follow the instruction below:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$theme->breadcrumb()->add('label', 'http://...')->add('label2', 'http:...');\\n\\n// or\\n\\n$theme->breadcrumb()->add(array(\\n    array(\\n        'label' => 'label1',\\n        'url'   => 'http://...'\\n    ),\\n    array(\\n        'label' => 'label2',\\n        'url'   => 'http://...'\\n    )\\n));\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nTo render breadcrumbs.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"echo $theme->breadcrumb()->render();\\n\\n// or\\n\\necho Theme::breadcrumb()->render();\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nYou can set up breadcrumbs template anywhere you want by using a blade template.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$theme->breadcrumb()->setTemplate('\\n    <ul class=\\\"breadcrumb\\\">\\n    @foreach ($crumbs as $i => $crumb)\\n        @if ($i != (count($crumbs) - 1))\\n        <li><a href=\\\"{{ $crumb[\\\"url\\\"] }}\\\">{{ $crumb[\\\"label\\\"] }}</a><span class=\\\"divider\\\">/</span></li>\\n        @else\\n        <li class=\\\"active\\\">{{ $crumb[\\\"label\\\"] }}</li>\\n        @endif\\n    @endforeach\\n    </ul>\\n');\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Widgets Design Structure\"\n}\n[/block]\nTheme has many useful features called \"widget\" that can be anything.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Creating a widget\"\n}\n[/block]\nYou can create a widget class using artisan command.\n\n**Creating as a Global** \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"php artisan theme:widget demo --global --type=blade\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n> Widget tpl is located in \"resources/views/widgets/{widget-tpl}.{extension}\"\n\n**Creating a specific theme name.** \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"php artisan theme:widget demo default --type=blade\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nWidget tpl is located in \"public/themes/[theme]/widgets/{widget-tpl}.{extension}\"\n\nThe file name can be demo.php, demo.blade.php or demo.twig.php\n\nNow you will see a widget class at /app/Widgets/WidgetDemo.php\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<h1>User Id: {{ $label }}</h1>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Calling your widget in layout or view\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"echo Theme::widget('demo', array('label' => 'Demo Widget'))->render();\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Using theme global\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"use Litepie\\\\Theme\\\\Contracts\\\\Theme;\\nuse App\\\\Http\\\\Controllers\\\\Controller;\\n\\nclass BaseController extends Controller {\\n\\n    /**\\n     * Theme instance.\\n     *\\n     * @var \\\\Litepie\\\\Theme\\\\Theme\\n     */\\n    protected $theme;\\n\\n    /**\\n     * Construct\\n     *\\n     * @return void\\n     */\\n    public function __construct(Theme $theme)\\n    {\\n        // Using theme as a global.\\n        $this->theme = $theme->uses('default')->layout('ipad');\\n    }\\n\\n}\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nTo override theme or layout.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"public function getIndex()\\n{\\n    $this->theme->uses('newone');\\n        // or just override layout\\n    $this->theme->layout('desktop');\\n\\n    $this->theme->of('somewhere.index')->render();\\n}\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]","excerpt":"You can mange themes and layouts of Lavalite.","slug":"theme","type":"basic","title":"Theme"}

Theme

You can mange themes and layouts of Lavalite.

## Usage [block:api-header] { "type": "basic", "title": "Usage" } [/block] Theme has many features to help you get started with Laravel - [Configuration](#configuration) - [Basic usage](#basic-usage) - [Compiler](#compiler) - [Render from string](#render-from-string) - [Compile string](#compile-string) - [Symlink from another view](#symlink-from-another-view) - [Basic usage of assets](#basic-usage-of-assets) - [Preparing group of assets](#preparing-group-of-assets) - [Partials](#partials) - [Working with regions](#working-with-regions) - [Preparing data to view](#preparing-data-to-view) - [Breadcrumb](#breadcrumb) - [Widgets design structure](#widgets-design-structure) - [Using theme global](#using-theme-global) [block:api-header] { "type": "basic", "title": "Configuration" } [/block] After the config is published, you will see the config file in "config/theme", but all the configuration can be replaced by a config file inside a theme. > Theme config location: /public/themes/[theme]/config.php The config is convenient for setting up basic CSS/JS, partial composer, breadcrumb template and also metas. [block:code] { "codes": [ { "code": "'events' => array(\n\n // Before event inherit from package config and the theme that call before,\n // you can use this event to set meta, breadcrumb template or anything\n // you want inheriting.\n 'before' => function($theme)\n {\n // You can remove this line anytime.\n $theme->setTitle('Copyright © 2016 - lavalite.org');\n\n // Breadcrumb template.\n // $theme->breadcrumb()->setTemplate('\n // <ul class=\"breadcrumb\">\n // @foreach ($crumbs as $i => $crumb)\n // @if ($i != (count($crumbs) - 1))\n // <li><a href=\"{{ $crumb[\"url\"] }}\">{{ $crumb[\"label\"] }}</a><span class=\"divider\">/</span></li>\n // @else\n // <li class=\"active\">{{ $crumb[\"label\"] }}</li>\n // @endif\n // @endforeach\n // </ul>\n // ');\n },\n\n // Listen on event before render a theme,\n // this event should call to assign some assets,\n // breadcrumb template.\n 'beforeRenderTheme' => function($theme)\n {\n // You may use this event to set up your assets.\n // $theme->asset()->usePath()->add('core', 'core.js');\n // $theme->asset()->add('jquery', 'vendor/jquery/jquery.min.js');\n // $theme->asset()->add('jquery-ui', 'vendor/jqueryui/jquery-ui.min.js', array('jquery'));\n\n\n // $theme->partialComposer('header', function($view)\n // {\n // $view->with('auth', Auth::user());\n // });\n },\n\n // Listen on event before render a layout,\n // this should call to assign style, script for a layout.\n 'beforeRenderLayout' => array(\n\n 'default' => function($theme)\n {\n // $theme->asset()->usePath()->add('ipad', 'css/layouts/ipad.css');\n }\n\n )\n\n)", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Basic usage" } [/block] [block:code] { "codes": [ { "code": "namespace App\\Http\\Controllers;\n\nuse Theme;\n\nclass HomeController extends Controller {\n\n public function getIndex()\n {\n $theme = Theme::uses('default')->layout('mobile');\n\n $view = array(\n 'name' => 'Litepie'\n );\n\n // home.index will look up the path 'resources/views/home/index.php'\n return $theme->of('home.index', $view)->render();\n\n // Specific status code with render.\n return $theme->of('home.index', $view)->render(200);\n\n // home.index will look up the path 'resources/views/mobile/home/index.php'\n return $theme->ofWithLayout('home.index', $view)->render();\n\n // home.index will look up the path 'public/themes/default/views/home/index.php'\n return $theme->scope('home.index', $view)->render();\n\n // home.index will look up the path 'public/themes/default/views/mobile/home/index.php'\n return $theme->scopeWithLayout('home.index', $view)->render();\n\n // Looking for a custom path.\n return $theme->load('app.somewhere.viewfile', $view)->render();\n\n // Working with cookie.\n $cookie = Cookie::make('name', 'Tee');\n return $theme->of('home.index', $view)->withCookie($cookie)->render();\n }\n\n}", "language": "php" } ] } [/block] Get only content "$theme->of('home.index')->content();". Finding from both theme's view and application's view. [block:code] { "codes": [ { "code": "$theme = Theme::uses('default')->layout('default');\n\nreturn $theme->watch('home.index')->render();", "language": "php" } ] } [/block] To check whether a theme exists. [block:code] { "codes": [ { "code": "// Returns boolean.\nTheme::exists('themename');", "language": "php" } ] } [/block] To find the location of a view. [block:code] { "codes": [ { "code": "$which = $theme->scope('home.index')->location();\n\necho $which; // themer::views.home.index\n\n$which = $theme->scope('home.index')->location(true);\n\necho $which; // ./public/themes/name/views/home/index.blade.php", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Compiler" } [/block] Theme supports PHP, Blade and Twig. To use Blade or Twig template you just create a file with extension [block:code] { "codes": [ { "code": "[file].blade.php or [file].twig.php", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Render from string" } [/block] [block:code] { "codes": [ { "code": "// Blade template.\nreturn $theme->string('<h1>{{ $name }}</h1>', array('name' => 'Litepie'), 'blade')->render();\n\n// Twig Template\nreturn $theme->string('<h1>{{ name }}</h1>', array('name' => 'Litepie'), 'twig')->render();", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Compile string" } [/block] [block:code] { "codes": [ { "code": "// Blade compile.\n$template = '<h1>Name: {{ $name }}</h1><p>{{ Theme::widget(\"WidgetIntro\", array(\"userId\" => 9999, \"title\" => \"Demo Widget\"))->render() }}</p>';\n\necho Theme::blader($template, array('name' => 'Litepie'));", "language": "php" } ] } [/block] [block:code] { "codes": [ { "code": "// Twig compile.\n$template = '<h1>Name: {{ name }}</h1><p>{{ Theme.widget(\"WidgetIntro\", {\"userId\" : 9999, \"title\" : \"Demo Widget\"}).render() }}</p>';\n\necho Theme::twigy($template, array('name' => 'Litepie'));", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Symlink from another view" } [/block] This is a nice feature when you have multiple files that have the same name, but need to be located as a separate one. [block:code] { "codes": [ { "code": "// Theme A : /public/themes/a/views/welcome.blade.php\n\n// Theme B : /public/themes/b/views/welcome.blade.php\n\n// File welcome.blade.php at Theme B is the same as Theme A, so you can do link below:\n\n// ................\n\n// Location: public/themes/b/views/welcome.blade.php\nTheme::symlink('a');\n\n// That's it!", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Basic usage of assets" } [/block] Add assets in your route or controller. [block:code] { "codes": [ { "code": "// path: public/css/style.css\n$theme->asset()->add('core-style', 'css/style.css');\n\n// path: public/js/script.css\n$theme->asset()->container('footer')->add('core-script', 'js/script.js');\n\n// path: public/themes/[current theme]/assets/css/custom.css\n// This case has dependency with \"core-style\".\n$theme->asset()->usePath()->add('custom', 'css/custom.css', array('core-style'));\n\n// path: public/themes/[current theme]/assets/js/custom.js\n// This case has dependency with \"core-script\".\n$theme->asset()->container('footer')->usePath()->add('custom', 'js/custom.js', array('core-script'));", "language": "php" } ] } [/block] You can force use theme to look up existing theme by passing parameter to method: $theme->asset()->usePath('default') Writing in-line style or script. [block:code] { "codes": [ { "code": "// Dependency with.\n$dependencies = array();\n\n// Writing an in-line script.\n$theme->asset()->writeScript('inline-script', '\n $(function() {\n console.log(\"Running\");\n })\n', $dependencies);\n\n// Writing an in-line style.\n$theme->asset()->writeStyle('inline-style', '\n h1 { font-size: 0.9em; }\n', $dependencies);\n\n// Writing an in-line script, style without tag wrapper.\n$theme->asset()->writeContent('custom-inline-script', '\n <script>\n $(function() {\n console.log(\"Running\");\n });\n </script>\n', $dependencies);", "language": "php" } ] } [/block] Render styles and scripts in your layout. [block:code] { "codes": [ { "code": "// Without container\necho Theme::asset()->styles();\n\n// With \"footer\" container\necho Theme::asset()->container('footer')->scripts();", "language": "php" } ] } [/block] Direct path to theme asset. [block:code] { "codes": [ { "code": "echo Theme::asset()->url('img/image.png');", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Preparing group of assets." } [/block] Some assets you don't want to add on a page right now, but you still need them sometimes, so "cook" and "serve" is your magic. Cook your assets [block:code] { "codes": [ { "code": "Theme::asset()->cook('backbone', function($asset)\n{\n $asset->add('backbone', '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js');\n $asset->add('underscorejs', '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js');\n});", "language": "php" } ] } [/block] You can prepare on a global in package config. [block:code] { "codes": [ { "code": "// Location: config/theme/config.php\n....\n 'events' => array(\n\n ....\n\n // This event will fire as a global you can add any assets you want here.\n 'asset' => function($asset)\n {\n // Preparing asset you need to serve after.\n $asset->cook('backbone', function($asset)\n {\n $asset->add('backbone', '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js');\n $asset->add('underscorejs', '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js');\n });\n }\n\n )\n....", "language": "php" } ] } [/block] Serve theme when you need. [block:code] { "codes": [ { "code": "// At the controller.\nTheme::asset()->serve('backbone');", "language": "php" } ] } [/block] Then you can get output. [block:code] { "codes": [ { "code": "...\n<head>\n <?php echo Theme::asset()->scripts(); ?>\n <?php echo Theme::asset()->styles(); ?>\n <?php echo Theme::asset()->container('YOUR_CONTAINER')->scripts(); ?>\n <?php echo Theme::asset()->container('YOUR_CONTAINER')->styles(); ?>\n</head>\n...", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Partials" } [/block] Render a partial in your layouts or views. [block:code] { "codes": [ { "code": "// This will look up to \"public/themes/[theme]/partials/header.php\"\necho Theme::partial('header', array('title' => 'Header'));\n\n// Partial with current layout specific.\n// This will look up up to \"public/themes/[theme]/partials/[CURRENT_LAYOUT]/header.php\"\necho Theme::partialWithLayout('header', array('title' => 'Header'));", "language": "php" } ] } [/block] Finding from both theme's partial and application's partials. [block:code] { "codes": [ { "code": "echo Theme::watchPartial('header', array('title' => 'Header'));", "language": "php" } ] } [/block] Partial composer. [block:code] { "codes": [ { "code": "$theme->partialComposer('header', function($view)\n{\n $view->with('key', 'value');\n});\n\n// Working with partialWithLayout.\n$theme->partialComposer('header', function($view)\n{\n $view->with('key', 'value');\n}, 'layout-name');", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Working with regions" } [/block] Theme has magic methods to set, prepend and append anything. [block:code] { "codes": [ { "code": "$theme->setTitle('Your title');\n\n$theme->appendTitle('Your appended title');\n\n$theme->prependTitle('Hello: ....');\n\n$theme->setAnything('anything');\n\n$theme->setFoo('foo');\n\n// or\n\n$theme->set('foo', 'foo');", "language": "php" } ] } [/block] Render in your layout or view. [block:code] { "codes": [ { "code": "Theme::getAnything();\n\nTheme::getFoo();\n\n// or use place.\n\nTheme::place('anything');\n\nTheme::place('foo', 'default-value-if-it-does-not-exist');\n\n// or\n\nTheme::get('foo');", "language": "php" } ] } [/block] Check if the place exists or not. [block:code] { "codes": [ { "code": "<?php if (Theme::has('title')) : ?>\n <?php echo Theme::place('title'); ?>\n<?php endif; ?>\n\n// or\n\n<?php if (Theme::hasTitle()) : ?>\n <?php echo Theme::getTitle(); ?>\n<?php endif; ?>", "language": "php" } ] } [/block] Get argument assigned to content in layout or region. [block:code] { "codes": [ { "code": "Theme::getContentArguments();\n\n// or\n\nTheme::getContentArgument('name');\n\n// To check if it exists\n\nTheme::hasContentArgument('name');", "language": "php" } ] } [/block] Theme::place('content') is a reserve region to render sub-view. [block:api-header] { "type": "basic", "title": "Preparing data to view" } [/block] Sometimes you don't need to execute heavy processing, so you can prepare and use when you need it. [block:code] { "codes": [ { "code": "$theme->bind('something', function()\n{\n return 'This is bound parameter.';\n});", "language": "php" } ] } [/block] Using bound data on view. [block:code] { "codes": [ { "code": "echo Theme::bind('something');", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Breadcrumb" } [/block] In order to use breadcrumbs, follow the instruction below: [block:code] { "codes": [ { "code": "$theme->breadcrumb()->add('label', 'http://...')->add('label2', 'http:...');\n\n// or\n\n$theme->breadcrumb()->add(array(\n array(\n 'label' => 'label1',\n 'url' => 'http://...'\n ),\n array(\n 'label' => 'label2',\n 'url' => 'http://...'\n )\n));", "language": "php" } ] } [/block] To render breadcrumbs. [block:code] { "codes": [ { "code": "echo $theme->breadcrumb()->render();\n\n// or\n\necho Theme::breadcrumb()->render();", "language": "php" } ] } [/block] You can set up breadcrumbs template anywhere you want by using a blade template. [block:code] { "codes": [ { "code": "$theme->breadcrumb()->setTemplate('\n <ul class=\"breadcrumb\">\n @foreach ($crumbs as $i => $crumb)\n @if ($i != (count($crumbs) - 1))\n <li><a href=\"{{ $crumb[\"url\"] }}\">{{ $crumb[\"label\"] }}</a><span class=\"divider\">/</span></li>\n @else\n <li class=\"active\">{{ $crumb[\"label\"] }}</li>\n @endif\n @endforeach\n </ul>\n');", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Widgets Design Structure" } [/block] Theme has many useful features called "widget" that can be anything. [block:api-header] { "type": "basic", "title": "Creating a widget" } [/block] You can create a widget class using artisan command. **Creating as a Global** [block:code] { "codes": [ { "code": "php artisan theme:widget demo --global --type=blade", "language": "php" } ] } [/block] > Widget tpl is located in "resources/views/widgets/{widget-tpl}.{extension}" **Creating a specific theme name.** [block:code] { "codes": [ { "code": "php artisan theme:widget demo default --type=blade", "language": "php" } ] } [/block] Widget tpl is located in "public/themes/[theme]/widgets/{widget-tpl}.{extension}" The file name can be demo.php, demo.blade.php or demo.twig.php Now you will see a widget class at /app/Widgets/WidgetDemo.php [block:code] { "codes": [ { "code": "<h1>User Id: {{ $label }}</h1>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Calling your widget in layout or view" } [/block] [block:code] { "codes": [ { "code": "echo Theme::widget('demo', array('label' => 'Demo Widget'))->render();", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "Using theme global" } [/block] [block:code] { "codes": [ { "code": "use Litepie\\Theme\\Contracts\\Theme;\nuse App\\Http\\Controllers\\Controller;\n\nclass BaseController extends Controller {\n\n /**\n * Theme instance.\n *\n * @var \\Litepie\\Theme\\Theme\n */\n protected $theme;\n\n /**\n * Construct\n *\n * @return void\n */\n public function __construct(Theme $theme)\n {\n // Using theme as a global.\n $this->theme = $theme->uses('default')->layout('ipad');\n }\n\n}", "language": "php" } ] } [/block] To override theme or layout. [block:code] { "codes": [ { "code": "public function getIndex()\n{\n $this->theme->uses('newone');\n // or just override layout\n $this->theme->layout('desktop');\n\n $this->theme->of('somewhere.index')->render();\n}", "language": "php" } ] } [/block]