2016-07-25 5 views
5

ここでは簡単な質問ですが、役に立つリソースは見つかりませんでした。 Electronのテンプレート作成は可能ですか?ジェイドまたはハンドルバーを使用してダイナミックテンプレートを表示しますか?私は静的なHTMLファイルを取る.loadURL()があることを知っている。Electronのテンプレート?

動的ですか?

ありがとうございました。

答えて

2

エレクトーンのメインプロセスでローカルサーバーを実行することで、ダイナミックテンプレートにJadeまたはHandlebarsを使用することは可能です。私はこれを推奨しませんが、それは逆のものです。 Electronは主にフロントエンドのフレームワークであり、ローカルサーバーを実行している間はいくつかの点で優れていますが、テンプレートは実際にはその1つではありません。

ほとんどの人は、AngularやReactのようなフロントエンドJSフレームワークを使用しています。

+0

ハンドルバーはフロントエンド環境に完全に適しています。 – Marty

+0

これは事実です。 Angularには独自のテンプレート機能があり、MVCパターン用に設計されているため、別のテンプレートエンジンのような余分なオーバーレイは必要ありません。 Node.jsはい、電子番号はありません。 – devarni

2

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! 
0

ここで追加することがおそらく遅すぎるが、それは価値があるかもしれないと思いました。任意のレンダラーからビューを追加し、アセットパスを処理するためのパッケージを追加しました。今まではejsレンダラーを追加しましたが、pugとhamlを追加のデフォルトレンダラーとして追加する予定ですが、拡張して追加するのも簡単です。パッケージは電子ビューレンダラーと呼ばれていますhttps://www.npmjs.com/package/electron-view-renderer

これは私たちのチームのように誰かを助けてくれることを願っています。それは初期段階にあるので、すべてのコメントと貢献が歓迎されます

関連する問題