Introduction
TastyIgniter uses the Blade template engine to render views. Blade is a simple, yet powerful templating engine provided with Laravel. Unlike other popular PHP templating engines, Blade does not restrict you from using plain PHP code in your views. All Blade views are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application.
Blade views are typically stored in the resources/views
directory of your theme or extension. The Blade file extension is .blade.php
.
Variables
The following variables are available in all layout and page templates:
-
$this->page
- The current page object. -
$this->layout
- The current layout object. -
$this->theme
- The current theme object. -
$this->param
- The current request parameters.
Use these variables to access the properties of the current page, layout, theme, or request parameters. For example, to access the title of the current page, use $this->page->title
.
You may display variables in your templates using the {{ $variable }}
syntax. For example, to display the title of the current page, use {{ $this->page->title }}
.
Directives
Directives are a unique feature to Laravel Blade and are prefixed with @
character. TastyIgniter extends the Blade template engine by adding a number of directives and variables.
Note: The Blade directives provided by TastyIgniter are not the same as the Laravel Blade directives. The Blade directives provided by TastyIgniter are specific to TastyIgniter and are not compatible with Laravel.
@themePage
The @themePage
tag renders the contents of a page into a layout template. The directive has no parameters.
@themePage
@themePartial
The @themePartial
directive renders a partial template file located under the _partials
subdirectory of a theme. If you are rendering blade views from the other subdirectory of a theme, use Blade's @include
directive instead.
The directive has a single required parameter - the name of the partial file without the .blade.php
extension. You can specify the name of the subdirectory if you refer a partial from a subdirectory @partial('directory.partial-name')
.
@themePartial('partial-name')
The directive also accepts a second parameter - an optional array of data to pass to the partial. For example:
@themePartial('partial-name', ['status' => 'complete'])
If you need to render a partial only if it exists, you can use the @themePartialIf
directives.
@themePartialIf('partial-name', ['status' => 'complete'])
If you need to render a partial only if a boolean condition evaluates to true
or false
, you can use the @themePartialWhen
and @themePartialUnless
directives.
@themePartialWhen($expression, 'partial-name', ['status' => 'complete'])
@themePartialUnless($expression, 'partial-name', ['status' => 'complete'])
If you need to render the first partial that exists from a given array of partials, you can use the @themePartialFirst
directive.
@themePartialFirst(['custom.partial-name', 'partial-name'], ['status' => 'complete'])
@themeComponent
The @themeComponent
directive renders a Theme component. The directive has a single required parameter - the name of the component. To render a Livewire component, use the @livewire
directive instead.
@themeComponent('componentName')
The directive also accepts a second parameter - an optional array of data to pass to the component. For example:
@themeComponent('componentName', ['status' => 'complete'])
If you need to render a component only if it exists, you can use the @themeComponentIf
directives.
@themeComponentIf('componentName', ['status' => 'complete'])
If you need to render a component only if a boolean condition evaluates to true
or false
, you can use the @themeComponentWhen
and @themeComponentUnless
directives.
@themeComponentWhen($expression, 'componentName', ['status' => 'complete'])
@themeComponentUnless($expression, 'componentName', ['status' => 'complete'])
If you need to render the first component that exists from a given array of components, you can use the @themeComponentFirst
directive.
@themeComponentFirst(['componentNameExtended', 'componentName'], ['status' => 'complete'])
@themeContent
The @themeContent
directive renders the contents of a static template file located under the _content
subdirectory of a theme. If you are rendering blade views from the other subdirectory of a theme, use Blade's @include
directive instead.
The directive has a single required parameter - the name of the content template file without the .htm
extension. You can specify the name of the subdirectory if you refer a content from a subdirectory @themeContent('directory.content-name')
.
@themeContent('content-name')
@themeStyles
The @themeStyles
directive renders all stylesheets that are defined during the rendering of the page. This includes all .css
files registered within the resources/meta/assets.json
manifest file, as well as stylesheets injected using the controller's addCss
method. The directive has no parameters.
<head>
...
@themeStyles
</head>
<body>
...
</body>
@themeScripts
The @themeScripts
directive renders all scripts that are defined during the rendering of the page. This includes all .js
files registered within the resources/meta/assets.json
manifest file, as well as scripts injected using the controller's addJs
method. The directive has no parameters.
<head>
...
</head>
<body>
...
@themeScripts
</body>
Blade directives
Blade also provides a variety of directives for working with control structures, such as loops and conditional statements.
If statements
You can construct if statements using the Blade directives @if
, @elseif
, @else
, and @endif
.
@if (count($categories) === 1)
I have one category!
@elseif (count($categories) > 1)
I have multiple categories!
@else
I don't have any categories!
@endif
@unless (Cart::content())
Cart is empty.
@endunless
@isset($categories)
// $categories is defined and is not null...
@endisset
@empty($categories)
// $categories is "empty"...
@endempty
Switch statements
You can construct switch statements using the Blade directives @switch
, @case
, @break
, @default
, and @endswitch
.
@switch($i)
@case(1)
First case...
@break
@case(2)
Second case...
@break
@default
Default case...
@endswitch
Loops
You can construct loops using the Blade directives @for
, @foreach
, @forelse
, @while
, and @endfor
, @endforeach
, @endforelse
, @endwhile
.
@for ($i = 0; $i < 10; $i++)
The current value is {{ '{{ $i }}' }}
@endfor
@foreach ($categories as $category)
<p>This is category {{ '{{ $category->name }}' }}</p>
@endforeach
@forelse ($categories as $category)
<li>{{ '{{ $category->name }}' }}</li>
@empty
<p>No categories</p>
@endforelse
@while (true)
<p>I'm looping forever.</p>
@endwhile