包简介

Add CSS and JS per (block) snippet

README 文档

README

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.

Installation

Download

Download and copy this repository to /site/plugins/asset-manager.

Git submodule

git submodule add https://github.com/femundfilou/kirby-asset-manager.git site/plugins/asset-manager

Composer

composer require femundfilou/kirby-asset-manager

Usage

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>

Output

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>

Using Vite

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 your vite.config.js as seperate entries.

export default defineConfig({
  laravel([
    'styles/css/app.css',
    'js/app.js',
    'styles/blocks/card.css'
  ]),
});

Configuration

You can configure the plugin in your site/config/config.php file.

return [
	'femundfilou.asset-manager' => [
		'preload' => true // Disable or enable preloading of javascript assets
	]
];

Options

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>

License

MIT

Credits

Lukas Kleinschmidt (for giving the idea to use a page.render:after hook 🙌)
Justus Kraft

femundfilou/kirby-asset-manager 适用场景与选型建议

femundfilou/kirby-asset-manager 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 2.11k 次下载、GitHub Stars 达 3，最近一次更新时间为 2023 年 11 月 05 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 femundfilou/kirby-asset-manager 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 femundfilou/kirby-asset-manager 我们能提供哪些服务？

定制开发 / 二次开发

基于 femundfilou/kirby-asset-manager 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

femundfilou/kirby-asset-manager

包简介