🔷 🚤 👨🏼‍🚒 डिवाइड-आधारित मेलिंग सूची: यह संभव है! ⬆️ 👩🏻‍🔧 🙍🏻

हब पर मेलिंग सूचियों का विषय अभी हाल ही में उठाया गया था, लेकिन वहाँ कोई भी एक पल को कवर नहीं किया गया था: यह सुनिश्चित करने के लिए कि इस मेलिंग की सामग्री सुंदर और स्वच्छ लेआउट के बाद कैसे संपादन योग्य है।

वास्तव में, अगर इसे इंडेंटेशन के लिए खाली gifs के साथ तालिकाओं पर रखा जाता है, तो परिणाम "अखंड" है, लेकिन भगवान ने मना किया है कि सामग्री प्रबंधक इसे संपादित करते हैं। सब कुछ तुरंत चलेगा, और विजीगी को यह नहीं पता कि इस तरह के डरावने काम कैसे करें।

तो क्या यह एक सामान्य, अद्भुत लेआउट तैयार करना संभव है जिसे बनाए रखना आसान है, आसानी से भागों से डाक में इकट्ठा किया जा सकता है, विज़िव से संपादित किया जा सकता है, और एक ही समय में मेल में अच्छा दिखता है?

मैं संक्षेप में, क्लाइंट को भेजी गई HTML फ़ाइल की आवश्यकताएं नहीं दोहराऊंगा:

कोई बाहरी शैली नहीं, कोई <शैली> टैग नहीं। सभी आवश्यक है कि शैली विशेषता में होना चाहिए। ओह, और कोई जावास्क्रिप्ट नहीं।
कोई नकारात्मक मूल्य नहीं। आम तौर पर। नकारात्मक मार्जिन, नकारात्मक पैडिंग - वे बस बाहर निकालते हैं। कितना गलत है।
मूल्यों में कोई स्थान नहीं। आम तौर पर। हाँ, हाँ। अलविदा पृष्ठभूमि-स्थिति।
पृष्ठभूमि छवियों के साथ समस्या। विशेषता पृष्ठभूमि = "" पर <तालिका> - काम करता है, पृष्ठभूमि-छवि - एक नियम के रूप में काम नहीं करता है। हां, हां, पृष्ठभूमि-स्थिति दूसरी बार अलविदा।
100% पाठ दृश्य। ग्राफिक तत्व एक तथ्य नहीं है कि वे सभी में लग रहे हैं, और न ही यह एक तथ्य है कि उपयोगकर्ता उन्हें "डाउनलोड" करने के लिए क्लिक करेगा।

कुछ और "सूक्ष्म" अंक हैं - उदाहरण के लिए, ऊंचाई को कुछ "बहुत स्मार्ट" वेबमेल (चलो अपनी उंगलियों को नहीं पोक कर सकते हैं) को मिनट-ऊंचाई के साथ बदल दिया जा सकता है, जो दिलचस्प प्रभाव पैदा कर सकता है। ऐसे क्षणों को तुच्छ रूप से हल किया जाता है - ऊंचाई + अधिकतम-ऊंचाई की एक जोड़ी को जोड़कर।

तो, कार्य: सही अद्भुत लेआउट के साथ HTML इनपुट है, इसके लिए सीएसएस है (यह इसमें लिखा गया है, या अलग से सेट किया गया है - यह बात नहीं है)। आपको HTML उत्पन्न करना होगा जो उपयोगकर्ता को भेजा जा सकता है। हम मैनुअल प्रोसेसिंग के विकल्प पर भी विचार नहीं करते हैं - जो कुछ भी हो सकता है वह स्वचालित होना चाहिए।

समस्या नंबर 1 को हल करने के लिए, Emogrifier को गुगली किया गया था। वह क्या कर रहा है? यह एक इनपुट के रूप में <body> टैग और सामान्य सीएसएस फ़ाइल की HTML सामग्री प्राप्त करता है, स्टाइल के साथ सभी वर्ग / आईडी विशेषताओं को प्रतिस्थापित करता है = "" आवश्यक शैलियों वाले विशेषता। लाभ!

समस्या नंबर 2 का समाधान थोड़ा अधिक जटिल अद्भुत लेआउट है, और लेआउट, शुरू में एक दूसरे के ऊपर तत्वों को मारने की आवश्यकता के बिना।

