Electron Load Header/Footer

Question

Ich bin völlig neu zu Elektron, aber schon liebe es!

Aber ich frage mich nur, wie man eine Anwendung mit verschiedenen Seiten behandelt. Ich konnte keine einzige HTML-Datei für jede Seite schreiben, denn wenn sich etwas in der Kopfzeile ändert, muss ich die Änderung in jeder einzelnen HTML-Datei vornehmen.

Welche Lösungen bevorzugen Sie und haben Code-Snippets?

Answer 1

Ich einmal erstellt this. Sie können eine Kopfzeile außerhalb der <div> hinzufügen. Es ist immer sichtbar und wenn Sie die Kopfzeile ändern möchten, müssen Sie sie nur einmal ändern.

Answer 2

https://jsfiddle.net/ovezbn4j/

Dieses Beispiel ist eine typische einzelne Seite Anwendung, mit einem sidenav Bar, die Sie durch das Ersetzen des HTML innerhalb des ‚main‘ div mit dem entsprechenden Inhalt künstlich navigieren Sie durch die Anwendung ermöglicht.

Da Sie Electron verwenden, würde ich empfehlen, diese Geige als Richtlinie zu verwenden, da es reines Javascript ist.

Für die tatsächliche Implementierung in Ihre Electron-Anwendung sollten Sie das Knoten-Ökosystem, insbesondere Angular und/oder Handlebars, oder alle anderen Pakete mit ähnlichen Einzelseiten-Anwendungsfunktionen vollständig nutzen.

let getHTML = pageName => { 
    switch(pageName) { 
    case 'home': 
     return homePage; 
     break; 
    case 'create-user': 
     return createUserPage; 
     break; 
    default: 
     alert(`${pageName} does not exist!`); 
     break; 
    } 
} 

let homePage = '<p>This is the home page!</p>'; 
let createUserPage = '<p>This is the user creation page!</p>'; 

Dieser Code-Schnipsel sollte insbesondere Lenker implementiert werden durch Bezugnahme auf und Dateien auf dem ID navBtn Kompilieren .hbs basiert und dann die resultierende HTML-String in den Hauptkörper eingeführt wird.