Htmler — 用 Dart 生成 HTML
Htmler 允许你用 Dart 代码以编程方式构建 HTML，而不必直接编写 HTML 字符串。
何时使用 Htmler？
- 构建可复用组件
- 在 Dart 代码中动态生成 HTML
- 当 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，不转义 |
缓存根 \$Cache
\$Cache 缓存预渲染的内容：
var cached = \$Cache.get('sidebar', () => buildSidebar());
用 JJ.\$var() 嵌入 Jinja
在 Htmler 输出中嵌入 Jinja 变量：
Tag.div(
children: [
Tag.raw(JJ.\$var('username')), // {{ username }}
],
)
控制器中的 renderTag
Future<String> sidebar() async {
var tag = Tag.nav(
classes: ['sidebar'],
children: buildNavItems(),
);
return rq.renderTag(tag);
}