电子负载页眉/页脚

Question

我对电子全新，但已经爱上了它！

但我只是想知道如何处理不同页面的应用程序。 我无法为每个页面编写单个.html文件，因为当标题中的某些内容发生更改时，我必须在每个.html文件中进行更改。

您更喜欢哪种解决方案？是否有代码片段？

Answer 1

我曾创建this. 您可以在<div>之外添加标头。它将始终可见，如果您想更改标题，则只需更改一次。

Answer 2

https://jsfiddle.net/ovezbn4j/

此示例是一个典型的单页面应用程序，带有sidenav栏，允许您通过将'main'div中的html替换为适当的内容来人工导航应用程序。

由于你使用的是Electron，我建议使用那个小提琴作为指导，因为它是纯粹的javascript。

对于Electron应用程序的实际实现，您需要充分利用节点生态系统，特别是Angular和/或Handlebars，或具有类似单页应用程序功能的任何其他包。

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

特别应该使用Handlebars通过引用和编译基于navBtn id的.hbs文件，然后将生成的html字符串插入主体来实现此片段。