电子模板？

Question

这里是一个简单的问题，但我没有找到有用的资源。在 Electron 中可以进行模板化吗？使用 Jade 或 Handlebars 显示动态模板？我知道有一个 .loadURL() 需要一个静态 html 文件。

动态可以吗？

谢谢。

Answer 1

当然可以通过运行 Electron 主进程中的本地服务器使用 Jade 或 Handlebars 进行动态模板化。但是我不推荐这样做，因为它有点倒退。 Electron 主要是一个前端框架，虽然运行本地服务器对某些事情有好处，但模板并不是其中之一。

大多数人使用 Angular 或 React 等前端 JS 框架。

Answer 2

你可以给electron-pug一个机会。 https://github.com/yan-foto/electron-pug

Answer 3

您可以通过protocol.registerBufferProtocol注册一个新的缓冲协议。

main.js

var electron = require('electron');
var app = electron.app;
var protocol = electron.protocol;
var BrowserWindow = electron.BrowserWindow;
var pug = require('pug');

var window;

app.on('ready', function () {

  // Define the `pug` scheme
  protocol.registerBufferProtocol('pug', function (request, callback) {
    var url = path.normalize(request.url.substr(7));
    var content = pug.renderFile(url);
    callback({
      mimeType: 'text/html',
      data: new Buffer(content)
    });
  });

  window = new BrowserWindow({width: 600, height: 600});

  // Load your file using the `pug` protocol
  window.loadURL(url.format({
    pathname: path.join(__dirname, 'index.pug'),
    protocol: 'pug:',
    slashes: true
  }));

});

index.pug

html
  head
    title My title
  body
    h1 Hello world!

Answer 4

可能来不及在此处添加，但认为这可能是值得的。我添加了一个包来处理从任何渲染器添加视图并处理资产路径。到目前为止，我刚刚添加了 ejs 渲染器，但计划添加 pug 和 haml 作为额外的默认渲染器，但扩展和添加您自己的渲染器也很容易。该包名为 electron-view-renderer https://www.npmjs.com/package/electron-view-renderer

希望这可以帮助像我们团队一样的人。它处于起步阶段，欢迎所有评论和贡献

电子模板？

Templating in Electron?

javascript

node.js

electron