Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Evernote
Webdesign

Postach.io के साथ एक ईवरोटेस पावर ब्लॉग बनाएं और थीम बनाएं

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Final product image
What You'll Be Creating

Postach.io एक ब्लॉगिंग सिस्टम है जिसमें अंतर है। इसमें विशेष रूप से एक विशेषता है जो इसे विशेष रूप से रोचक बनाती है: एडमिन पैनल के बजाय आप बस Evernote में अपनी पोस्ट बनाते हैं।

आप किसी भी Evernote ऐप का उपयोग कर सकते हैं, जिसका अर्थ है Postach.io ब्लॉगिंग बहु-प्लेटफॉर्म है, स्वचालित रूप से बैक अप है, और (यदि आप पहले से ही एक Evernote उपयोगकर्ता हैं) बहुत परिचित हैं।

इस ट्यूटोरियल में हम सीखेंगे कि आपका अपना Postach.io/Evernotepowered ब्लॉग कैसे सेटअप करें और इसके लिए कस्टम थीम कैसे तैयार करें।

1. अपने ब्लॉग की स्थापना

शुरू करने के लिए, यदि आपके पास पहले से कोई Evernote खाता नहीं है, तो आपको set one up करना होगा। एक बार जब आप एक Evernote खाते के साथ सेट अप करते हैं, तो Postachi.io पर जाएं और Evernote बटन का उपयोग करके "LOG IN" पर क्लिक करें।

आपको एक ऐसे पृष्ठ पर ले जाया जाएगा जहां आप अपने Evernote खाते तक पहुंच प्राप्त करने के लिए Postach.io को अधिकृत कर सकते हैं। आगे बढ़ने के लिए हरा "Authorize" बटन पर क्लिक करें।

अगली स्क्रीन में अपना नाम, ईमेल पता, साइट का शीर्षक और उपडोमेन जो आप अपनी साइट के लिए चाहते हैं, दर्ज करें, फिर पीला "साइट बनाएं" बटन पर क्लिक करें।

कुछ सेकंड के बाद आपका ब्लॉग सेटअप पूरा हो जाएगा और आपको अपनी नई साइट पर जाने के लिए एक लिंक के साथ एक सफल स्क्रीन दिखाई देगी:

डिफ़ॉल्ट रूप से आपका नया ब्लॉग इस तरह दिखेगा:

यदि आप अपने Evernote नोटबुक क्षेत्र पर एक नज़र डालते हैं, तो आपको अपनी साइट से मेल खाने वाले एक नाम के साथ एक नई प्रविष्टि दिखाई देगी। आप इस नोटबुक के भीतर अपने सभी ब्लॉग की सामग्री को बनाएंगे।

Tadaaa!

पोस्ट बनाना

आप अपने ब्लॉग पर जो भी Evernote app के माध्यम से पोस्ट कर सकते हैं, जिसका मतलब है कि आप अपने डेस्कटॉप, मोबाइल डिवाइस या ब्राउज़र आधारित ऐप के माध्यम से संपादित कर सकते हैं। Postach.io अधिक उपकरण तक पहुंच के लिए ब्राउज़र ऐप का उपयोग करने की सलाह देते हैं। हालांकि, ब्राउज़र और मैक डेस्कटॉप संस्करण के बीच मेरे अनुभव में मुझे कोई बड़ा अंतर नहीं मिल पाया, इसलिए मुझे लगता है कि यह व्यक्तिगत वरीयता के साथ आता हैI

Postach.io के माध्यम से ब्लॉग पोस्ट जोड़ना हास्यास्पद सरल है I बस अपने ब्लॉग को आवंटित नोटबुक में एक नया नोट बनाएं, अपना पोस्ट लिखें, फिर इसे "published" टैग करेंI

Evernote को "Sync" बटन दबाएं और पोस्ट को आपके ब्लॉग पर भेजा जाएगा।

इसके विपरीत, यदि आप एक पोस्ट को हटाना चाहते हैं, तो उसका "publised" टैग हटाएं और दोबारा सिंक करें।

इमेजेज जोड़ना

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

फ़ॉर्मेटिंग पोस्ट

आपके Postach.io पोस्ट की सामग्री को प्रारूपित करने के दो तरीके हैं। आप या तो Evernote के डिफ़ॉल्ट स्वरूपण उपकरण का उपयोग कर सकते हैं:

... या आप अपने Postach.io डैशबोर्ड "Details" टैब के माध्यम से मार्कडाउन सक्रिय कर सकते हैं:

नोट: यदि आप मार्कडाउन के लिए नए हैं, तो Markdown: The Ins and Outs पर एक नज़र डालें।

किसी एक के साथ आप अपनी पोस्ट पर अधिक नियंत्रण देने के लिए इनलाइन HTML डाल सकते हैं, हालांकि दो दृष्टिकोणों के बीच कुछ अलग अंतर हैं जो निर्धारित कर सकते हैं कि आप किसके लिए पसंद करते हैं।