समस्या नंबर 3 का समाधान सरल है - सभी मिश्रित मापदंडों को स्वतंत्र लोगों में विभाजित किया गया है। यही है, मार्जिन के बजाय, मार्जिन-टॉप, मार्जिन-बॉटम, मार्जिन-लेफ्ट, मार्जिन-राइट जोड़ें। इसी तरह पैडिंग, बैकग्राउंड, फॉन्ट के साथ। एक टांका लगाने वाले लोहे के साथ एक युगल और इस तरह की माँ ने आसानी से इमोग्रफ़र के लिए एक पैच तैयार किया, जो इस ट्विस्ट को जारी करता है।

समस्या 4 का समाधान अधिक जटिल है। तो, यहां हमारे पास <h2> </h2> जिन्हें हम गुलाबी इंद्रधनुषी पृष्ठभूमि (या दाईं ओर गोल कोनों) के साथ दिखाना चाहते हैं। लेआउट अच्छा लग रहा है:

 #content h2{ background: url(../images/h2-bg.png) no-repeat left top #ef5580; width: 627px; height: 25px; margin: 24px 0 13px 0px; padding: 6px 31px 0 31px; font-size: 17px; font-family: Georgia, Tahoma, Verdana, Arial, FreeSans, sans-serif; color: white; font-weight: normal; }

लेकिन यह लगभग कभी काम नहीं करेगा! क्यों? मूल्यों में रिक्त स्थान, पृष्ठभूमि-यूआरएल के माध्यम से एक तस्वीर। समाधान? इसे कुछ इस तरह से बदला जाना चाहिए:

 <table background="images/h2-bg.png" bgcolor="#ef5580" border=0 style="border-collapse:collapse;margin:24px 0 13px"><tr><td><h2 style="padding:6px 31px 0;font:...;color:white;"> </h2></td></tr></table>

इस समाधान को लागू करने के लिए, एक मोटी फ़ाइल ली गई थी और ऐसी माँ बड़ी थी, जिसकी मदद से इमोग्रफ़र को आगे संसाधित किया गया था, जिसके परिणामस्वरूप शैलियों में एक नई सारणीबद्ध संपत्ति दिखाई दी थी। संभव मान: लपेटो, बदलें, एम्बेड करें।

tablify: रैप का अर्थ है कि इस तत्व को टेबल में लपेटा जाना चाहिए, जिससे बैकग्राउंड और मार्जिन टेबल पर चला जाए।
tablify: प्रतिस्थापित करने का अर्थ है कि इस तत्व को तालिका के साथ _replace_ होना चाहिए। इसके अलावा, अगर शुरू में तत्व खाली है, तो केवल <table> ही रहेगा। यदि खाली नहीं है, तो मूल सामग्री को नई तालिका के एकल कक्ष में रखा जाएगा।
tablify: एम्बेड का मतलब है कि वर्तमान तत्व की सभी सामग्री को एक तालिका में लपेटा जाना चाहिए।

अपने लेआउट के लिए उनके साथ खेलें। मुझे लगता है कि लेआउट को तेज करना आवश्यक नहीं है।

मैं अगले लेख में समस्या नंबर 5 के समाधान का वर्णन करूंगा। वहाँ मैं उन तकनीकों के बारे में बात करूँगा जिनका उपयोग पाठ के चित्र के तहत एक टेक्स्ट सब्सट्रेट को लागू करने के लिए किया गया है जो छवियों की दुर्गमता के मामले में उपलब्ध है।

इस पीड़ा और निराशा का परिणाम सूक्ष्म अभिलेखीय इमोग्रिफ़र-dcb-1.0.tar.bz2 (6k) में प्रस्तुत किया गया है।

कैसे महसूस करें? इसे खोल दो। HTML और HTML / स्टाइल / फ़ोल्डर बनाएँ। वहाँ index.html रखो, और शैलियों में - screen.css। (ठीक है, या तो भेजने वाले में रास्ते को सही करें। php। फिर mailer.conf.php में पत्र भेजने के लिए अपने SMTP के मापदंडों को लिखें। और प्रेषक में। वास्तविक बाहरी पते को इंगित करने के लिए $ रिमोट को ठीक करें जिसके माध्यम से फाइल उपलब्ध हैं, $ हेडर सरणी में - सही लिखें से और के लिए (आप अल्पविराम से कई अलग-अलग निर्दिष्ट कर सकते हैं।) प्रेषक को भेजें। चेकबॉक्स को चलाएं और चेक-प्रशंसा करें।

पीएम या टिप्पणियों में, आप मेलिंग सूचियों में मौजूदा लेआउट को अपनाने पर सवाल पूछ सकते हैं, लेकिन मुख्य सामग्री अगली पोस्ट में जाएगी, अगर कोई भी इसे आवश्यक पाता है।

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

डिवाइड-आधारित मेलिंग सूची: यह संभव है!

More articles: