Question

我在Dart Web UI中构建一个简单的网站。每个页面都有一个标题（带有网站导航）和一个页脚。我使用了页眉和页脚的组件，每个页面都是这样的：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>

    <link rel="import" href="header.html">
    <link rel="import" href="footer.html">
</head>

<body>
    <header-component></header-component>

    Page content...

    <footer-component></footer-component>
</body>
</html>

这很有效，但组件没有插入到HTML本身，而是从Dart（或JavaScript）代码动态加载。有没有办法让Web UI编译器将页眉和页脚插入HTML文件本身，以便搜索引擎和禁用JavaScript的用户可以看到它们？

Answer 1

目前，不，不可能。您想要的是这些模板的服务器端呈现，以便您可以在请求页面（包括搜索蜘蛛）时直接将它们提供给客户端。

您可能希望跟踪此问题：https://github.com/dart-lang/web-ui/issues/107?source=c

当它完成的东西看起来更好。

Answer 2

没有直接的方法可以做到这一点。

这通常是服务器端任务：服务器负责生成所需的HTML。

Web组件都是关于客户端的，因此它们可以处理已经传送到浏览器的内容。

但是，每次项目中的文件发生更改时，都会执行build.dart脚本，因此您可以扩展脚本以获得所需内容。我不认为这是一个好方法，但它解决了你的问题。

首先将以下占位符添加到目标html文件（在我的情况下为web/webuitest.html）：

<header></header>

现在使用一些内容向项目添加header.html文件：

THIS IS A HEADER

现在扩展build.dart脚本，以便检查header.html是否已被修改，如果是，则会更新webuitest.html：

// if build.dart arguments contain header.html in the list of changed files
if (new Options().arguments.contains('--changed=web/header.html')) {
    // read the target file
    var content = new File('web/webuitest.html').readAsStringSync();
    // read the header
    var hdr = new File('web/header.html').readAsStringSync();
    // now replace the placeholder with the header
    // NOTE: use (.|[\r\n])* to match the newline, as multiLine switch doesn't work as I expect
    content = content.replaceAll(
        new RegExp("<header>(.|[\r\n])*</header>", multiLine:true), 
        '<header>${hdr}</header>');
    // rewrite the target file with modified content
    new File('web/webuitest.html').writeAsStringSync(content);
  }

这种方法的一个结果是重写目标会再次触发build.dart，因此输出文件将被构建两次，但这不是一个大问题。

当然，这可以做得更好，有人甚至可以将它包装到库中。

将Web UI组件编译为HTML

2 个答案: