2016-01-02 6 views
5

जिथब के इलेक्ट्रॉन में, आंशिक HTML फ़ाइलों को शामिल करने के लिए एक अंतर्निहित तंत्र है?मैं गिटूब के इलेक्ट्रॉन ढांचे में आंशिक HTML कैसे शामिल कर सकता हूं?

उदाहरण के लिए

, अगर मैं html में एक लेआउट डिजाइन

<body> 
    <div> 
     <ul><li>Menu Item 1</li><li>Menu Item 2</li></ul> 
    </div> 
    <div id="dynamic-content"> 
     <!-- I would like this content to be loaded from partial html files --> 
    </div> 
</body> 

मैं कैसे आईडी "गतिशील सामग्री" के साथ div में अलग अलग फ़ाइलों से सामग्री डाल होगा?

उत्तर

2

ऐसा करने के कई तरीके हैं। जब आप गतिशील सामग्री को लोड करना चाहते हैं तो आपने इस बारे में कोई जानकारी नहीं दी है। मुझे लगता है कि यह एक लिंक पर एक क्लिक है।

समाधान सामान्य नहीं है, जब आप सामान्य वेबपृष्ठ के साथ ऐसा करेंगे।

+3

हां। कोणीय को संवेदनशीलता से भरा हुआ है। –

0

पिछले जवाब देने के लिए जोड़ने के लिए, मैं एक तरह से बनाया गया/आंशिक फ़ाइलें और प्रक्रिया में शामिल उन्हें BrowserWindow (या दूसरे शब्दों में, सर्वर साइड में) पर लोड करने से पहले उन्हें प्रस्तुत करने के लिए नहीं मिला है।

लेकिन मौजूदा टेम्पलेट इंजन का उपयोग करना आसान है, जैसे ejs HTML सर्वर पक्ष को प्रस्तुत करने के लिए।

मैंने इसे this answer में इसी तरह के प्रश्न में प्रदर्शित किया है।

2

मुझे लगता है कि आपके प्रश्न का उत्तर संतोषजनक ढंग से दिया गया है। लेकिन यह देखते हुए कि इस प्रश्न के कुछ विचार कैसे हैं, मैंने सोचा कि मैं लोगों को इस बारे में थोड़ी अधिक जानकारी दूंगा:

मार्कअप के आंशिक (स्निपेट, घटक, जो कुछ भी) दोनों कोणों से इलेक्ट्रॉन में लोड किए जा सकते हैं; क्लाइंट-साइड और सर्वर-साइड।

क्लाइंट-साइड

के लिए जब आप गतिशील रूप से उपयोगकर्ता कार्य (उदा बटन प्रेस पर) के आधार पर सामग्री लाने की जरूरत है।

यह किसी भी ब्राउज़र में इलेक्ट्रॉन के समान काम करता है (बेशक, आपके पास file: प्रोटोकॉल तक पहुंच है)। आप AJAX का उपयोग करें। या किसी भी लाइब्रेरी में एक लोडिंग एपीआई (AJAX के आसपास एक दोस्ताना रैपर) युक्त। तो jQuery, कोणीय, मिथ्री, आदि सभी काम करेंगे।

उदाहरण:

$('#dynamic-content').load('file:///my-partial.html') 

सर्वर-साइड

जब तुम नहीं आलसी लोड की सेवा करना चाहते हैं (के लिए, उदाहरण के लिएकोणीय के साथ) मॉड्यूलर एचटीएमएल, पुन: प्रयोज्य घटकों के साथ अपनी फाइलों में विभाजित।

मॉड्यूलर मार्कअप बड़े अनुप्रयोगों के लिए जरूरी है। ऐसा करने के लिए, आप किसी प्रकार के टेम्पलेटिंग इंजन का उपयोग करेंगे। ईजेएस इसके लिए एक बहुत ही लोकप्रिय और अच्छी पसंद है।

1) पूर्व प्रस्तुत करना

यह एक विकल्प नहीं हो सकता है, आपके उपयोग के मामले के आधार पर:

सर्वर साइड templating के लिए आप दो विकल्प हैं। लेकिन यदि आप पहले से सभी चरों को जानते हैं, तो आप बस प्रत्येक प्रविष्टि फ़ाइल को संकलित और प्रस्तुत कर सकते हैं और परिणामों को HTML फ़ाइलों के रूप में सहेज सकते हैं।

उदाहरण EJS और नोड fs मॉड्यूल का उपयोग कर:

let template = fs.readFileSync('my-page.ejs') 
let compiled = ejs.render(tpl) 
fs.writeFileSync('my-page.html', compiled) 

और फिर सामान्य रूप से एचटीएमएल फ़ाइल लोड, उदा .:

myBrowserWindow.loadURL('file:///my-page.html') 

2) file: प्रोटोकॉल अवरोधन।

यह वास्तविक सौदा है। मॉड्यूल के साथ इलेक्ट्रॉन जहाजों को बस इसके लिए डिज़ाइन किया गया। यहाँ EJS साथ एक छद्म कोड उदाहरण है:

Intercept all file requests. 
If the file is not a `.ejs` file, serve the file. 
If the file is a `.ejs` file, render it and serve the result. 

और फिर आप अपने दिल की सामग्री के लिए EJS लोड कर सकते हैं:

myBrowserWindow.loadURL('file:///my-page.ejs') 

मैं आप के रूप में यहाँ प्रोटोकॉल अवरोधन की एक पूरी कोड नमूना शामिल नहीं होगा, शायद इसे स्वयं लागू नहीं किया जाएगा। इसके बजाय, मैं कई NPM मॉड्यूल है कि आप के लिए ऐसा करने से एक का उपयोग की सलाह देते हैं:

यदि आप इसे स्वयं लागू करने के लिए स्विंग लेना चाहते हैं, तो protocol module के इलेक्ट्रॉन दस्तावेज़ को देखें। चीयर्स!

संबंधित मुद्दे

 संबंधित मुद्दे