Question

首先，我真的很喜欢Dart，并继续尝试在实际项目中使用它，但后来遇到了像这样的问题，其他每个Web框架都有一个明显的解决方案，但我无法弄清楚如何让它工作在达特。

问题是我想使用单个基本模板呈现多个页面，我可以在服务器上设置页面标题，然后将页面提供给浏览器。

像这样简单：

<!DOCTYPE html>
<html>
 <head>
  <title>{{ custom_title }}</title>
 </head>
 <body>
  {{ page_content }}
  <footer>Hey, Seth Ladd!</footer>
 </body>
</html>

然后我将传递模板变量，这些变量将在发送回浏览器之前替换{{ custom_title }}和{{ page_content }}。这样的模板解决方案是否存在于核心dart库中的任何位置？

我查看了Web Components / Web UI内容，但似乎不可能拥有<body>标记之外的组件。我也可以在客户端轻松改变这一点，但它有点肮脏的解决方案并提出一些SEO问题（因为标题是页面内容的重要指标）。

Answer 1

试用mustache，mustache templates的Dart实现，这是一种广泛使用的模板语法，可以使用多种语言实现。

以下是一个例子：

import 'package:mustache/mustache.dart';

main() {
    var source = '{{#names}}<div>{{lastname}}, {{firstname}}</div>{{/names}}';
    var template = new Template(source);
    var output = template.renderString({'names': [
        {'firstname': 'Greg', 'lastname': 'Lowe'},
        {'firstname': 'Bob', 'lastname': 'Johnson'}
    ]});
    print(output);
}

Dart团队目前专注于客户端开发，因此核心库中缺少许多基本的服务器端功能。但是看一下pub，可以使用许多社区维护包。

另请参阅此类似的套餐：mustache4dart。

Answer 2

您可以尝试https://pub.dev/packages/edart。
嵌入式Dart模板引擎和编译器。将模板编译为Dart源代码。

示例：

products_index.html

<%@ import uri="layout.html.g.dart" %>
<%@ import uri="../models/product.dart" %>
<%@ class extends="View" %>
<%@ render params="List<Product> products, HttpRequest request" %>
<p>
    Our cool products list
</p>
<ul class="w3-ul">
    <% for (final product in products) { %>
    <li><%= product.name %>&nbsp;<%= product.price %></li><%
    } %>
</ul>
<%
final layout = layout_html();
layout.title = 'Products';
layout.addTag(HtmlTag('meta', {'description': 'MegaSuperShop cool price list'}));
layout.addBreadcrumb('Products', request.requestedUri.toString());
layout.render(out, request);
%>

此模板将被编译为以下源代码：

products_index.html.g.dart

// ignore: unused_import
import 'dart:convert';
import 'layout.html.g.dart';
import '../models/product.dart';

class products_index_html extends View {
  String render(List<Product> products, HttpRequest request) {
    final out = StringBuffer();
    out.write('<p>\n');
    out.write('    Our cool products list\n');
    out.write('</p>\n');
    out.write('<ul class="w3-ul">\n');
    for (final product in products) {
      out.write('    <li>');
      out.write(htmlEscape.convert('${product.name}'));
      out.write('&nbsp;');
      out.write(htmlEscape.convert('${product.price}'));
      out.write('</li>');
    }
    out.write('</ul>\n');
    final layout = layout_html();
    layout.title = 'Products';
    layout.addTag(
        HtmlTag('meta', {'description': 'MegaSuperShop cool price list'}));
    layout.addBreadcrumb('Products', request.requestedUri.toString());
    layout.render(out, request);
    return out.toString();
  }
}

布局模板也很容易理解。

layout.html

<%@ import uri="../html/layout.dart" %>
<%@ import uri="breadcrumbs.html.g.dart" %>
<%@ import uri="footer.html.g.dart" %>
<%@ import uri="header.html.g.dart" %>
<%@ import uri="nav.html.g.dart" %>
<%@ export uri="../html/breadcrumb.dart" %>
<%@ export uri="../html/html_utils.dart" %>
<%@ export uri="../html/view.dart" %>
<%@ class extends="Layout" %>
<%@ render params="StringBuffer body, HttpRequest request, {int statusCode = 400}" %>
<html>

<head>
  <title><%= title %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <% for (final tag in tags) { %>
  <%== tag %>
  <% } %>
</head>

<body>
  <%== header_html().render(title) %>

  <%== nav_html().render(request) %>

  <div class="w3-container">
    <%== breadcrumbs_html().render(breadcrumbs) %>
  </div>

  <div class="w3-container">
    <%== body %>
  </div>

  <%== footer_html().render() %>

</body>

</html>
<%
body.clear();
body.write(out);
final response = request.response;
response.headers.add('Content-Type', 'text/html; charset=utf-8');
response.statusCode = statusCode;
response.write(out);
%>

最后，是类Layout的源代码。
它可以是任何东西，也可以根本不（不是很方便）。

import 'breadcrumb.dart';
import 'html_utils.dart';

export 'dart:io';

export '../site/site_links.dart';
export 'html_utils.dart';

class Layout {
  final breadcrumbs = <Breadcrumb>[];

  final tags = <HtmlTag>[];

  String title = '';

  void addBreadcrumb(String text, String url) {
    final item = Breadcrumb(text: text, url: url);
    breadcrumbs.add(item);
  }

  HtmlTag addTag(HtmlTag tag) {
    tags.add(tag);
    return tag;
  }
}

如何在Dart中创建服务器端模板，我可以为每个页面设置不同的<title>？</title>

2 个答案: