Kirby Blade

Update: 27 June 2022

There is now an official fork of Laravel Blade:

https://github.com/lukasleitsch/kirby-blade

---

Kirby Blade use Laravel illuminate/view 9.x package and compatible with Kirby 3.

This package enable Laravel Blade for your own Kirby applications.

Kirby compatibility table

Kirby version	Compatible plugin version
^3.6	^1.9
^3.7	^2.0

Important note before installation for Kirby

You should to override Kirby's e() helper function from root index.php of your application. Because Laravel Blade also has a helper function called e().

// override Kirby `e()` helper for Blade plugin
define('KIRBY_HELPER_E', false);

Installation

Installation with composer

composer require afbora/kirby-blade

Add as git submodule

git submodule add https://github.com/afbora/kirby-blade.git site/plugins/kirby-blade

Manual

• Download the latest release
• Unzip downloaded file
• Copy/paste unzipped folder in your /site/plugins folder

What is Blade?

According to Laravel Blade documentation is:

Blade is the 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. In fact, 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 view files use the .blade.php file extension.

Usage

You can use the power of Blade like Layouts, Forms, Sub-Views, Components, Directives and your custom if statements.

All the documentation about Laravel Blade is in the official documentation.

Options

The default values of the package are:

Option	Default	Values	Description
afbora.blade.templates	site/templates	(string)	Location of the templates
afbora.blade.views	site/cache/views	(string)	Location of the views cached
afbora.blade.directives	[]	(array)	Array with the custom directives
afbora.blade.ifs	[]	(array)	Array with the custom if statements
afbora.blade.minify.enabled	false	(boolean)	Enable/disable minify HTML output
afbora.blade.minify.options	[]	(array)	Minify supported options

All the values can be updated in the config.php file.

Templates

Default templates folder is site/templates directory or wherever you define your templates directory, but you can change this easily:

'afbora.blade.templates' => '/theme/default/templates',

Views

All the views generated are stored in site/cache/views directory or wherever you define your cache directory, but you can change this easily:

'afbora.blade.views' => '/site/storage/views',

Directives

By default Kirby Blade comes with following directives:

@asset($path)
@csrf()
@css($path)
@dump($variable)
@e($condition, $value, $alternative)
@get($key, $default)
@gist($url)
@go($url, $code)
@h($string, $keepTags)
@html($string, $keepTags)
@js($path)
@image($path, $attr) // @image('forrest.jpg', 'url')
@kirbytag($type, $value, $attr)
@kirbytags($text, $data)
@kirbytext($text, $data)
@kirbytextinline($text)
@kt($text)
@markdown($text)
@option($key, $default)
@page($key, $attr) // @page('blog', 'title')
@param($key, $fallback)
@site($attr) // @site(title')
@size($value)
@smartypants($text)
@snippet($name, $data)
@svg($file)
@t($key, $fallback)
@tc($key, $count)
@tt($key, $fallback, $replace, $locale)
@u($path, $options)
@url($path, $options)
@video($url, $options, $attr)
@vimeo($url, $options, $attr)
@widont($string)
@youtube($url, $options, $attr)

But you can create your own:

'afbora.blade.directives' => [
    'greeting' => function ($text)
    {
        return "<?php echo 'Hello: ' . $text ?>";
    },
],

Kirby Helpers Documentation:

https://getkirby.com/docs/reference/templates/helpers

If Statements

Like directives, you can create your own if statements:

'afbora.blade.ifs' => [
    'logged' => function ()
    {
        return !!kirby()->user();
    },
],

After declaration you can use it like:

@logged
    Welcome back {{ $kirby->user()->name() }}
@else
    Please Log In
@endlogged

Minify

Setup

'afbora.blade.minify.enabled' => true,
'afbora.blade.minify.options' => [
    'doOptimizeViaHtmlDomParser' => true, // set true/false or remove line to default
    'doRemoveSpacesBetweenTags'  => false // set true/false or remove line to default
],

Available Minify Options

Option	Description
doOptimizeViaHtmlDomParser	optimize html via "HtmlDomParser()"
doRemoveComments	remove default HTML comments (depends on "doOptimizeViaHtmlDomParser(true)")
doSumUpWhitespace	sum-up extra whitespace from the Dom (depends on "doOptimizeViaHtmlDomParser(true)")
doRemoveWhitespaceAroundTags	remove whitespace around tags (depends on "doOptimizeViaHtmlDomParser(true)")
doOptimizeAttributes	optimize html attributes (depends on "doOptimizeViaHtmlDomParser(true)")
doRemoveHttpPrefixFromAttributes	remove optional "http:"-prefix from attributes (depends on "doOptimizeAttributes(true)")
doRemoveHttpsPrefixFromAttributes	remove optional "https:"-prefix from attributes (depends on "doOptimizeAttributes(true)")
doKeepHttpAndHttpsPrefixOnExternalAttributes	keep "http:"- and "https:"-prefix for all external links
doMakeSameDomainsLinksRelative	make some links relative, by removing the domain from attributes
doRemoveDefaultAttributes	remove defaults (depends on "doOptimizeAttributes(true)"
doRemoveDeprecatedAnchorName	remove deprecated anchor-jump (depends on "doOptimizeAttributes(true)")
doRemoveDeprecatedScriptCharsetAttribute	remove deprecated charset-attribute - the browser will use the charset from the HTTP-Header, anyway (depends on "doOptimizeAttributes(true)")
doRemoveDeprecatedTypeFromScriptTag	remove deprecated script-mime-types (depends on "doOptimizeAttributes(true)")
doRemoveDeprecatedTypeFromStylesheetLink	remove "type=text/css" for css links (depends on "doOptimizeAttributes(true)")
doRemoveDeprecatedTypeFromStyleAndLinkTag	remove "type=text/css" from all links and styles
doRemoveDefaultMediaTypeFromStyleAndLinkTag	remove "media="all" from all links and styles
doRemoveDefaultTypeFromButton	remove type="submit" from button tags
doRemoveEmptyAttributes	remove some empty attributes (depends on "doOptimizeAttributes(true)")
doRemoveValueFromEmptyInput	remove 'value=""' from empty <input> (depends on "doOptimizeAttributes(true)")
doSortCssClassNames	sort css-class-names, for better gzip results (depends on "doOptimizeAttributes(true)")
doSortHtmlAttributes	sort html-attributes, for better gzip results (depends on "doOptimizeAttributes(true)")
doRemoveSpacesBetweenTags	remove more (aggressive) spaces in the dom (disabled by default)
doRemoveOmittedQuotes	remove quotes e.g. class="lall" => class=lall
doRemoveOmittedHtmlTags	remove ommitted html tags e.g. <p>lall</p> => <p>lall
You can get detailed information from HtmlMin library: voku/HtmlMin