Add, remove, or replace asset files from/to HTML without touching the layout files. This extension works by finding two
special places in the HTML document, i.e. right before the </head>
and </body>
tag, and then process all assets that
have been added to the storage to be rendered as HTML tags in both places.
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Lorem Ipsum</title>
•</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
•</body>
</html>
The first place is generally used to insert CSS assets, and the second place is used to insert JavaScript assets.
Usage
This extension consists of three main methods:
Asset::get(array|string $path = null);
Asset::let(array|string $path = null);
Asset::set(array|string $path = null, float $stack = 10, array $lot = []);
The $path
parameter can be an URL, a file path or a data URI. It can also be an array of those values. The $stack
parameter is available only for the set
method and serves to determine the insertion position between assets. The
bigger the value, the lower the asset position will be. You use the $lot
parameter to provide additional data. This
data is useful for the asset parser. By default, this data will be used as HTML attributes.
// Given this statement…
Asset::set('.\lot\asset\file-1.css', 3);
Asset::set('.\lot\asset\file-2.css', 1);
Asset::set('.\lot\asset\file-3.css', 2, ['media' => 'screen']);
// Will produce this result…
// <link href="http://127.0.0.1/lot/asset/file-2.css" rel="stylesheet">
// <link href="http://127.0.0.1/lot/asset/file-3.css" media="screen" rel="stylesheet">
// <link href="http://127.0.0.1/lot/asset/file-1.css" rel="stylesheet">
To append CSS assets to the <head>
section, write this code in an index.php
file:
Asset::set('.\lot\asset\file.css');
To append inline CSS assets to the <head>
section, write this code in an index.php
file:
$style = <<<CSS
:root {
--background: #fff;
--color: #000;
}
body {
background: var(--background);
color: var(--color);
}
CSS;
Asset::set('data:text/css;base64,' . To::base64($style));
To append JavaScript assets to the <body>
section, write this code in an index.php
file:
Asset::set('.\lot\asset\file.js');
To append inline JavaScript assets to the <body>
section, write this code in an index.php
file:
$script = <<<JS
document.documentElement.classList.add('js');
JS;
Asset::set('data:text/js;base64,' . To::base64($script));
You can also use the standard JavaScript MIME type as defined in the specification:
Asset::set('data:text/javascript;base64,' . To::base64($script));
Shortly after being added, this extension will process the file path and then it will be rendered as <link>
tags for
CSS files and <script>
tags for JavaScript files.
0 Comments
No comments yet.