Htmler — تولید HTML با Dart

Htmler به شما امکان می‌دهد HTML را به صورت برنامه‌ای با کد Dart بسازید، بدون اینکه مستقیماً رشته‌های HTML بنویسید.

چه زمانی از Htmler استفاده کنید؟

ساخت کامپوننت‌های قابل استفاده مجدد
تولید HTML پویا در کد Dart
جاهایی که قالب‌های Jinja گزینه مناسبی نیستند

ساخت HTML

import 'package:finch/finch_htmler.dart';

var html = Tag.div(
  classes: ['container', 'mt-4'],
  children: [
    Tag.h1(text: 'سلام دنیا', classes: ['title']),
    Tag.p(
      text: 'این متن توسط Htmler ساخته شده است.',
      classes: ['lead'],
    ),
    Tag.a(
      href: '/about',
      text: 'بیشتر بدانید',
      classes: ['btn', 'btn-primary'],
    ),
  ],
);

return rq.renderData(data: html.render(), contentType: 'text/html');

کلاس Tag

متد	توضیح
`Tag.div(...)`	تگ `<div>`
`Tag.span(...)`	تگ `<span>`
`Tag.p(...)`	تگ `<p>`
`Tag.h1()` تا `Tag.h6()`	تگ‌های عنوان
`Tag.a(href, text)`	تگ `<a>`
`Tag.img(src, alt)`	تگ `<img>`
`Tag.ul(children)`	تگ `<ul>`
`Tag.li(...)`	تگ `<li>`
`Tag.table(...)`	تگ `<table>`
`Tag.form(...)`	تگ `<form>`
`Tag.input(...)`	تگ `<input>`
`Tag.button(...)`	تگ `<button>`
`Tag.raw(html)`	HTML خام بدون escape

Cache ریشه `\$Cache`

\$Cache محتوای از پیش‌رندرشده را کش می‌کند:

var cached = \$Cache.get('sidebar', () => buildSidebar());

جاسازی Jinja با `JJ.\$var()`

برای جاسازی متغیر Jinja در خروجی Htmler:

Tag.div(
  children: [
    Tag.raw(JJ.\$var('username')),  // {{ username }}
  ],
)

renderTag در controller

Future<String> sidebar() async {
  var tag = Tag.nav(
    classes: ['sidebar'],
    children: buildNavItems(),
  );
  return rq.renderTag(tag);
}

در این صفحه