This plugin for Kirby CMS is designed to streamline your website's performance by loading only what's needed. Keep your page weight in check and ensure fast loading times by registering stylesheets and JavaScript files on a per-snippet or block basis. Only include assets, that are actually used.
Download and copy this repository to /site/plugins/asset-manager.
git submodule add https://github.com/femundfilou/kirby-asset-manager.git site/plugins/asset-manager
composer require femundfilou/kirby-asset-manager
This plugin exposes $assetManager to all snippets. With a simple command you can link a stylesheet or javascript file directly within your snippet. It does work for blocks, too.
// site/snippets/blocks/card.php
<?php
$assetManager->add('css', 'path/to/your/card.css');
$assetManager->add('js', 'path/to/your/card.js');
?>
<div class="card">...</div>All added stylesheets will be appended right before </head>, all javascript right before </body>. Preload links will be appended right after <head>.
If you want more control over where the generated tags will be placed you can use these placeholders in your template which will be replaced with the corresponsing preload, style and script tags.
<head>
<!-- AssetManager PRELOAD -->
...
<!-- AssetManager CSS -->
</head>
...
<!-- AssetManager JS -->
</body>For those using kirby-laravel-vite, you can use it to include single files like this:
// site/snippets/blocks/card.php
<?php
$assetManager->add('css', vite()->asset('styles/blocks/card.scss'));
?>
<div class="card">...</div>Note
Remember to include those assets in yourvite.config.jsas seperate entries.
export default defineConfig({
laravel([
'styles/css/app.css',
'js/app.js',
'styles/blocks/card.css'
]),
});You can apply the same options available in Kirby's css() and js() helper methods as a third argument.
// site/snippets/blocks/card.php
<?php
$assetManager->add('css', 'path/to/your/card.css', ['media' => 'print']);
$assetManager->add('js', 'path/to/your/card.js');
?>
<div class="card">...</div>MIT
- Lukas Kleinschmidt (for giving the idea to use a
page.render:afterhook 🙌) - Justus Kraft