Web UIコンポーネントをHTMLにコンパイル

私はDart Web UIで簡単なWebサイトを構築しています。各ページにはヘッダー（サイトナビゲーション付き）とフッターがあります。Web UIコンポーネントをHTMLにコンパイル

<!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自体に挿入されたが、ダート（またはJavaScript）から動的にロードされていません。私は、ヘッダーとフッターのためのコンポーネントを使用しました、そして各ページには次のようになりますコード。 Web UIコンパイラにヘッダーとフッターをHTMLファイルに挿入して、検索エンジンやJavaScriptが無効になっているユーザーに表示されるようにする方法はありますか？

出典

2013-05-31 JJJ

これを行う直接的な方法はありません。

これは通常、サーバー側のタスクです。サーバーは、必要なHTMLの生成に注意します。

ウェブコンポーネントはすべてクライアント側についてのものなので、ブラウザに既に配信されているものを処理します。

しかし、build.dartスクリプトは、プロジェクト内のファイルが変更されるたびに実行されるため、スクリプトを拡張して必要なものを得ることができます。私はこれが良いアプローチだとは思わないが、あなたの問題を解決する。

最初に（私の場合web/webuitest.htmlで）ターゲット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が再度トリガーされるため、出力ファイルは2回構築されますが、それは大きな問題ではありません。

もちろん、これははるかに優れていることがあります。誰かがライブラリにラップすることもできます。

出典

2013-06-02 22:17:53

あまりにもかわいいですが、うまくいきます。ありがとう。 – JJJ

右、それは地獄のように醜いです:)実際には、私は頻繁に見たいものではないので、これのために図書館を建てることを考えました。 –

@Juhana、BTW、最初は 'out'ディレクトリのファイルのみを書き直すことを考えましたが、エディタもこれらのファイルを監視しています（私はそこにバグがあります）ので、無限の再構築ループ –

現在のところ、不可能です。あなたが望むのは、テンプレートをサーバー側でレンダリングして、ページを要求したとき（検索スパイダーを含む）にクライアントに直接配信できるようにすることです。

ただし、この問題を追跡することがあります：それは物事が良く見ている仕上がっていますhttps://github.com/dart-lang/web-ui/issues/107?source=c

。

出典

2013-06-02 22:10:16

まあ、 'build.dart'を拡張して別のファイルが変更されたときにファイルを単純に書き換えることはできません。醜いですが、本当に複雑なものではありません。 –

私は本当にサーバー側のレンダリングが必要ではありません。単に「このページをレンダリングする前にそのファイルを挿入してください」というだけですが、その機能も同様です。 – JJJ

ああ、ちょうど@ Zdeslavの解決策は全くスケールされていないことを覚えておいてください:) –

Web UIコンポーネントをHTMLにコンパイル

答えて

関連する問題