Compilazione di componenti dell'interfaccia utente Web in HTML

Sto costruendo un semplice sito Web nell'interfaccia utente Web Dart. Ogni pagina ha un'intestazione (con la navigazione del sito) e un piè di pagina. Ho componenti utilizzati per l'intestazione e piè di pagina, e ogni pagina simile a questa:Compilazione di componenti dell'interfaccia utente Web in 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>

Questo funziona bene, ma i componenti non sono inseriti per il codice HTML in sé, ma caricata dinamicamente da Dart (o JavaScript) codice. C'è un modo per fare in modo che il compilatore UI Web inserisca l'intestazione e il piè di pagina nel file HTML stesso in modo che siano visibili ai motori di ricerca e agli utenti che hanno JavaScript disabilitato?

fonte

2013-05-31 JJJ

Non c'è un modo diretto per farlo.

Si tratta in genere di un'attività lato server: il server si occupa di generare l'HTML richiesto.

I componenti Web sono tutti sul lato client, quindi funzionano su ciò che è già stato consegnato al browser.

Tuttavia, gli script build.dart vengono eseguiti ogni volta che si modifica un file nel progetto in modo da poter estendere lo script per ottenere ciò che si desidera. Non penso che questo sia un buon approccio, ma risolve il tuo problema.

innanzitutto aggiungere il seguente segnaposto per il file di destinazione html (nel mio caso web/webuitest.html):

<header></header>

Ora aggiungere un file header.html al progetto con un certo contenuto:

THIS IS A HEADER

ora si estendono alla build.dart script in modo da verificare se lo header.html è stato modificato e, in caso affermativo, aggiornerà 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); 
    }

Una conseguenza di questo approccio è che la riscrittura del target attiverà nuovamente build.dart, quindi i file di output verranno creati due volte, ma non è un grosso problema.

Naturalmente, questo può essere fatto molto meglio, e qualcuno potrebbe persino avvolgerlo in una libreria.

fonte

2013-06-02 22:17:53

Non molto carina, ma funziona. Grazie. – JJJ

giusto, è brutto da morire :) In realtà, ho pensato di costruire una libreria per questo, ma ho deciso di non farlo, visto che non è qualcosa che mi piacerebbe vedere spesso. –

@Juhana, BTW, inizialmente pensavo di riscrivere solo i file nella directory 'out', ma l'editor controlla anche questi file (penso che ci sia un bug inviato per questo) quindi attiva un ciclo infinito di ricostruzione –

Attualmente, no, non è possibile. Quello che vuoi è il rendering lato server di quei modelli in modo che tu possa servirli direttamente al client quando richiedono le tue pagine (inclusi gli spider di ricerca).

Si potrebbe desiderare di tenere traccia di questo problema però: https://github.com/dart-lang/web-ui/issues/107?source=c

Quando è finito le cose sembrano andare meglio.

fonte

2013-06-02 22:10:16

beh, non c'è alcun motivo per cui 'build.dart' non può essere esteso per riscrivere semplicemente un file quando un altro file cambia. brutto, certo, ma non molto complicato –

Non ho davvero bisogno di rendering lato server, solo un "inserire quel file proprio qui com'è prima di eseguire il rendering di questa pagina", ma suppongo che questa funzionalità lo copra anche. – JJJ

Oh beh, ricorda che @ la soluzione di Zdeslav non scala affatto :) –

Compilazione di componenti dell'interfaccia utente Web in HTML

risposta

Problemi correlati