Asset ها

Asset ها در فینچ فایل‌های JavaScript و CSS هستند که به‌صورت پویا در قالب‌های صفحه تزریق می‌شوند. به‌جای hardcode کردن تگ‌های <script> و <link> در هر قالب، controllerها asset ها را برای درخواست جاری ثبت می‌کنند. سپس قالب همه آن‌ها را یک‌جا با استفاده از یک placeholder واحد خروجی می‌دهد.

این ویژگی برای اسکریپت‌ها و استایل‌های مخصوص هر صفحه مفید است: صفحه‌ای که از یک کتابخانه data table استفاده می‌کند، فقط زمانی که واقعاً به آن نیاز است، JS/CSS آن کتابخانه را بارگذاری می‌کند.

نحوه عملکرد

1. یک controller متد rq.addAsset() را برای ثبت یک یا چند asset برای پاسخ جاری فراخوانی می‌کند.
2. قالب Jinja متدهای {{ assets.js() }} و {{ assets.css() }} را برای خروجی گرفتن تگ‌های ثبت‌شده فراخوانی می‌کند.
3. فینچ تگ‌های <script> یا <link> صحیح را در آن موقعیت‌ها رندر می‌کند.

افزودن Asset ها

Asset ها درون یک متد controller، درست پیش از رندر کردن view، اضافه می‌شوند:

Future<String> showPage() async {
  // Add a single JavaScript file
  rq.addAsset(Asset(
    path: '/public/js/datatable.min.js',
    type: AssetType.js,
  ));

  // Add a CSS file
  rq.addAsset(Asset(
    path: '/public/css/datatable.min.css',
    type: AssetType.css,
  ));

  return rq.renderView(path: 'pages/books');
}

برای افزودن چندین asset به‌یک‌باره، از rq.addAssets() استفاده کنید:

rq.addAssets([
  Asset(path: '/public/js/chart.js',   type: AssetType.js),
  Asset(path: '/public/css/chart.css', type: AssetType.css),
  Asset(path: '/public/js/utils.js',   type: AssetType.js),
]);

مقادیر AssetType

خروجی گرفتن از Asset ها در قالب‌ها

placeholder های asset را در قالب layout پایه خود قرار دهید. CSS باید داخل <head> قرار گیرد تا پیش از رندر شدن صفحه بارگذاری شود. جاوااسکریپت باید درست پیش از </body> قرار گیرد تا از مسدود شدن بارگذاری صفحه جلوگیری شود:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{{ $t('logo.title') }}</title>

    <!-- Outputs all registered CSS <link> tags -->
    {{ assets.css() }}
  </head>
  <body>

    {% block content %}{% endblock %}

    <!-- Outputs all registered JS <script> tags -->
    {{ assets.js() }}
  </body>
</html>

اگر هیچ assetی از یک نوع خاص ثبت نشده باشد، placeholder به‌صورت یک رشته خالی رندر می‌شود.

سرو کردن فایل‌های استاتیک

Asset ها فایل‌های استاتیکی هستند که از publicDir شما سرو می‌شوند. دایرکتوری عمومی (public) را در FinchConfigs پیکربندی کنید:

FinchConfigs configs = FinchConfigs(
  publicDir: pathTo(env.get('PUBLIC_DIR', './public')),
);

همه فایل‌های داخل publicDir مستقیماً از طریق مسیر خودشان در دسترس هستند. برای مثال، فایلی در مسیر ./public/js/app.js در آدرس /public/js/app.js سرو می‌شود.

مسیر publicDir باید مطلق (absolute) باشد. برای resolve کردن آن نسبت به ریشه پروژه از pathTo() استفاده کنید.