電子負荷ヘッダー/フッター

Question

私は電子を全く新しくしていますが、すでにそれを愛しています！

しかし、私はちょうど異なるページでアプリケーションを処理する方法を知っています。 ヘッダー内の何かが変更されると、すべての単一の.htmlファイルで変更を行う必要があるため、各ページに単一の.htmlファイルを書き込めませんでした。

どのソリューションを好むと思いますか？コードスニペットはありますか？

Answer 1

一度作成したthis. <div>の外部にヘッダーを追加できます。それは常に表示され、ヘッダーを変更したい場合は一度だけ変更する必要があります。

Answer 2

https://jsfiddle.net/ovezbn4j/

この例では、人為的に適切なコンテンツを持つ「メイン」のdiv内のhtmlを交換することにより、アプリケーションをナビゲートすることができますsidenavバーを持つ典型的な単一ページのアプリケーションです。

エレクトロンを使用しているので、純粋なjavascriptのようにガイドラインとしてそのフィドルを使用することをお勧めします。

エレクトロンアプリケーションへの実際の実装では、ノードエコシステム、特に角型および/またはハンドルバー、または同様の単​​一ページアプリケーション機能を持つ他のパッケージを完全に利用したいと思うでしょう。

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>'; 

特にこのスニペットは、参照とnavBtn IDに基づいてファイルを.hbsコンパイルした後、本体に得られたHTML文字列を挿入することによって、ハンドルバーを使用して実装されなければなりません。