Kompilieren von Web-UI-Komponenten zum HTML

Ich baue eine einfache Website in Dart Web UI. Jede Seite hat eine Kopfzeile (mit Site-Navigation) und eine Fußzeile. Ich habe gebrauchte Komponenten für die Kopf- und Fußzeile, und jede Seite sieht ungefähr wie folgt aus:Kompilieren von Web-UI-Komponenten zum 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>

Das funktioniert gut, aber die Komponenten sind nicht auf die HTML selbst eingefügt, sondern dynamisch geladen von Dart (oder JavaScript) Code. Gibt es eine Möglichkeit, den Web-UI-Compiler die Kopf- und Fußzeile in die HTML-Datei selbst einzufügen, damit sie für Suchmaschinen und für Benutzer, die JavaScript deaktiviert haben, sichtbar sind?

Quelle

2013-05-31 JJJ

Es gibt keine direkte Möglichkeit, dies zu tun. Diese

ist in der Regel eine serverseitige Aufgabe: der Server Sorgfalt auf die erforderlichen HTML zu erzeugen.

Webkomponenten sind alle über Client-Seite, so dass sie arbeiten, was an den Browser des bereits ausgeliefert.

ist jedoch build.dart Skripte jedesmal, wenn eine Datei in Ihrem Projekt Änderungen ausgeführt, so dass Sie das Skript erweitern können zu bekommen, was Sie wollen. Ich denke nicht, dass dies ein guter Ansatz ist, aber es löst Ihr Problem.

zuerst die folgenden Platzhalter auf das Ziel HTML-Datei (in meinem Fall web/webuitest.html) hinzufügen:

THIS IS A HEADER

Jetzt erweitern die:

<header></header>

Jetzt mit Inhalt eine header.html Datei zu Ihrem Projekt hinzufügen build.dart Skript so wird es überprüfen, ob die header.html wurde modifiziert, und wenn es war, wird es aktualisiert 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); 
    }

Eine Konsequenz dieses Ansatzes ist, dass das Neuschreiben des Ziels erneut build.dart auslöst, so dass Ausgabedateien zweimal erstellt werden, aber das ist kein großes Problem.

Natürlich kann dies viel besser gemacht werden, und jemand könnte sogar in eine Bibliothek wickeln.

Quelle

2013-06-02 22:17:53

Nicht sehr hübsch, aber es funktioniert. Vielen Dank. – JJJ

Richtig, es ist hässlich wie Hölle :) Eigentlich habe ich darüber nachgedacht, eine Bibliothek dafür zu bauen, aber ich habe mich dazu entschieden, dies nicht zu tun, da ich es nicht gerne sehen würde. –

@Juhana, BTW, anfangs dachte ich darüber nach, nur die Dateien im 'out'-Verzeichnis neu zu schreiben, aber der Editor überwacht auch diese Dateien (ich denke, es wurde ein Fehler gesendet), so dass es eine unendliche Wiederherstellungsschleife auslöst –

Momentan ist es nicht möglich. Sie möchten diese Vorlagen serverseitig rendern, damit Sie sie beim Anfordern Ihrer Seiten (einschließlich Suchspinnen) direkt an den Client senden können.

Sie können den Überblick über dieses Thema halten wollen aber: https://github.com/dart-lang/web-ui/issues/107?source=c

Wenn es Dinge suchen besser fertig ist.

Quelle

2013-06-02 22:10:16

gut, gibt es keinen Grund, warum 'build.dart' nicht einfach erweitert werden kann, um eine Datei, wenn eine andere Datei Änderungen neu schreiben. hässlich, sicher, aber nicht wirklich kompliziert –

Ich brauche nicht wirklich Server-Side-Rendering, nur ein "fügen Sie diese Datei hier, wie es vor dem Rendern dieser Seite ist", aber ich nehme an, dass Feature würde es auch abdecken. – JJJ

Oh, nur daran erinnern, dass @ Zdeslavs Lösung skaliert überhaupt nicht :) –

Kompilieren von Web-UI-Komponenten zum HTML

Antwort

Verwandte Themen