مدیریت Asset ها
فینچ یک سیستم مدیریت asset داخلی دارد که به شما امکان می‌دهد فایل‌های JS و CSS را از هر کجا ثبت کنید و سپس آن‌ها را در قالب‌ها رندر کنید.
پیکربندی
publicDir را در FinchConfigs تنظیم کنید تا فایل‌های استاتیک سرو شوند:
FinchConfigs(
publicDir: './public',
)
افزودن Asset
Asset ها را در controller یا middleware ثبت کنید:
import 'package:finch/finch_ui.dart';
// افزودن یک asset
rq.addAsset(AssetType.js, '/public/js/app.js');
rq.addAsset(AssetType.css, '/public/css/app.css');
// افزودن چندین asset به یک‌باره
rq.addAssets(AssetType.js, [
'/public/js/vendor.js',
'/public/js/app.js',
]);
رندر Asset در قالب
در قالب Jinja از متدهای assets استفاده کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>برنامه من</title>
{# رندر تمام تگ‌های <link> ثبت‌شده #}
{{ assets.css() }}
</head>
<body>
{% block content %}{% endblock %}
{# رندر تمام تگ‌های <script> ثبت‌شده #}
{{ assets.js() }}
</body>
</html>
متدهای assets.css() و assets.js() تمام asset های ثبت‌شده مرتبط را رندر می‌کنند:
<link rel="stylesheet" href="/public/css/app.css">
<script src="/public/js/vendor.js"></script>
<script src="/public/js/app.js"></script>
Asset های شرطی
می‌توانید در action های مختلف controller از asset های متفاوت استفاده کنید:
class DashboardController extends FinchController {
@override
Future<String> index() async {
rq.addAsset(AssetType.css, '/public/css/dashboard.css');
rq.addAsset(AssetType.js, '/public/js/charts.js');
return rq.renderView(path: 'dashboard/index');
}
@override
Future<String> show() async {
rq.addAsset(AssetType.css, '/public/css/detail.css');
return rq.renderView(path: 'dashboard/show');
}
}