मॉड्यूलो ट्यूटोरियल वापस आ गए हैं!
हे सब! मैं गर्मियों के अंतराल के बाद मोडुलो ट्यूटोरियल के साथ वापस आ गया हूं। मेरे पास कार्यों के बारे में बहुत सारे ट्यूटोरियल हैं - इसलिए बने रहें। जैसा कि कहा गया है, यदि आपके पास मेरे अगले विषय के लिए कोई विशेष विचार है, तो मुझे टिप्पणियों में अवश्य बताएं!
मेरा पिछला ट्यूटोरियल एपीआई-संचालित पोकेमॉन डांस पार्टी घटक पर HTML वेब घटक कोड की 30 से कम पंक्तियों में एक सुपर त्वरित और मजेदार "HTML-केवल, नो-जेएस" ट्यूटोरियल था। मेरे पिछले कुछ ट्यूटोरियल थोड़े अधिक गंभीर थे, जैसे कि निजी और सार्वजनिक स्थिति के प्रबंधन पर यह अधिक उन्नत ट्यूटोरियल। यदि यह थोड़ा सूखा लगता है, तो आप भाग्यशाली हैं, क्योंकि आज का ट्यूटोरियल एक और मजेदार है, और एक और प्रिय वीडियो गेम के बारे में है... ज़ेल्डा: ब्रेथ ऑफ़ द वाइल्ड!
बेशक, हमेशा की तरह, इस ट्यूटोरियल में सीखी गई तकनीकें किसी भी एपीआई पर लागू होती हैं, इसलिए एपीआई-संचालित गैलरी के बारे में अधिक जानने के लिए पढ़ते रहें!
Hyrule Compendium API का उपयोग कैसे करें
यह ट्यूटोरियल 100% अद्भुत आरव बोर्थाकुर के मुफ़्त, एमआईटी-लाइसेंस प्राप्त और उदारतापूर्वक होस्ट किए गए ह्युरल कंपेंडियम एपीआई के लिए धन्यवाद है, जो ज़ेल्डा की पुनर्प्राप्ति के लिए एक मजेदार, प्रशंसक-रखरखाव डेटाबेस और एपीआई है: ब्रेथ ऑफ़ द वाइल्ड फ्रैंचाइज़ जानकारी और मीडिया. हम यहां उपलब्ध "मॉन्स्टर्स" एंडपॉइंट का उपयोग करेंगे: https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters
स्क्रीनशॉट
इसे अभी आज़माएं, 30 सेकंड से भी कम समय में: ??? आगे बढ़ना चाहते हैं? अंत तक स्क्रॉल करें और HTML कोड की 39 पंक्तियों को किसी भी स्थानीय HTML फ़ाइल में कॉपी करें, और फिर इसे अपने ब्राउज़र में खोलें। मोडुलो की कोई निर्भरता नहीं है और यह स्थानीय HTML फ़ाइलों में एम्बेडेड भी चलता है, इसलिए यह वास्तव में इतना आसान है!
डेटा से शुरुआत करें
आइए कोड की केवल 6 पंक्तियों से शुरुआत करें, इसे प्रदर्शित करने के लिए एक स्टेटिकडेटा और एक टेम्पलेट के साथ:
API DATA: {{ staticdata|json:2 }}
टेम्पलेट>
इस स्निपेट में, हमारे पास एक बहुत ही सरल, एक-पंक्ति है जो लौटाए गए Hyrule Compendium API की staticdata.data प्रॉपर्टी को डंप करता है। हम इसे अधिक पठनीय प्रारूप में प्रदर्शित करने के लिए |json:2 फ़िल्टर लागू करते हैं। स्टेटिकडेटा बॉक्स के बाहर JSON (अन्य प्रारूपों के बीच) का समर्थन करता है, आप बस इसे एपीआई का यूआरएल देते हैं और फिर आप डेटा का उपयोग शुरू कर सकते हैं। क्या स्टेटिकडेटा भ्रमित करने वाला है? GitHub API को एकीकृत करने पर इस ट्यूटोरियल को आज़माएं, या Modulo.js ट्यूटोरियल के ट्यूटोरियल के "StaticData" अनुभाग में इंटरैक्टिव उदाहरणों के साथ खेलें।
उस स्निपेट को चलाने का प्रयास करें। परिणामी डेटा देखें? हमें इसके माध्यम से for लूप के साथ लूप करना होगा।
एक छवि गैलरी बनाना
अब हम देख सकते हैं कि एक विशेषता .डेटा में ऑब्जेक्ट्स की एक सरणी है, आइए इसके माध्यम से लूप करें और एक गैलरी बनाएं:
{% for monster in staticdata.data %}
{% endfor %}
यह कई img टैग उत्पन्न करेगा, जिनमें से प्रत्येक को मूल JSON Array में ऑब्जेक्ट्स के "छवि" गुणों के लिए एक src= सौंपा गया है, और % के लिए {%} टेम्प्लेट-टैग सरणी में प्रत्येक आइटम के लिए HTML के एक बिट को डुप्लिकेट करने का सिंटैक्स है (प्रत्येक इंडेक्स का उल्लेख नहीं है, उदाहरण के लिए एक संख्या की गिनती 0). आगे के अभ्यास के लिए, फॉर-लूप में Modulo.js ट्यूटोरियल के भाग 4 में बहुत सारे इंटरैक्टिव उदाहरण हैं।
राज्य और लिपि का निर्माण
अगली सबसे महत्वपूर्ण बात एक नया स्क्रिप्ट टैग बनाना है, जिसका उपयोग हम एक सरल, एक-पंक्ति जावास्क्रिप्ट फ़ंक्शन लिखने के लिए कर सकते हैं:
मोडुलो का उपयोग करते समय स्क्रिप्टिंग के लिए यह एक मुख्य तकनीक है: ऐसे फ़ंक्शन बनाएं जो आपको जावास्क्रिप्ट का उपयोग करके स्थिति को संशोधित करने दें। इस मामले में, यह एक बहुत ही सरल ऑपरेशन करता है: "इस राक्षस को बाद के लिए सहेजें"। अधिक सटीक रूप से, यह दिए गए पेलोड के लिए "चयनित" राज्य चर निर्दिष्ट करता है। इस तरह, राज्य चर "चयनित" एपीआई से अभी-अभी चुने गए किसी भी राक्षस के लिए एक प्रकार का "स्टैश" बन जाता है।
क्लिक इवेंट संलग्न करना
अब, आइए पहेली का एक और भाग जोड़ें: क्लिक इवेंट संलग्न करना। नीचे देखें:
![जानें कि एपीआई समर्थित ज़ेल्डा बीओटीडब्ल्यू मॉन्स्टर गैलरी वेब घटक कैसे बनाएं]()
यह इवेंट अटैचमेंट सिंटैक्स (@click:=, के साथ किया गया था, इसमें
केस), और एक पेलोड विशेषता, जो हमें इस छवि पर क्लिक करके उस राक्षस के पास से गुजरने देती है जिसे हम चुन रहे हैं। यदि आप जावास्क्रिप्ट में नए हैं (और भले ही आप नहीं हैं!) तो इवेंट और स्क्रिप्ट टैग एक भ्रमित करने वाले विषय हो सकते हैं, इसलिए स्क्रिप्ट घटक भागों का उपयोग करने और इवेंट संलग्न करने के अधिक उदाहरणों के लिए इस पृष्ठ पर दिए गए उदाहरणों को पढ़ें।
क्लिक इवेंट संलग्न करना
अंत में, जब एक राक्षस का चयन किया जाता है तो आइए सशर्त रूप से राक्षस की जानकारी प्रस्तुत करें:
{% if state.selected %}
{{ state.selected.name|capfirst }}
{{ state.selected.description }}
{% else %}
Welcome to Hyrule Monster Guide!
← Select a monster to learn more
{% endif %}
यह प्रारंभ में "स्वागत" संदेश दिखाएगा (चूंकि state.selected शून्य के रूप में शुरू होता है)। फिर, जैसे ही कोई राक्षस छवि पर क्लिक करता है, state.selected वेरिएबल अब शून्य नहीं होगा, और
इसके बजाय सामग्री को h1 और p टैग के साथ स्वरूपित किया जाएगा, कुछ बदलावों के साथ (|कैपफर्स्ट पहले अक्षर को बड़ा बनाता है)।
- एंबेडेबल स्निपेट
इन सबको मिलाकर, हम साइड-बाय-साइड लेआउट बनाने के लिए एक डिस्प्ले: ग्रिड में सब कुछ लपेटते हैं, और स्क्रॉलबार को बाईं ओर एक ओवरफ्लो: ऑटो में लपेटते हैं। अंत में, हम दूसरे डिव (पैडिंग, मार्जिन और एक लीनियर-ग्रेडिएंट) में कुछ अंतिम सीएसएस बदलाव जोड़ सकते हैं, और हमें निम्नलिखित परिणाम मिलते हैं जिन्हें कहीं भी एम्बेड किया जा सकता है:
{% for monster in staticdata.data %}
{% endfor %}
{% if state.selected %}
{{ state.selected.name|capfirst }}
{{ state.selected.description }}
{% else %}
Welcome to Hyrule Monster Guide!
← Select a monster to learn more
{% endif %}
मुझे आशा है कि आपको यह ट्यूटोरियल पसंद आया होगा, यदि हां, तो इस तरह की और अधिक जानकारी के लिए फ़ॉलो करें!
![](\\\"{{)
{% endfor %} 
