5

Dart Web UI で簡単な Web サイトを構築しています。各ページにはヘッダー (サイト ナビゲーション付き) とフッターがあります。ヘッダーとフッターにコンポーネントを使用しました。各ページは次のようになります。

<!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) コードから動的にロードされます。検索エンジンや JavaScript が無効になっているユーザーに表示されるように、Web UI コンパイラでヘッダーとフッターを HTML ファイル自体に挿入する方法はありますか?

4

2 に答える 2

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);
  }

このアプローチの結果の 1 つは、ターゲットの書き換えがbuild.dartもう一度トリガーされるため、出力ファイルが 2 回ビルドされることですが、それは大きな問題ではありません。

もちろん、これはもっと良くすることができ、誰かがそれをライブラリにラップすることさえできます。

于 2013-06-02T22:17:53.383 に答える
2

現在、いいえ、それは不可能です。必要なのは、これらのテンプレートをサーバー側でレンダリングして、ページ (検索スパイダーを含む) が要求されたときにクライアントに直接提供できるようにすることです。

ただし、この問題を追跡することをお勧めします: https://github.com/dart-lang/web-ui/issues/107?source=c

それが終わると、物事はより良く見えます。

于 2013-06-02T22:10:16.137 に答える