模板指南

欢迎使用 Finch 模板指南!本指南将引导您完成在 Finch 应用程序中使用模板的步骤。无论您是经验丰富的开发人员还是刚刚起步,Finch 都提供了一套强大的工具来简化服务器端 Web 应用程序开发。

什么是模板?

Finch 中的模板是包含页面 HTML 结构的文件。它还可以包含将在运行时填充的数据占位符。模板用于生成发送到客户端的 HTML 页面。

Jinja 模板引擎

Finch 使用 jinja 模板引擎来渲染视图。模板系统为创建动态网页提供了强大的功能,并具有清晰的关注点分离。

模板语法

Finch 使用 jinja 模板语法来渲染视图。模板语法类似于 jinja 模板语法。以下是使用示例:

{{ variable }}           <!-- 基本变量输出 -->
{{ object.property }}    <!-- 访问对象属性 -->

有关模板语法的更多信息,请参阅 Jinja 模板引擎 文档。

或关注 Jinja Package Dart 文档。

模板的基本示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ heading }}</h1>
  <p>{{ content }}</p>
  {% for item in items %}
    <p>{{ item }}</p>
  {% endfor %}
</body>
</html>

如何向模板(jinja)添加自定义事件函数?

您可以通过使用 Request.localEvents 映射向模板添加自定义事件函数。此映射包含您可以在模板中使用的所有自定义事件函数。例如,如果您想添加一个返回当前年份的函数,可以这样做:


final localEvents = {
  'currentYear': () => DateTime.now().year,
};

Request.localEvents.addAll(localEvents);

然后您可以在模板中像这样使用它:

<p>The current year is {{ $l.currentYear() }}</p>

如何向模板(jinja)添加自定义过滤器?


final localLayoutFilters = {
  'customDate': (value) => DateFormat('yyyy-MM-dd').format(value),
};

Request.addLocalLayoutFilters(localLayoutFilters);

然后您可以在模板中像这样使用它:

<p>{{ date | customDate }}</p>