प्रतिक्रिया जैसे फ्रेमवर्क केवल ग्राहकों को जावास्क्रिप्ट भेजते हैं, जिसका उपयोग स्क्रीन ऑनस्क्रीन बनाने के लिए किया जाता है। पृष्ठ पर लोड होने वाला HTML न्यूनतम है, क्योंकि सबकुछ लोड होने के बाद क्लाइंट पक्ष पर सभी सामग्री उत्पन्न होती है।
उन परियोजनाओं में जिनमें गतिशील डेटा होता है, जैसे ब्लॉग या एक दुकान, जावास्क्रिप्ट को किसी अन्य डेटा को प्राप्त करने से पहले पहले आना पड़ता है। यहां तक कि कोड विभाजन जैसे गति-बूस्टिंग तकनीकों का उपयोग करते समय भी, यदि बंडल डाउनलोड करने में विफल रहता है, तो पूरी साइट काम करना बंद कर देगी।
वेब डिज़ाइन टूल्स आपको स्मार्ट काम करने में मदद करने के लिए
[2 9]
स्टेटिक साइट जनरेटर गतिशील सामग्री लेते हैं और सेवा करने के लिए तैयार पूर्व-निर्मित पृष्ठों को बनाते हैं। यदि डेटा बदल जाता है, तो परियोजना को पुनर्निर्मित किया जा सकता है और नई सामग्री परोसा जा सकता है। अंत परिणाम बेहतर गति, स्केलेबिलिटी और - डेटाबेस के निरंतर कनेक्शन के बिना - सुरक्षा। जबकि दृष्टिकोण लगातार डेटा बदलने के लिए आदर्श नहीं है जैसे रोलिंग समाचार साइट, कई परियोजनाओं को लाभ पहुंचा सकता है।
Gatsby
एक स्थिर साइट जनरेटर है जो प्रतिक्रिया पर बनाया गया है। ग्राफक्ल और प्लगइन्स के उपयोग के माध्यम से, यह विभिन्न स्रोतों से डेटा ले सकता है और उन्हें घटकों में पास कर सकता है। एक बार ऐसा करने के बाद, यह प्रोजेक्ट का विश्लेषण करता है और ग्राहकों को सेवा देने के लिए एचटीएमएल फाइलें उत्पन्न करता है, जबकि प्रतिक्रिया और एप्लिकेशन लॉजिक पृष्ठभूमि में डाउनलोड हो जाता है।
अधिक साइट बिल्डिंग विकल्पों के लिए, हमारे शीर्ष देखें
वेबसाइट निर्माता
[2 9]
चुनता है। सही समर्थन की आवश्यकता है? ये हैं
वेब होस्टिंग
[2 9]
आपको आवश्यक सेवाएं।
[4 9]
फ़ाइलों को डाउनलोड करें
इस ट्यूटोरियल के लिए।
10 सर्वश्रेष्ठ स्थैतिक साइट जेनरेटर
[2 9]
शुरू हो जाओ
[6 9]
इसे शुरू करने के बाद, गैट्सबी दो मूल पृष्ठ घटकों सहित शुरू करने के लिए एक उदाहरण साइट प्रदान करता है
शुरू करने के लिए, हम अपने लिए एक मूल परियोजना को मचान कर सकते हैं। यह एक विकास सर्वर प्रदान करता है जिसका हम कुछ उपयोगी डेवलपर उपकरण के साथ उपयोग कर सकते हैं। सुनिश्चित करें कि नोड और एनपीएम अप-टू-डेट और रन हैं
एनपीएक्स गैट्सबी नई गैट्सबी-साइट
[2 9]
कमांड लाइन पर, "गैट्सबी-साइट" के साथ बनाने के लिए फ़ोल्डर होने के नाते।
उस फ़ोल्डर के भीतर, गैट्सबी प्रारंभिक प्रक्रिया के हिस्से के रूप में कुछ आदेश प्रदान करता है। इन्हें चलाना साइट को बहुत आसान बना देगा। Daud
एनपीएम रन विकसित
[2 9]
विकास सर्वर शुरू करने के लिए और ब्राउज़र में स्वचालित रूप से कोई भी परिवर्तन अद्यतन देखें।
सभी सामग्री / src फ़ोल्डर के भीतर रहता है और किसी भी सेटअप फ़ाइलों को परियोजना की जड़ में "gatsby-" के साथ उपसर्ग किया जाता है। सब कुछ घटकों के माध्यम से काम करता है, जिन्हें गैट्सबी के साथ पूर्व निर्मित करने के लिए कोई अतिरिक्त संरचना या व्यवहार की आवश्यकता नहीं होती है।
/ SRC / पेज फ़ोल्डर की सामग्री विशेष है। गैट्सबी एक पृष्ठ बनाने के लिए उस फ़ोल्डर के भीतर कोई भी घटक उठाएगा। Index.js खोलें और घटक की सामग्री को साफ़ करें। ध्यान दें कि ब्राउजर में पृष्ठ अपडेट जैसा कि हम सहेजते हैं।
प्रत्येक ब्लॉग पोस्ट को अपने पेज की आवश्यकता होती है। प्रत्येक नई पोस्ट के लिए एक पृष्ठ घटक बनाना संभव है लेकिन यह उन लोगों के लिए बाधा उत्पन्न करता है जो प्रतिक्रिया करने के लिए उपयोग नहीं किए जाते हैं और भविष्य में डिजाइन परिवर्तन के रूप में भविष्य में अधिक रखरखाव की भी आवश्यकता होगी।
गैट्सबी में पृष्ठों को उत्पन्न करने के लिए तैयार प्लगइन्स से भरा एक लाइब्रेरी है, जो gatsbyjs.org/plugins पर मिल सकती है। वहां हम दो प्रकार के प्लगइन - 'स्रोत' और 'ट्रांसफार्मर' पा सकते हैं।
एक स्रोत प्लगइन एक स्रोत से डेटा लेगा और उन्हें 'नोड्स' में परिवर्तित कर देगा, जो कि गैट्सबी साइट के भीतर जानकारी से संबंधित है। डेटा को डेटाबेस जैसे बाहरी डेटा के लिए छवियों या दूरस्थ रूप से फ़ाइलों के लिए स्थानीय रूप से लाया जा सकता है।
एक ट्रांसफार्मर प्लगइन फिर इन नोड्स ले सकता है और गैट्सबी के साथ काम करने के लिए चीजों को आसान बनाने के लिए नए बना सकता है। उदाहरण के लिए, YAML फ़ाइलों को डिफ़ॉल्ट रूप से पार्स नहीं किया जा सकता है लेकिन एक ट्रांसफार्मर प्लगइन घोंसले के अंदर पढ़ने के लिए वस्तुओं में नेस्टेड सिंटैक्स को ऑब्जेक्ट में बदल सकता है।
मार्कडाउन एक सामान्य प्रारूप टेक्स्ट के लिए उपयोग किया जाता है क्योंकि यह बहुमुखी, पढ़ने में आसान है और एचटीएमएल में परिवर्तित किया जा सकता है। स्रोत प्लगइन "GATSBY-SOURCE-FILESYSYTEM" स्थानीय रूप से फ़ाइलों को ले जा सकता है और उन्हें नोड्स में परिवर्तित कर सकता है, जबकि परिवर्तन प्लगइन "गैट्सबी-ट्रांसफॉर्मर-रिमोट" मार्कडाउन को कन्वर्ट करने के लिए टिप्पणी का उपयोग करता है जिसे हम ले सकते हैं और ग्राफ़क्ल के साथ क्वेरी कर सकते हैं।
स्टार्टर प्रोजेक्ट पहले से ही स्रोत प्लगइन के साथ आता है। चलकर दूसरे को स्थापित करें
एनपीएम गैट्सबी-ट्रांसफार्मर-टिप्पणी स्थापित करें
[2 9]
। कृपया ध्यान दें कि इसे उठाने के लिए विकास सर्वर को पुनरारंभ करने की आवश्यकता हो सकती है।
प्लगइन्स सेट करें
प्लगइन स्थापित के साथ, गैट्सबी को यह बताया जाना चाहिए कि इसका उपयोग कैसे करें। यह सब तर्क प्रारंभ में उत्पन्न "gatsby-config.js" फ़ाइल के भीतर आयोजित किया जाता है। यह पहले से ही बॉक्स से बाहर की गई कुछ प्लगइन्स के साथ आता है लेकिन हमें मार्कडाउन लेने और उपयोग करने में सक्षम होने के लिए मिश्रण में शामिल होने की आवश्यकता है।
सरल प्लगइन्स जिनमें कोई सेट-अप प्रक्रिया नहीं है, तारों के रूप में जोड़ा जा सकता है। चूंकि परिवर्तन प्लगइन में केवल एक ही काम है, इसे स्थापित करने की आवश्यकता नहीं है। हालांकि, स्रोत प्लगइन को बताया जाना चाहिए कि पदों को कहां खोजें। उन्हें प्लगइन्स सरणी के नीचे में जोड़ें।
चूंकि प्रत्येक पोस्ट अपना स्वयं का पृष्ठ बन जाएगा, इसलिए उन्हें एसआरसी / पेज फ़ोल्डर में जोड़ने के लिए समझ में आता है। ये सेटिंग विकल्प गैट्सबी को उस फ़ोल्डर को देखने और किसी भी फाइल को खींचने के लिए कह रहे हैं।
एक ब्लॉग पोस्ट बनाएं
[12 9]
हेलमेट का उपयोग और लेफ्टिनेंट जोड़ने के लिए किया जा सकता है; मेटा और जीटी; प्रति-पोस्ट आधार पर तत्व, जैसे कि कीवर्ड के रूप में पोस्ट टैग का उपयोग करना
प्लगइन्स के साथ, हम अपनी पहली पोस्ट बना सकते हैं। "माई-फर्स्ट-पोस्ट" नामक एक फ़ोल्डर बनाएं और इसके भीतर "my-first-post.md" मार्कडाउन फ़ाइल जोड़ें। यह सम्मेलन हमें किसी भी संबंधित फ़ाइलों को जोड़ने में सक्षम बनाता है - जैसे छवियों - पोस्ट के साथ ही।
हमें इस पोस्ट में कुछ मार्कडाउन जोड़ने की जरूरत है ताकि हम जानते हों कि यह उम्मीद के अनुसार काम कर रहा है।
---
पथ: / पोस्ट / माई-फर्स्ट-पोस्ट
दिनांक: 2018-12-01
सारांश: पोस्ट सारांश
टैग: [मेरा, पहला, पोस्ट]
शीर्षक: मेरी पहली पोस्ट
---
यह मेरी पहली पोस्ट है! [9 4]
फ़ाइल के शीर्ष पर डैश के बीच की सामग्री को 'फ्रंट मैटर' कहा जाता है। इसमें उस पोस्ट के चारों ओर मेटाडेटा होगा जो लिखा जा रहा है, जैसे दिनांक और शीर्षक। इस डेटा को टिप्पणी करके उठाया जाएगा और इसे ग्राफक्ल के भीतर पूछताछ की जा सकती है।
इस मामले में सामने की बात का महत्वपूर्ण टुकड़ा है
पथ
[2 9]
मूल्य। यह वह जगह है जहां पद जीवित रहेगा और अद्वितीय होने की आवश्यकता होगी। गैट्सबी पथ पढ़ेगा और वहां एक नया पृष्ठ बनायेगा।
इससे पहले कि हम पोस्ट दिखा सकें, हमें पोस्ट को प्रदर्शित करने के लिए एक पेज घटक की आवश्यकता है। इसे मूल्यों को प्रॉप्स के रूप में लेने और सामग्री को एचटीएमएल के ब्लॉक के रूप में प्रदर्शित करने में सक्षम होना चाहिए।
"SRC / BlogPost.js" पर एक नया घटक बनाएं। प्रत्येक पोस्ट के बारे में जानकारी एक के रूप में आ जाएगा
डेटा
[2 9]
ग्राफक्ल से प्रोप।
Gatsby के साथ बंडल "प्रतिक्रिया-हेलमेट" पैकेज हमें उन मूल्यों को अद्यतन करने में सक्षम बनाता है जो आमतौर पर भीतर रहते हैं
& lt; हेड और जीटी;
[2 9]
एक HTML पृष्ठ का। यहां हम पद का शीर्षक निर्धारित कर रहे हैं
& lt; शीर्षक & gt;
[2 9]
पेज का ही। ऐसे कई अन्य विकल्प हैं जो इसे स्वीकार करते हैं, जिन्हें आप अधिक जानकारी प्राप्त कर सकते हैं
github.com/nfl/React-Helmet
।
डेटा के लिए क्वेरी
[17 9]
गैट्सबी ग्राफक्ल के साथ आता है, जिसका उपयोग प्रश्नों का परीक्षण करने में मदद के लिए किया जा सकता है। विकास सर्वर चलाएं और स्थानीयहोस्ट में जाएं: 8000 / ___ Graphql
इस बिंदु पर, गैट्सबी के पास इस पृष्ठ को शक्ति देने वाला कोई डेटा नहीं है। हमें इस जानकारी को पॉप्युलेट करने के लिए मार्कडाउन फ़ाइलों से डेटा प्राप्त करने की आवश्यकता है। ऐसा करने के लिए, हम ग्राफक्यू का उपयोग कर सकते हैं - फेसबुक द्वारा बनाई गई एक क्वेरींग भाषा जो प्रासंगिक डेटा में प्रतिक्रिया घटकों में खींचती है। संक्षेप में, ग्राफ़क्ल संरचना को परिभाषित करता है डेटा नेस्टेड ऑब्जेक्ट्स के उपयोग के माध्यम से डेटा वापस कर दिया जाएगा। इस तरह, हम केवल डेटा के लिए क्वेरी करते हैं हम वास्तव में उपयोग करेंगे।
गैट्सबी एक टेम्पलेट शाब्दिक फ़ंक्शन प्रदान करता है जो प्रश्नों की व्याख्या कर सकता है। यह इसके किसी भी उपयोग का पता लगाएगा और इसके परिणामों को घटक में प्रोप के रूप में पास करेगा। इसका मतलब है कि हम एक ही फ़ाइल के भीतर क्वेरी जोड़ सकते हैं और संबंधित तर्क को एक साथ रख सकते हैं।
इस क्वेरी के अंदर, हम एक पथ के साथ सभी मार्कडाउन नोड्स के लिए गैट्सबी से पूछ रहे हैं जो हमारे पृष्ठ से मेल खाता है। यदि यह एक पाता है, तो यह घटक पर पोस्ट के रेंडर एचटीएमएल, तिथि और शीर्षक को पास करेगा।
लेखन प्रश्न इस तरह से केवल पृष्ठ घटकों तक ही सीमित है। नोड्स के लिए क्वेरी की आवश्यकता वाले किसी भी अन्य घटक का उपयोग करना चाहिए
& lt; staticquery & gt;
[2 9]
और इसे सामने लोड करें। इस बिंदु पर, विकास सर्वर इसके बारे में चेतावनी दे सकता है
ब्लॉग पोस्ट
[2 9]
घटक, लेकिन ऐसा इसलिए है क्योंकि यह नहीं है कि यह अभी तक एक पृष्ठ घटक बन जाएगा। चलो इसे बदल दें।
पृष्ठ उत्पन्न करें
यदि आप "getnodesbytype एक फ़ंक्शन नहीं" त्रुटि देखते हैं, तो गैट्सबी का पुराना संस्करण डाउनलोड किया गया है। एनपीएम अपडेट चलाना यह ठीक करता है
डिफ़ॉल्ट रूप से, गैट्सबी केवल घटकों के लिए पृष्ठों को बनाता है
/ src / पेज
[2 9]
, जिसका अर्थ है कि हमें कुछ और तरीके से पेज बनाने की जरूरत है।
गैट्सबी डेटा नोड्स तक पहुंचने में सहायता के लिए अपनी बिल्ड प्रक्रिया से कुछ विधियों को उजागर करता है। इन्हें परियोजना की जड़ में "gatsby-node.js" के माध्यम से पहुंचा जा सकता है। इस मामले में, हम सभी ब्लॉग पोस्ट लाने के लिए Graphql का उपयोग करेंगे और अनुमति देंगे
रचनात्मक
[2 9]
कॉलबैक प्रत्येक के लिए एक पृष्ठ उत्पन्न करें। चूंकि यह एक असीमित कार्रवाई है, इसलिए हमें एक वादा वापस करने की जरूरत है ताकि गैट्सबी बिल्ड प्रक्रिया के साथ आगे बढ़ सकें।
कॉलबैक का पहला भाग एक क्वेरी है जो प्रत्येक पोस्ट के लिए पथ प्राप्त करती है, क्योंकि प्रत्येक व्यक्तिगत पृष्ठ को अपना डेटा मिल जाएगा। GraphQL कॉल एक वादा देता है जिसमें सभी पोस्ट होंगे। हम कुछ पृष्ठों को उत्पन्न करने के लिए डेटा का उपयोग कर सकते हैं।
यदि क्वेरी एक त्रुटि का सामना करती है, तो निर्माण प्रक्रिया को कैसे समझने के लिए रोकें। अगर सब कुछ ठीक है, तो घटक को प्राप्त करें और कॉल करें
पेज बनाएं
[2 9]
प्रदान किए गए पथ पर एक पृष्ठ उत्पन्न करने के लिए विधि।
उत्पन्न होने वाले पृष्ठों के साथ, अब आवश्यक है कि अब उन्हें ढूंढने का एक तरीका है। हम ऐसा करने के लिए मौजूदा इंडेक्स पेज घटक पर एक क्वेरी का उपयोग कर सकते हैं।
इस क्वेरी में, हम केवल शीर्षक और पद के पथ में रुचि रखते हैं। रिवर्स ऑर्डर में सबसे हालिया पोस्ट प्राप्त करने के लिए हम कुछ पैरामीटर भी पास करते हैं। विशेष रूप से यह क्वेरी प्रत्येक पोस्ट पर फ्रंट पदार्थ से तारीख की जांच कर रही है। प्रत्येक क्वेरी के लिए सिंटैक्स इसे उत्पन्न करने के लिए उपयोग किए जाने वाले प्लगइन पर निर्भर करेगा।
जगह पर सामग्री के साथ, ब्लॉग को किसी भी सीएसएस तकनीक का उपयोग करके स्टाइल किया जा सकता है, जिसमें सीएसएस-इन-जेएस समाधान जैसे स्टाइल-घटकों सहित
अंत में, घटक को डेटा का उपयोग करने के लिए अद्यतन करने की आवश्यकता होती है। Gatsby द्वारा प्रदान किया गया "लिंक" घटक यह जानने में सक्षम बनाता है कि किस घटकों को उस लिंक को प्रस्तुत करने की आवश्यकता है और यह सुनिश्चित करेगा कि यह तदनुसार सही बंडलों को प्राप्त करता है।
इसके साथ, हमारा ब्लॉग किया जाता है। यह सब बनी हुई है कि इसे स्मार्टन करें और गैट्सबी एक उत्पादन तैयार वेबसाइट बनाएं। चलाकर
एनपीएम रन बिल्ड
[2 9]
यह विकास के लिए उपयोग किए जाने वाले किसी भी संवर्द्धन को अलग कर सकता है और तैनात करने के लिए तैयार बंडलों को उत्पन्न कर सकता है। एक बार समाप्त होने के बाद, "सार्वजनिक" फ़ोल्डर को तब कहीं भी अपलोड किया जा सकता है जो स्थैतिक साइटों की सेवा कर सकता है। आपके ब्लॉग के लिए स्टोर करने के लिए फाइलें मिलीं? सुनिश्चित करें कि वे शानदार में सुरक्षित हैं
घन संग्रहण
[2 9]
।
यह लेख मूल रूप से अंक 314 में प्रकाशित किया गया था
जाल
[2 9]
, वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका।
यहां 314 जारी करें
या
यहां सदस्यता लें
।
संबंधित आलेख:
[2 9]
16
सर्वश्रेष्ठ मुफ्त ब्लॉगिंग प्लेटफॉर्म
[2 9]
एक हेडलेस सीएमएस के रूप में वर्डप्रेस का उपयोग करें
[2 9]