模板指南
欢迎使用 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>