[英]Templating in Electron?
Simple question here, but I found no useful resource.这里有一个简单的问题,但我没有找到有用的资源。 Is templating possible in Electron?
Electron 中是否可以进行模板化? Using Jade or Handlebars to display dynamic templates?
使用 Jade 或 Handlebars 显示动态模板? I know there is.loadURL() that takes a static html file.
我知道 is.loadURL() 需要一个 static html 文件。
Is dynamic possible?动态可以吗?
Thanks.谢谢。
You could give electron-pug a chance. 你可以给电子哈巴狗一个机会。 https://github.com/yan-foto/electron-pug
https://github.com/yan-foto/electron-pug
It would certainly be possible to use Jade or Handlebars for dynamic templating by running a local server in the Electron main process. 通过在Electron主进程中运行本地服务器,肯定可以使用Jade或Handlebars进行动态模板化。 I would not recommend this however, as it is kind of backwards.
但是我不建议这样做,因为它有点倒退。 Electron is primarily a front end framework and while running a local server is good for some things, templating is not really one of them.
Electron主要是一个前端框架,而运行本地服务器对于某些事情是有益的,模板并不是真正的其中之一。
Most people use a frontend JS framework like Angular or React. 大多数人使用像Angular或React这样的前端JS框架。
You can register a new buffer protocol via protocol.registerBufferProtocol . 您可以通过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!
Probably too late to add here but thought it might be worthwhile. 在这里添加可能为时已晚,但认为这可能是值得的。 I have added a package to deal with adding views from any renderer and handle asset paths.
我添加了一个包来处理从任何渲染器添加视图和处理资产路径。 So far I have just added the ejs renderer but plan on adding pug and haml as additional default renderers, but it is easy to extend and add your own as well.
到目前为止,我刚刚添加了ejs渲染器,但计划添加pug和haml作为额外的默认渲染器,但它也很容易扩展并添加自己的渲染器。 The package is called electron-view-renderer https://www.npmjs.com/package/electron-view-renderer
该软件包称为电子视图渲染器https://www.npmjs.com/package/electron-view-renderer
Hopefully this can help someone like it did our team. 希望这可以帮助像我这样的团队。 It is in its infancy, so all comments and contributions welcome
它还处于起步阶段,欢迎所有评论和贡献
U can use ejs-electron to achieve the same purpose.你可以使用 ejs-electron 来达到同样的目的。 U can check it out on github & simply install it as follows: npm i ejs-electron --save Just require it in ur main js file
你可以在 github 上查看它,只需按如下方式安装它: npm i ejs-electron --save 只需在你的主 js 文件中需要它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.