Template Guide
راهنمای قالب (Template)
به راهنمای قالب فینچ خوش آمدید! این راهنما شما را با مراحل استفاده از قالبها در برنامه فینچ آشنا میکند. چه توسعهدهنده حرفهای باشید یا تازهکار، فینچ ابزارهای قدرتمندی برای سادهسازی توسعه برنامههای سمت سرور ارائه میدهد.
قالب چیست؟
در فینچ، قالب فایلی است که ساختار HTML یک صفحه را شامل میشود. این فایل میتواند شامل جاینگهدارهایی برای دادههایی باشد که در زمان اجرا مقداردهی میشوند. قالبها برای تولید صفحات HTML که به کاربر ارسال میشوند، استفاده میشوند.
موتور قالب Jinja
فینچ از موتور قالب Jinja برای رندر کردن نماها استفاده میکند. این سیستم قالب امکانات قدرتمندی برای ساخت صفحات وب پویا با جداسازی منطق و نما فراهم میکند.
سینتکس قالب
فینچ از سینتکس قالب Jinja برای رندر نماها استفاده میکند. سینتکس قالب بسیار شبیه Jinja است. در اینجا یک مثال از نحوه استفاده آورده شده است:
{{ variable }} <!-- نمایش مقدار متغیر -->
{{ object.property }} <!-- دسترسی به ویژگیهای شیء -->
برای اطلاعات بیشتر درباره سینتکس قالب به مستندات Jinja Template Engine مراجعه کنید.
یا مستندات پکیج Jinja برای دارت را دنبال کنید.
یک مثال ساده از قالب:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- ...existing code... -->
<title>{{ title }}</title>
</head>
<body>
<h1>{{ heading }}</h1>
<!-- ...existing code... -->
{% endfor %}
</body>
</html>
چگونه میتوان رویدادهای سفارشی به قالب (jinja) افزود؟
میتوانید با استفاده از map به نام Request.localEvents رویدادهای سفارشی به قالب اضافه کنید. این map شامل تمام توابع رویداد سفارشی است که میتوانید در قالبهای خود استفاده کنید. برای مثال، اگر بخواهید تابعی اضافه کنید که سال جاری را برگرداند، میتوانید به این صورت عمل کنید:
final localEvents = {
final localEvents = {
'currentYear': () => DateTime.now().year,
};
Request.localEvents.addAll(localEvents);
and then you can use it in your template like this:
<p>The current year is {{ $l.currentYear() }}</p>
How can add custom filters to the template (jinja)?
final localLayoutFilters = {
'customDate': (value) => DateFormat('yyyy-MM-dd').format(value),
};
Request.addLocalLayoutFilters(localLayoutFilters);
and then you can use it in your template like this:
<p>{{ date | customDate }}</p>