Asset 管理

Finch 有内置的 asset 管理系统，允许你在任何地方注册 JS 和 CSS 文件，然后在模板中渲染它们。

配置

在 FinchConfigs 中设置 publicDir 以提供静态文件：

FinchConfigs(
  publicDir: './public',
)

添加 Asset

在控制器或中间件中注册 asset：

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 中使用不同的 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');
  }
}

本页内容

Asset 管理

配置

添加 Asset

在模板中渲染 Asset

条件性 Asset