मार्कडाउन फायदे:

बहुत बेहतर मार्कअप

मार्कडाउन सक्रिय के साथ आपकी पोस्ट में H टैग्स, P टैग्स और इसी तरह की उचित नियुक्ति होगी। दूसरी तरफ, डिफ़ॉल्ट स्वरूपण के साथ आपको div टैग में व्राप्पेड हर पंक्ति मिल सकती है, <br /> टैग्स द्वारा बनाए गए सभी लाइन ब्रेक्स (जो अंतर कहर पैदा कर सकता है), और पुरानी टैगों की प्रविष्टि जैसे <b> <strong>

H टैग्स का आसान प्रविष्टि

मार्कटाउन सक्रिय के साथ आप # मार्क्स को आसानी से H स्तर के शीर्षकों को सम्मिलित कर सकते हैं। डिफ़ॉल्ट स्वरूपण में केवल वृद्धि हुई फ़ॉन्ट आकारों को सम्मिलित करने की क्षमता नहीं है और वास्तविक शीर्षक नहीं है। डिफ़ॉल्ट स्वरूपण के साथ आप H टैग कोड को HTML के रूप में दर्ज कर सकते हैं, लेकिन आपके हेडिंग्स div टैग में व्राप्पेड होने की संभावना है।

डिफ़ॉल्ट स्वरूपण फायदे:

पोस्ट प्रारूपण WYSIWYG

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

आसान टेक्स्ट और इमेज संरेखण

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

यह एक या दूसरे है

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

मेरी व्यक्तिगत सिफारिश Markdown के साथ जाना है क्योंकि अन्यथा आपको div और br टैग कोड डिफ़ॉल्ट स्वरूपण उपकरण से उत्पन्न हो सकता है, आपके पैराग्राफ के बीच उचित अलगाव को रोकता है।

युक्ति: यदि आप पाते हैं कि आपके पास अपनी पोस्ट में लाइन ब्रेक है, जहां आप वास्तव में पैराग्राफ ब्रेक चाहते हैं, तो सभी टेक्स्ट का चयन करें, फिर ऑर्डर / अनारोडेड सूची बटन पर दो बार क्लिक करें। आपकी सामग्री के विरुद्ध एक सूची के अलावा और हटाने से अनुच्छेद स्वरूपण ठीक हो जाएगा।

एम्बेडिंग मीडिया

Postach.io आपको कई वीडियो कोड प्रदान करता है ताकि आपको यूट्यूब वीडियो, जिस्ट कोड स्निपेट्स, ट्वीट्स, साउंडक्लाउड ट्रैक आदि जैसी चीजें डाल सकें। पहली नज़र में यह कई एंबेड कोडों से निपटने के लिए लग सकता है, लेकिन प्रारूप हर एक के लिए बिल्कुल समान है, जिससे यह याद रखना आसान हो जाता है:

[<service name> url="<item url>"]

एक यूट्यूब वीडियो को जोड़ना इसलिए है:

[youtube url="http://www.youtube.com/watch?v=07ds8iv1XPM"]

...एक सारांश जोड़ रहा है:

[gist url="https://gist.github.com/postachio/9059890"]

...और इसी तरह। Postac.io डॉक्स में एम्बेड कोड की पूरी सूची देखें।

2. कस्टम थीम बनाना

आपके तैयार किए गए कई विषय-वस्तुएं हैं, जिन्हें आप अपने Postach.io डैशबोर्ड में Theme Browser टैब के नीचे देखकर अपने विषय पर आवेदन कर सकते हैं। हालांकि, थीम बनाना अपेक्षाकृत सीधे आगे है, इसलिए हम यहां अपने Postach.io ब्लॉग के लिए एक सरल विषय बनाने की प्रक्रिया को पूरा करेंगे।

हम Tomas Laurinavicius से this lovely design को कोडित करेंगे:

कैसे Postach.io थीम काम

मैं Postach.io विषयों के बारे में सबसे अधिक प्यार करता हूं, यह बात ये है कि वे पूरी तरह से समाहित एक ही टेम्पलेट फ़ाइल में हैं। आगंतुक को किस प्रकार की सामग्री दिखायी जानी चाहिए, यह निर्धारित करने के लिए सशर्त जांच चल रही है, और इन चेक के दायरे में उचित कोड लिखा है। आप इसे शीघ्र ही कार्रवाई में देखेंगे।

यह एक बहुत ही संक्षिप्त, साफ और सुव्यवस्थित थीसिंग सिस्टम के लिए बनाता है। आपके द्वारा बनाई जा रही पूरी टेम्पलेट फ़ाइल सिर्फ 170 लाइनें लंबी है।

Postach.io विषयों द्वारा उपयोग की जाने वाली टेम्पलेटिंग भाषा, Jinja2 है, जो टेम्पलेट टैग्स के प्लेसमेंट के साथ ही कुछ बुनियादी तर्क के लिए अनुमति देता है।

अपने कस्टम कोड को कॉपी और पेस्ट करके कस्टम थीम Postach.io में जोड़े जाते हैं। कोई वास्तविक थीम इंस्टॉलेशन ज़िप नहीं है जैसा कि आप अन्य प्लेटफ़ॉर्म के साथ मिल सकते हैं। इसके बजाय, आप अपने डैशबोर्ड में "Source Editor" टैब पर जाएं और सीधे अपना कोड पेस्ट करें:

जैसा कि हम साथ जाते हैं, आपको अपने विषय के HTML में पेस्ट करने की आवश्यकता होगी, इसलिए मैं उस फाइल में काम कर "theme.html" नामक एक ऑफ़लाइन फाइल बनाने की सलाह देता हूं, तब आप प्रत्येक चरण को पूरा करते समय कॉपी और पेस्ट करते हैं।

शुरू करने से पहले

इस ट्यूटोरियल के प्रयोजनों के लिए, अपने Postach.io डैशबोर्ड पर जाएं। और Details टैब के अंतर्गत आपकी Site Title "रचनात्मक सोच और डिजाइन पर एक छोटी सी पत्रिका "और आपके Site Description "आपके द्वारा आमतौर पर नहीं पढ़ा जाने वाली चीजें "पर सेट करें।

हम ऐसा करते हैं क्योंकि ये फ़ील्ड साइट के हेडर क्षेत्र को एक ही टेक्स्ट डिस्प्ले के साथ पॉप्युलेट करने के लिए इस्तेमाल की जाती हैं क्योंकि हमारे ब्लॉग डिजाइन PSD में हैं।

थीम CSS, इमेजेज और ड्रॉपबॉक्स होस्टिंग

Postach.io's थीम कोड संपादन दृष्टिकोण के नकारात्मक पक्ष अपने theme के साथ एक अलग CSS फ़ाइल अपलोड करने का कोई रास्ता नहीं है। इसका मतलब है कि आपके पास दो विकल्प हैं:

  1. अपने सभी CSS सीधे हेड सेक्शन में लिखें
  2. अपनी स्टाइलशीट को कहीं और होस्ट करें और इसमें लिंक करें।

क्योंकि मैं हमेशा एक CSS प्रीप्रोसेसर का उपयोग करना पसंद करता हूं और इसलिए मुझे एक दूसरे फाइल को चुनने की सलाह देने के लिए एक स्वसंपूर्ण फाइल होने की आवश्यकता है। जैसे, हमें अपनी स्टाइलशीट होस्ट करने के लिए कहीं और की आवश्यकता होगी। इस मामले में हम Dropbox का प्रयोग करेंगे। हम थीम का लोगो इमेज होस्ट करने के लिए ड्रॉपबॉक्स का उपयोग भी करेंगे।

स्टैटिक एसेट्स को होस्ट करने के लिए ड्रॉपबॉक्स का उपयोग करना बहुत आसान है। बस अपने स्थानीय ड्रॉपबॉक्स फ़ोल्डर में अपने प्रोजेक्ट के लिए फ़ोल्डर बनाएं, फिर जब आप अपने परिवर्तन सहेजते हैं तो वे स्वचालित रूप से आपके खाते में अपलोड हो जाएंगे।

किसी भी CSS या इमेज संपत्ति के लिए URL प्राप्त करने के लिए उन्हें अपने ड्रॉपबॉक्स फ़ोल्डर में राइट-क्लिक करें और "शेयर ड्रॉपबॉक्स लिंक" चुनें:

यह आपकी फ़ाइल के लिए सार्वजनिक रूप से दृश्यमान लिंक को आपके कैशे में जोड़ देगा।

महत्वपूर्ण: url को एक प्रारूप में कनवर्ट करने के लिए जो आपकी साइट के कोड में प्रयोग करने योग्य है, लिंक पेस्ट करें और फिर www को dl में बदलें।

अपना प्रोजेक्ट फ़ोल्डर सेटअप करें

गेंद रोलिंग प्राप्त करने के लिए, अपने ड्रॉपबॉक्स फ़ोल्डर के अंदर एक प्रोजेक्ट फ़ोल्डर बनाएं और इसके भीतर theme.html (ऊपर की जानकारी के अनुसार) नाम की फ़ाइल बनाएं।

हम अपने स्टाइल्स को LESS लिखने जा रहे हैं, अपने प्रोजेक्ट फ़ोल्डर में दो उप-फ़ोल्डर्स बनाएं, एक नामित css और दूसरा नाम LESSLESS फ़ोल्डर के अंदर style.less नामक फ़ाइल बनाएँ। आपकी साइट के लिए सभी स्टाइल्स को इस फ़ाइल में लिखा जाएगा, और बाद में css > style.css में संकलित किया जाएगा।

हम संकलित करने के लिए निःशुल्क ऐप Prepros का इस्तेमाल करेंगे। मैंने हाल के ट्यूटोरियल में आपको लेने के लिए अगले चरण को कवर किया है, इसलिए कृपया उधर जाए और उन सेक्शंस के इंस्ट्रक्शन को फॉलो करें जिनके टाइटल है Setup Autocompiling with Prepros and Incorporate LESSHat और Normalize.less

उन दो अनुभागों को पूरा करने के बाद आपके पास अपनी प्रोजेक्ट के लिए फ़ाइल और फ़ोल्डर संरचना होनी चाहिए, जो इस तरह दिखती है:

बेसिक HTML रेपर और हैडर

हम बुनियादी HTML5 सेटअप के साथ-साथ हमारे head सेक्शन भी शुरू कर देंगे। निम्नलिखित को अपनी theme.html फ़ाइल में जोड़ें, और इसे अपने Postach.io डैशबोर्ड "Source Editor" में कॉपी और पेस्ट करना याद रखें जब आप कर लेंगे:

आप ऊपर क्या देख रहे हैं यह एक त्वरित ठहरनेवाला है:

  • साइट पर एक उपयोगकर्ता कहां पर निर्भर करता है, title के आउटपुट।
  • {{header_meta}} टेम्पलेट टैग Postach.io's के उत्पादन के लिए डिफ़ॉल्ट मेटा टैग्स।
  • मोबाइल उपकरणों पर सही व्यवहार सुनिश्चित करने के लिए मेटा टैग।
  • डिजाइन में इस्तेमाल किए जाने वाले Google फ़ॉन्ट्स को लोड करना; Bentham और PT Serif।
  • Postach.io's में उपलब्ध स्थिर संसाधनों से FontAwesome स्टाइलशीट (फ़ॉन्ट आइकन के लिए) लोड करना।
  • ड्रॉपबॉक्स से हमारी कस्टम स्टाइलशीट लोड हो रही है।
    महत्वपूर्ण: आपको ऊपर वर्णित विधि के माध्यम से अपना स्टाइलशीट URL प्राप्त करने की आवश्यकता होगी।
  • Google Analytics एकीकरण, Postach.io dashboard से ली गई डेटा के साथ।

अब हम बॉडी सेक्शन में कुछ बुनियादी कोड जोड़ देंगे। अपने खोलने और बंद होने वाले बॉडी टैगों के बीच निम्न जोड़ें:

चलो इसे नीचे तोड़ दो। सबसे पहले, हम आगंतुक को Postach.io लॉगिन स्क्रीन पर है या नहीं पर एक सशर्त जांच चलाने के लिए Jinja2 सिंटैक्स का उपयोग करते हैं। यदि वे हैं, तो उन्हें प्रवेश प्रपत्र दिखाया गया है, और यदि नहीं, तो हम ब्लॉग डिस्प्ले शुरू करते हैं।

हमारे ब्लॉग डिस्प्ले कोड वाले क्षेत्र में टिप्पणी के साथ समझाया गया है <!-- Start blog display --> और <!-- End blog display -->। हम class के wrapper के साथ एक div से शुरू करते हैं, जिसका उपयोग हम अपने लेआउट की चौड़ाई को नियंत्रित करने के लिए करेंगे, और फिर हम अपने साइट के header कोड को रखेंगे।

header तत्व के ओपनिंग टैग पर हम यह देखते हैं कि उपयोगकर्ता ने साइट {% if site.cover_photo%} ... {% endif%} के साथ एक साइट कवर फोटो जोड़ दिया है। अगर एक कवर इमेज मौजूद है, तो हम इसे अपने बैकग्राउंड के लिए टेम्पलेट टैग {{site.cover_photo}} का उपयोग करके बैकग्राउंड इमेज के रूप में रखने के लिए इनलाइन स्टाइल्स का उपयोग करते हैं।

हेडर तत्व के भीतर हम लोगो को जगह देते है। यह पहला ब्लॉग डिजाइन PSD से एक पारदर्शी PNG के रूप में लोगो इमेज निर्यात करके किया जाता है। फिर हम अपने स्थानीय ड्रॉपबॉक्स फ़ोल्डर के अंदर प्रोजेक्ट फ़ोल्डर में इमेज डालें और कोड में अपना सार्वजनिक URL का उपयोग करें।

दोबारा, पहले आपको बताए गए विधि का उपयोग करके आपको अपने स्वयं के ड्रॉपबॉक्स फ़ोल्डर से प्राप्त URL को जोड़ना चाहिए।

Postach.io डैशबोर्ड "लोगो" फ़ील्ड पर ध्यान दें: एक कस्टम लोगो इमेज अपलोड करने के लिए डैशबोर्ड में एक जगह है, हालांकि इसे कम से कम 256px तक 256px होने का प्रतिबंध है। यह प्रतीत होता है क्योंकि यह आपके ब्लॉग की अवतार इमेज के रूप में भी युगल है, इस इमेज को रखने के लिए आप टेम्पलेट टैग {{site.avatar}} का उपयोग करते हैं। अतिरिक्त रूप से, यह फ़ील्ड पारदर्शी इमेजेज को संभाल नहीं सकती क्योंकि अपलोड की प्रक्रिया के दौरान एक सफेद बैकग्राउंड जोड़ दी गई है। इन कारणों के लिए, हम ड्रॉपबॉक्स पर लोगो की इमेज की मेजबानी कर रहे हैं और इसे वहां से लोड कर रहे हैं।

इसके बाद, हम साइट नाम को टेम्पलेट टैग {{site.name}} के साथ रखते हैं और यदि साइट {{ site.bio }} के माध्यम से साइट बायो/विवरण उपलब्ध है तो।

अंत में, सशर्त चेक {% endif %} के साथ बंद होने के बाद, हम Postach.io को इसके आवश्यक पाद लेख स्क्रिप्ट टेम्पलेट टैग {{footer_meta}} के साथ लोड करने की अनुमति देते हैं।

बेस और हैडर स्टाइलिंग जोड़ें

जैसा कि आपने प्रीप्रो को अपनी LESS फ़ाइल को स्वत: पूर्ण करने के लिए सेटअप किया है और आपके पास स्वचालित रूप से ड्रॉपबॉक्स अपलोड करने के लिए, आपको अपने लाइव साइट पर लागू किए गए अपने स्वयं के बदलावों को देखने के बाद आप उन्हें सहेजने के बाद एक या दो के बाद देख सकते हैं।

हम कुछ डिफ़ॉल्ट तत्वों के साथ-साथ आपकी रेपर के लिए कुछ आधार स्टाइल बनाकर शुरू करने जा रहे हैं। इस कोड को अपनी style.less में अनलाइन फ़ाइल को दो आयात लाइनों के तहत जोड़ें, जो आपने पहले जोड़ी थी, इसलिए आप निम्न के साथ समाप्त होते हैं:

आइए देखें कि हमने यहाँ क्या किया है।

हमारे PSD में हमारे पास 18px का आधार फ़ॉन्ट आकार है, हालांकि हमारे वास्तविक कोड में हम 18px आकार को स्पष्ट रूप से सेट नहीं करना चाहते हैं इसलिए हम सबसे अच्छा समग्र फ़ॉन्ट-आकार निर्धारित करने के लिए उपयोगकर्ताओं या ब्राउज़र की क्षमता को ओवरराइड नहीं करते हैं। आप "Readability First" पर अपने लेख में इसके पीछे तर्क के बारे में अधिक पढ़ सकते हैं।

इसके बजाय, हम @base_font_size वेरिएबल के खिलाफ 18 का मान सेट करते हैं और हम इसे इस गणना के माध्यम से चलाते हैं:

सबसे आम डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट आकार 16px है इसलिए यह गणना वेरिएबल @base_font_size को एक em आधारित मान पर सेट करती है जो कि अधिकांश डिवाइस पर 18px के बराबर होती है, इस स्थिति में 1.125em। हालांकि यह मूल्य लचीला होना चाहिए डिवाइसों या उपयोगकर्ताओं को 16px के अलावा किसी अन्य बेस फ़ॉन्ट आकार के साथ काम करना होगा।

हम इस मूल फ़ॉन्ट आकार को लाइन के साथ html तत्व पर लागू करते हैं: font-size: @base_font_size_ems;

अगले वेरिएबल आप देखेंगे जो इस कोड के साथ बनाया गया है:

यह गणना रिम मूल्य का पता लगाती है जो एक एकल पिक्सेल के आकार से मेल खाती है, आधार फ़ॉन्ट आकार के मूल्य के आधार पर।

हम इस वेरिएबल का उपयोग कर सकते हैं, जहां तक हम सामान्य रूप से एक px इकाई का इस्तेमाल करते हैं, हम इसे लक्ष्यित कर रहे पिक्सेल आकार की संख्या से गुणा करके, उदा. 50px के बजाय 50 * @px। हम तब पिक्सल में सोच सकते हैं, जो कि PSD से काम करना आसान है, लेकिन हम अपने CSS में rem आधारित आउटपुट को सुनिश्चित करेंगे कि डिजाइन के सभी तत्व पूरी तरह स्केलेबल और लचीले बने रहें।

शेष वेरिएबल्स का इस्तेमाल हमारे नियमित और हेडिंग फ़ॉन्ट परिवार के नाम और PSD से रंगों को संग्रहीत करने के लिए किया जाता है, जो कि हम हमारी साइट बैकग्राउंड, रैपर, हेडर और हैडर टेक्स्ट में उपयोग करेंगे।

बैकग्राउंड कोड, इमेजेज रंग, चौड़ाई और इतने पर निर्धारित करने के लिए शेष कोड शैली घोषणाओं के भीतर नए बनाए गए वेरिएबल्स को लागू करता है। ध्यान दें कि साइट रैपर पर width विशेषता को 100% तक सेट करने की तकनीक का हम उपयोग करते हैं, जिससे साइट छोटी स्क्रीन फिट बैठेगी, और चौड़ाई सेट करने के लिए एक max-width वाली विशेषता साइट बड़ी स्क्रीन पर दिखाई देगी।

हम भी img स्टाइल के माध्यम से रेस्पॉन्सिव स्केलिंग इमेजेज को सेट करते हैं, लिंक्स से अंडरलाइनेस हटाते हैं, हेड टेक्स्ट में PSD डिजाइन में उपयोग किए जाने वाले इमेजेज स्टाइल को लागू करते हैं, और display: table; का उपयोग करते हैं और display: table-cell; certical-align: middle; .header_wrap और .site_header स्टाइल्स पर क्रमशः शीर्ष लेख सामग्री को संरेखित करें।

हमने अभी तक हमारी साइट की रेपर इमेज अपलोड नहीं की है, इसलिए आपके ऊपर के सभी ब्लॉग को लागू करने के बाद इसे इस तरह दिखना चाहिए:

अपनी साइट कवर इमेज जोड़ें

अब आप अपने ब्लॉग डिजाइन PSD से साइट कवर इमेज निर्यात करना चाहिए। आपको एक इमेज 1200px चौड़ाई 600px उच्च होनी चाहिए। मेरा अपना निर्यात 55 KB के आसपास आया था।

इसे अपने ब्लॉग पर अपलोड करने के लिए अपने Postach.io डैशबोर्ड और "Setting" टैब पर जाएं। वहां आपको एक फ़ाइल के लिए अपने कंप्यूटर को ब्राउज़ करने के लिए "Cover Photo" और एक बटन पढ़ने वाला लेबल दिखाई देगा। आगे बढ़ो और अपनी कवर फोटो फाइल के लिए ब्राउज़ करें फिर उसे अपलोड करें:

Save Site Settings बटन पर क्लिक करें, अपने ब्लॉग पर वापस जाएं और आपको अब देखना चाहिए:

फुटर और सोशल लिंक

इसके बाद हम उस साइट के अन्य पहलू को जोड़ना चाहते हैं जो सभी पृष्ठों, सोशल लिंक और फुटर लेख पर दिखाई देगा।

.header_wrap डिवाईज से ऊपर और .wrapper समापन डिवीज़ से ऊपर अपने theme.html में निम्न कोड जोड़ें, फिर अपने Postach.io स्रोत संपादक को अपडेट करें:

अपनी style.less फ़ाइल में इन तीन वेरिएबल्स को जोड़ें:

और इन नई स्टाइल्स को भी जोड़ें:

वहाँ कुछ अपेक्षाकृत बुनियादी और कुछ बहुत अच्छा सामान इस कोड के साथ चल रहा है दोनों है।

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

हमने .site_footer वर्ग के लिए स्टाइल भी जोड़ लिया है, यह हमारे PSD डिजाइन से मिलान करने के लिए टेक्स्ट और आयाम के साथ एक ग्रे बैकग्राउंड दे रहा है।

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

इसलिए यदि आपने अपने पोस्टाक.ऑक्साउंट में केवल अपने ट्विटर लिंक विवरण दर्ज किया है और यह केवल एकमात्र आइटम दिखा रहा है जिसमें आपको यह दिखाई देगा:

लेकिन अगर आपने अपने फेसबुक और Google+ की जानकारी भी दर्ज की है तो आपको यह दिखाई देगा:

इस तकनीक के लिए Lea Verou को क्रेडिट।

Posts क्षेत्र जोड़ें

अब हम ब्लॉग के सबसे महत्वपूर्ण भाग में प्रवेश के लिए तैयार हैं, posts क्षेत्र।

इस कोड को अपने theme.html और उसके बाद अपने Postach.io स्रोत संपादक में अपने शीर्ष लेख और सामाजिक लिंक कोड के बीच जोड़ें:

हमारे main तत्व के भीतर ऐसा पहला मामला यह देखने के लिए एक सशर्त जांच है कि क्या हम posts की सूची में हैं, या तो होम पेज या एक टैग पेज या अगर हम एक ही post पर हैं। यह कोड के साथ किया जाता है:

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

पोस्ट सूची कोड

"Post list" के लिए कोड में एक अन्य सशर्त चेक यह देखने के लिए चला है कि क्या हम एक टैग पेज पर हैं, और यदि ऐसा है, तो उस टैग पेज के लिए एक हेडर दिखाया गया है।

इसके बाद हम {% if posts %}...{% endif %} के साथ पदों की उपस्थिति की जांच करते हैं और {% for post in posts %}...{% endfor %} के साथ उनके माध्यम से पाशन शुरू करते हैं प्रत्येक पोस्ट के लिए हम एक article तत्व बनाते हैं और पोस्ट शीर्षक, पोस्ट बनाया तिथि, पोस्ट सामग्री और एक "Read More" लिंक प्रदर्शित करते हैं।

हम यह भी देखते हैं कि पोस्ट का प्रकार Evernote एक स्रोत लिंक जोड़ता है, अर्थात web clipper से उत्पन्न कोई भी नोट, चेक {% if post.type == 'link'%} ... {% endif %} और अगर यह है तो संलग्न लिंक प्रदर्शित करें।

"Post list" डिस्प्ले के आखिरी भाग पर अंक लगाना, एक "Prev" और "Next" लिंक है। ध्यान रखें कि पृष्ठ पर अंक लगाना केवल मुख पृष्ठ पर काम करता है, न कि टैग पृष्ठों पर। यदि आप किसी टैग पेज पर पृष्ठांकन का उपयोग करने का प्रयास करते हैं तो आपको एक त्रुटि मिल जाएगी।

सिंगल पोस्ट कोड

"Single post" कोड बहुत कुछ मतभेदों के साथ "post list" के समान है।

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

दूसरा, हम पोस्ट की तारीख के बगल में पोस्ट के टैग प्रदर्शित करने के लिए कोड शामिल करते हैं। टैग केवल एक पोस्ट पर प्रदर्शित किए जा सकते हैं, पोस्ट सूची पर नहीं।

तीसरा, हम स्पष्ट कारणों के लिए एक "Read More" लिंक शामिल नहीं करते हैं, और इसके बजाय हम {{ theme.social.bar }} टेम्पलेट टैग को स्थान देते हैं जो सामाजिक साझाकरण उपकरण प्रदर्शित करेगा, साथ ही साथ Postach.io विशिष्ट "Like" और "Follow" अनुसरण करें।

पोस्ट्स क्षेत्र स्टाइलिंग

अपने style.less फ़ाइल में निम्न तीन वेरिएबल्स जोड़ें:

फिर ये नई स्टाइल्स जोड़ें:

उपरोक्त सभी टेम्पलेट और स्टाइल कोड के साथ आप बस लगभग पूरा कर चुके हैं!

आपका ब्लॉग अब होम पेज पर इस तरह दिखना चाहिए:

टैग पेज समान दिखाई देंगे, लेकिन पोस्ट सूची के ऊपर एक अतिरिक्त टैग शीर्षक के साथ।

एकल पोस्ट इस तरह दिखना चाहिए:

3. रेस्पॉन्सिव ट्वीक्स

अंतिम चीजों में से एक जो हम करना चाहते हैं, यह सुनिश्चित करना है कि आईफ्रेम एम्बेडेड सामग्री जैसे कि यूट्यूब वीडियो जवाबदेह ढंग से व्यवहार करते हैं, यानी वे उपलब्ध चौड़ाई में फिट होने और उनके पहलू अनुपात को बनाए रखने के लिए स्केल करते हैं।

यह आपके टेम्प्लेट में निम्न स्क्रिप्ट को जोड़कर प्राप्त किया जाता है, सही <!-- End blog display --> टिप्पणी से पहले:

हमें इसके लिए कुछ मीडिया क्वेरीज को जोड़ने की ज़रूरत है ताकि यह सुनिश्चित हो सके कि लेआउट स्वतन्त्र रूप से व्यूपोर्ट आकार में कमी के साथ समायोजित हो। अंत में अपनी फाइल में style.less जोड़ें :

आपकी आईफ्रेम स्क्रिप्ट और आपके मीडिया क्वेरीज के साथ, अब आपको एक पतली व्यूपोर्ट पर ऐसा कुछ मिलता है:

4. एक्स्ट्रास

Postach.io विषयों के साथ काम करने के लिए कुछ अतिरिक्त पहलु हैं। जिन्हें हमने ऊपर लागू नहीं किया था, लेकिन यह कि आप स्वयं के आवेदन के बारे में जानना चाहते हैं।

पोस्ट टाइप्स

Evernote पोस्ट चार प्रकारों में से एक हो सकता है; पोस्ट, पृष्ठ, लिंक या food। चीजों को सरल बनाए रखने के लिए हमने अभी सभी के लिए एक प्रकार का डिस्प्ले बनाया है, हालांकि आपको याद हो सकता है कि अगर पोस्ट में शामिल करने के लिए कोई लिंक होगा तो यह देखने के लिए कि हम {% if post.type == 'link'%} जांच करते हैं।

एक ही जांच करने के तरीकों का इस्तेमाल करके आप प्रत्येक अलग-अलग पोस्ट प्रकार के लिए एक पूरी तरह से भिन्न प्रस्तुति भी बना सकते हैं। ये प्रत्येक पोस्ट प्रकारों पर कुछ जानकारी है और वे आपके ब्लॉग का हिस्सा कैसे बना सकते हैं।

पोस्ट

{% if post.type == 'post' %}

नियमित, डिफ़ॉल्ट पोस्ट प्रकार

पेज

{% if post.type == 'page' %}

"page" के साथ टैग किए गए कोई भी नोट, उदाहरण के लिए "About me" जैसे स्थिर पृष्ठों को बनाने के लिए उपयोगी है। आइटम को पदों की सूची से हटा दिया जाएगा और यदि आप चुनते हैं कि आप इसका शीर्षक एक मेनू में जोड़ सकते हैं। इसे प्राप्त करने की विधि का वर्णन शीघ्र ही किया जाएगा।

लिंक

{% if post.type == 'link' %}

किसी भी चीज जो web clipper के साथ किसी और की साइट से कतरन के माध्यम से आती है, फिर अपने ब्लॉग पर फिर से पोस्ट करना।

Food

{% if post.type == 'food' %}

मैं यह नहीं समझ सकता था कि कैसे एक पोस्ट "Food" पोस्ट प्रकार के रूप में आती है। मैंने एंड्रॉइड के लिए मैक और ईवरोटे फूड के लिए Evernote दोनों के माध्यम से विभिन्न तरीकों का प्रयास किया।

मुझे ईवनोटे फूड के "Meal" अनुभाग में एक पद के रूप में ले जाने के लिए कुछ भी नहीं मिला है, बशर्ते मैं इसे अपने ब्लॉग की नोटबुक से संबद्ध नहीं कर सका। मैंने वेब क्लीपर और ईरनोट फूड के माध्यम से "My Cookbook" अनुभाग में जोड़ने की कोशिश की, और दोनों प्रयासों को "link" पोस्ट प्रकारों के रूप में वर्गीकृत किया गया। मैंने पोस्टिंग को "food" या "recipe" के रूप में भी टैगिंग करने का प्रयास किया और वहां कोई भाग्य नहीं था।

मुझे यकीन है कि "Food" पोस्ट प्रकार के लिए भयानक चीज़ बेकिंग कर रही है (देखें कि मैंने वहां क्या किया) लेकिन समय के लिए हमें अधिक जानकारी के लिए इंतजार करना पड़ सकता है इससे पहले कि हम देखते हैं कि यह क्या है।

Menus

यदि आप अपने ब्लॉग पर पृष्ठों का उपयोग कर रहे हैं तो आप एक मेन्यू भी तैयार कर सकते हैं। निम्न कोड आपके प्रकाशित पृष्ठों में से प्रत्येक का शीर्षक लेगा और यह मेनू तत्वों की एक सूचीबद्ध सूची के साथ एक nav तत्व में जोड़ देगा:

Disqus Comments

आप अपने मौजूदा एक पोस्ट कोड के नीचे निम्नलिखित कोड को जोड़कर बातचीत के लिए अपनी साइट को भी लैस कर सकते हैं:

उपरोक्त जानकारी आपके डैशबोर्ड में Details टैब के माध्यम से आपके Postach.io साइट में जोड़ी गई जानकारी के साथ काम करेगी।

समेट रहा हु

अब आपके पास अपना पहला Postach.io/Evernote संचालित ब्लॉग और इसके लिए कस्टम थीम बनाने की क्षमता है। आप इस साइट के दाएं साइडबार के शीर्ष के निकट स्थित Download Attachment बटन के माध्यम से पूरी थीम फ़ाइलों को भी डाउनलोड कर सकते हैं।

Postach.io पहले से ही एक सुपर स्पेशल मंच है जो कि अधिक उचित है जब आप विचार करते हैं कि यह काफी नया है। मैं यह देखने के लिए बहुत उत्सुक हूं कि सिस्टम के काम में और क्या हो सकता है। शायद भविष्य में हम ब्लॉगिंग प्रक्रिया को बढ़ाने के लिए, जैसे कि मार्कडाउन पूर्वावलोकन और जैसे जैसे ईवर्नोइट प्लग इन देखेंगे।

यदि आप एक Evernote उपयोगकर्ता हैं, और यहां तक कि अगर आप नहीं हैं, तो मैं अत्यधिक Postachi.io एक चक्कर देने की सलाह देता हूँ ताकि सभी तरह के ब्लॉगिंग का अनुभव हो।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.