Kompilowanie komponentów Web UI do HTML

Buduję prostą stronę internetową w interfejsie WWW Dart. Każda strona ma nagłówek (z nawigacją witryny) i stopkę. Użyłem komponenty dla nagłówka i stopki, a każda strona wygląda mniej więcej tak:Kompilowanie komponentów Web UI do 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>

Działa to dobrze, ale składniki nie są wstawiane do samego HTML ale załadowany dynamicznie z DART (lub JavaScript) kod. Czy jest jakiś sposób, aby kompilator interfejsu WWW wstawił nagłówek i stopkę do samego pliku HTML, aby były widoczne dla wyszukiwarek i dla użytkowników, którzy mają wyłączoną obsługę JavaScript?

Źródło

2013-05-31 JJJ

Nie ma bezpośredniego sposobu, aby to zrobić.

Jest to zwykle zadanie po stronie serwera: serwer dba o wygenerowanie wymaganego kodu HTML.

Komponenty WWW są po stronie klienta, więc działają na to, co zostało już dostarczone do przeglądarki.

Skrypty są wykonywane za każdym razem, gdy zmienia się plik w projekcie, dzięki czemu można rozszerzyć skrypt, aby uzyskać to, co chcesz. Nie sądzę, że to dobre podejście, ale rozwiązuje twój problem.

Najpierw dodaj następującą zastępczy do docelowego pliku html (w moim przypadku web/webuitest.html):

<header></header>

teraz dodać plik header.html do projektu z niektórych treści:

THIS IS A HEADER

Teraz przedłużyć build.dart skrypt, więc sprawdzi, czy zmieniono header.html, a jeśli tak, zaktualizuje 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); 
    }

Jedną z konsekwencji tego podejścia jest to, że przepisanie celu spowoduje ponowne wywołanie build.dart, więc pliki wyjściowe zostaną zbudowane dwa razy, ale to nie jest duży problem.

Oczywiście może to być znacznie lepsze, a ktoś może nawet umieścić go w bibliotece.

Źródło

2013-06-02 22:17:53

Niezbyt ładne, ale działa. Dzięki. – JJJ

prawda, to brzydkie jak diabli :) Właściwie myślałem o zbudowaniu biblioteki do tego, ale postanowiłem tego nie robić, ponieważ nie jest to coś, co chciałbym często zobaczyć. –

@Juhana, BTW, początkowo myślałem o przepisywaniu tylko plików z katalogu 'out', ale edytor także monitoruje te pliki (chyba jest zgłoszony błąd), więc uruchamia nieskończoną pętlę przebudowy –

Obecnie nie, to niemożliwe. To, czego potrzebujesz, to renderowanie po stronie serwera tych szablonów, dzięki czemu możesz je wyświetlać bezpośrednio klientowi, gdy zażąda on twoich stron (w tym pająków wyszukiwania).

Może chcesz śledzić ten problem jednakże: https://github.com/dart-lang/web-ui/issues/107?source=c

Kiedy skończy sprawy wyglądają lepiej.

Źródło

2013-06-02 22:10:16

cóż, nie ma powodu, dla którego 'build.dart' nie może być rozszerzony, aby po prostu przepisać plik po zmianie innego pliku. brzydki, pewny, ale niezbyt skomplikowany –

Naprawdę nie potrzebuję renderowania po stronie serwera, po prostu "wstaw ten plik tutaj, tak jak to jest przed renderowaniem tej strony", ale przypuszczam, że funkcja ta również to pokryłaby. – JJJ

No cóż, pamiętaj tylko, że @ rozwiązanie Zdeslava nie jest w ogóle skalowalne :) –

Kompilowanie komponentów Web UI do HTML

Odpowiedz

Powiązane problemy