قالب
فینچ از Jinja (موتور قالب Python) برای رندر HTML سمت سرور استفاده میکند. فایلهای قالب در دایرکتوری widgetsPath قرار دارند و معمولاً پسوند .j2.html دارند.
رندر کردن یک قالب
از rq.renderView() در controller خود استفاده کنید:
return rq.renderView(
path: 'home/index', // نسبی به widgetsPath، بدون پسوند
params: {
'title': 'خانه',
'items': ['سیب', 'موز'],
},
);
خلاصه نحو Jinja
| مفهوم | نحو |
|---|---|
| متغیر | {{ variable }} |
| نظر | {# این یک نظر است #} |
| شرط | {% if condition %} … {% endif %} |
| حلقه | {% for item in list %} … {% endfor %} |
| گنجاندن | {% include 'partial.j2.html' %} |
| وارثسازی | {% extends 'layout.j2.html' %} |
| تعریف بلوک | {% block content %} … {% endblock %} |
| پر کردن بلوک | {% block content %} … {% endblock %} |
| فیلتر | {{ value | upper }} |
| نظر چندخطی | {# ... #} |
مثال: قالب پایه
{# lib/widgets/layout/base.j2.html #}
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
مثال: صفحه فرزند
{# lib/widgets/home/index.j2.html #}
{% extends 'layout/base.j2.html' %}
{% block content %}
<h1>{{ title }}</h1>
{% for item in items %}
<p>{{ item }}</p>
{% endfor %}
{% endblock %}
گنجاندن partialها
{% include 'shared/navbar.j2.html' %}
قالبهای از پیش تعریفشده
فینچ یک layout پیشفرض قرار میدهد. میتوانید آن را با قالبهای خودتان در widgetsPath بازنویسی کنید.
رویدادهای محلی
قالبها میتوانند رویدادهای Dart را ثبت کنند که پیش از رندر اجرا میشوند:
// در controller:
rq.localEvents.add(MyEvent());
class MyEvent extends LocalEvent {
@override
Future<void> run(Request rq) async {
rq.addParam('currentUser', await UserModel().getCurrent(rq));
}
}
فیلترهای layout محلی
فیلترهای Jinja سفارشی را در rq.localLayoutFilters اضافه کنید:
rq.localLayoutFilters['shorten'] = (value, args) {
return value.toString().substring(0, 50);
};
استفاده در قالب:
{{ longText | shorten }}
متغیرهای داخلی
فینچ به صورت خودکار متغیرهای زیر را در هر رندر قالب تزریق میکند:
| متغیر | توضیح |
|---|---|
$language |
کد زبان جاری ('en'، 'fa'، ...) |
$e |
شیء template event با متدهای کمکی |
$t |
تابع ترجمه — {{ $t('key') }} |
$n |
navigation تودرتو |