将Web UI组件编译为HTML

JJJ*_*JJJ 5 dart dart-webui

我正在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>
Run Code Online (Sandbox Code Playgroud)

这很好用,但组件不会插入HTML本身,而是从Dart(或JavaScript)代码动态加载.有没有办法让Web UI编译器将页眉和页脚插入HTML文件本身,以便搜索引擎和禁用JavaScript的用户可以看到它们?

Zde*_*vic 2

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

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

Web 组件都是关于客户端的,因此它们处理已经交付给浏览器的内容。

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

首先将以下占位符添加到目标 html 文件中(在我的例子中web/webuitest.html):

<header></header>
Run Code Online (Sandbox Code Playgroud)

现在将包含header.html一些内容的文件添加到您的项目中:

THIS IS A HEADER
Run Code Online (Sandbox Code Playgroud)

现在扩展build.dart脚本,以便它检查是否header.html被修改,如果是,它将更新webuitest.html

<header></header>
Run Code Online (Sandbox Code Playgroud)

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

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