कोई अच्छी तरह डिज़ाइन किया WeChat लेख खोलें और आप देखेंगे कि जो हिस्से इसे पेशेवर दिखाते हैं वे शब्द नहीं हैं — वे स्टाइल किए ब्लॉक हैं। ऊपर का ग्रेडिएंट टाइटल कार्ड, रंगीन पट्टी वाले छोटे सेक्शन हेडर, आख़िर में "हमें फ़ॉलो करें" कार्ड, गोल कोनों वाले कोट बॉक्स। इनमें से बहुत सारे SVG के रूप में बने हैं, और SVG ही वो है जो उन्हें उनका ठीक आकार और रंग बनाए रखने देता है चाहे कोई भी फ़ोन उन्हें रेंडर करे।
यह रहा झुंझलाने वाला हिस्सा: जब आपको कोई पसंद आती है और आप उसे दोबारा इस्तेमाल करने की कोशिश करते हैं, तो उसे कॉपी करना आमतौर पर उसे तोड़ देता है। आप WeChat एडिटर में पेस्ट करते हैं और लेआउट ढह जाता है, रंग सपाट हो जाते हैं, या आधा ब्लॉक ग़ायब हो जाता है। यह गाइड बताती है कि ऐसा क्यों होता है और उन ब्लॉक को कैसे निकालें ताकि वे बरक़रार रहें।
WeChat लेआउट के लिए SVG पर क्यों टिकता है
WeChat का एडिटर ज़्यादातर CSS हटा देता है। आप कोई स्टाइलशीट नहीं जोड़ सकते, और बहुत सारे इनलाइन स्टाइल फ़िल्टर हो जाते हैं। तो डिज़ाइनरों ने एक जुगाड़ ढूंढा: सजावटी टुकड़ों को SVG के रूप में बनाओ, जहां आकार, ग्रेडिएंट, और टेक्स्ट स्थिति सब SVG मार्कअप के भीतर रहते हैं। WeChat उस मार्कअप को ज़्यादातर अकेला छोड़ देता है, इसलिए ब्लॉक हर जगह एक जैसा रेंडर होता है।
यही वजह भी है कि ये ब्लॉक सिद्धांत रूप में इतने पुनः-उपयोग योग्य हैं। एक SVG टाइटल कार्ड आत्मनिर्भर है। यह किसी बाहरी फ़ाइल या पेज पर कहीं और परिभाषित किसी क्लास पर निर्भर नहीं। सिद्धांत में आप इसे उठाकर अपने ख़ुद के लेख में डाल सकते हैं। समस्या सिर्फ़ उठाने में है।
भोला कॉपी करना ब्लॉक क्यों तोड़ देता है
जब आप किसी रेंडर हुए पेज पर एक स्टाइल किया ब्लॉक चुनकर कॉपी करते हैं, तो आप आमतौर पर ब्राउज़र का रेंडर किया संस्करण पकड़ रहे होते हैं, मूल स्रोत नहीं। तीन चीज़ें ग़लत हो जाती हैं:
- लपेटने वाला मार्कअप खो जाता है। ब्लॉक अक्सर नेस्टेड कंटेनर के भीतर बैठता है जो स्थिति ले जाते हैं। सिर्फ़ दिखता हिस्सा पकड़ें और यह अपना डिब्बा खो देता है।
- एनकोड किए टुकड़े बिगड़ जाते हैं। SVG अक्सर बैकग्राउंड इमेज या फ़ॉन्ट को एनकोड किए डेटा के रूप में रखता है। गलत रास्ते से एक कॉपी-पेस्ट उस स्ट्रिंग को दूषित कर सकता है।
- आप इसे साफ़-सुथरे दोबारा रंग नहीं सकते। भले ही यह बच जाए, रंग मार्कअप में एक दर्जन जगहों में पके होते हैं। थीम को हाथ से बदलने का मतलब है कच्चे कोड में ढूंढना।
इन ब्लॉक को भरोसेमंद ढंग से दोबारा इस्तेमाल करने के लिए आप कोई स्क्रीनशॉट नहीं चाहते और आप ब्राउज़र के क्लिपबोर्ड अंदाज़े को नहीं चाहते। आप असली ब्लॉक मार्कअप चाहते हैं, एक स्वतंत्र इकाई के रूप में निकाला हुआ।
ब्लॉक को भरोसेमंद तरीक़े से निकालना
साफ़ तरीक़ा है पूरे लेख की स्रोत सामग्री कॉपी करना और किसी टूल को उसे पार्स करने देना, न कि स्क्रीन पर एक ब्लॉक हाथ से चुनने की कोशिश करना। IMG.DIY का Layout Module Extractor ठीक यही करता है: आप सामग्री पेस्ट करते हैं, यह ब्राउज़र के अपने DOM पार्सर से मार्कअप पढ़ता है, और पुनः-उपयोग योग्य स्टाइल किए ब्लॉक अलग करता है — SVG टाइपोग्राफ़ी कार्ड, शीर्षक वाले हेडर, फ़ॉलो-अस कार्ड, स्टाइल किए कोट, डिवाइडर — हर एक एक स्वतंत्र मॉड्यूल के रूप में।
एक अहम चेतावनी, साफ़-साफ़ कही: टूल किसी लेख को उसके URL से फ़ेच नहीं कर सकता। ब्राउज़र mp.weixin.qq.com के क्रॉस-साइट फ़ेच रोकते हैं, इसलिए कोई इन-ब्राउज़र टूल किसी WeChat पेज को लिंक से नहीं खींच सकता। आप सामग्री कॉपी करके पेस्ट करते हैं। यह इर्द-गिर्द काम करने वाली कोई सीमा उतनी नहीं जितना कि वेब का सुरक्षा मॉडल कैसे काम करता है।
चूंकि हर ब्लॉक अलग किया जाता है और अपने ख़ुद के Shadow DOM सैंडबॉक्स में पूर्वावलोकित होता है, एक मॉड्यूल की स्टाइल दूसरे में नहीं रिस सकती। जो आप पूर्वावलोकन में देखते हैं वही वो ब्लॉक असल में है।
बिना कोड छुए दोबारा रंगना
एक बार ब्लॉक निकल जाए, तो जो रंग समस्या मैंने पहले बताई वो आपके लिए हल हो जाती है। किसी मॉड्यूल में कोई भी रंग क्लिक करें और उसे बदलें — और वही रंग उस ब्लॉक में जहां भी दिखता है वहां अपडेट हो जाता है। तो एक नीला टाइटल कार्ड एक ही चाल में आपके ब्रांड का हरा बन जाता है, बजाय इसके कि आप SVG में दबे छह हेक्स मान एडिट करें। आप किसी मॉड्यूल के भीतर की प्लेसहोल्डर इमेज को अपनी से भी बदल सकते हैं।
यहीं "पुनः उपयोग" सैद्धांतिक होना बंद कर देता है। किसी और के लेख से आपको पसंद आया एक ब्लॉक आपके पैलेट में, आपके रंगों में एक ब्लॉक बन जाता है, आपके अगले टुकड़े में डालने के लिए तैयार।
अपनी ख़ुद की मॉड्यूल लाइब्रेरी बनाना
असली इनाम यह कुछ बार करना और जो आप निकालते हैं उसे रखना है। आपको पसंद आया हर मॉड्यूल आपके ब्राउज़र में रहने वाली एक लोकल लाइब्रेरी में सहेजा जा सकता है (localStorage के ज़रिए), और आप पूरी लाइब्रेरी को एक JSON फ़ाइल में एक्सपोर्ट करके उसका बैकअप ले सकते हैं या उसे किसी और मशीन पर ले जा सकते हैं। कुछ भी अपलोड नहीं होता और कोई अकाउंट नहीं — लाइब्रेरी आपकी है, आपके डिवाइस पर।
कुछ हफ़्तों में आप एक निजी किट बनाते हैं: दो-एक टाइटल कार्ड, एक सेक्शन हेडर जिस पर आप भरोसा करते हैं, एक फ़ुटर कार्ड, एक-दो डिवाइडर। जब कोई नया लेख लगाने का वक़्त हो, तो आप दूसरों के पोस्ट में दोबारा ढूंढने के बजाय अपने ख़ुद के सेट से खींचते हैं। किसी स्टाइल किए ब्लॉक को एडिटर में लाने के लिए, आप उसे इनलाइन HTML के रूप में कॉपी करके पेस्ट करते हैं — ब्लॉक अपनी फ़ॉर्मैटिंग रखता है क्योंकि स्टाइलिंग मार्कअप के साथ सफ़र करती है।
एक ब्लॉक से शुरू करें जो आपको हमेशा पसंद रहा हो, उसे साफ़-सुथरे निकालें, अपने ब्रांड में दोबारा रंगें, और सहेजें। यही पूरा चक्र है, और यह जुड़ता जाता है।