🧗🏽 😰 ➿ स्क्वेयरस्पेस 6 पर वेबसाइट टेम्पलेट डेवलपमेंट 👨🏼‍🔬 🗜️ 🧝🏻

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

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

अब आप विकसित करना शुरू कर सकते हैं - आपकी साइट अब हर समय सुलभ है, केवल एक ठूंठ पते पर स्थित है, कैप्चा दर्ज करने या लॉगिन / पासवर्ड दर्ज करने की पेशकश कर रहा है। साइट को बनाते समय आसानी से समझने के लिए, आप डेवलपर के लिए "नंगे" टेम्पलेट का उपयोग कर सकते हैं, या आप थोड़ी चाल के लिए जा सकते हैं - भविष्य के डिजाइन और कार्यक्षमता की याद दिलाने वाला टेम्पलेट चुनें, और उसके बाद सेटिंग्स में साइट के डेवलपर-मोड को चालू करें, जो विकास के समय को काफी कम कर सकता है (और झांकना) किसी तरह लागू किया गया)।

साइट डेवलपर मोड चालू करें

स्विच करने के बाद, हम कनेक्शन के लिए डेटा के साथ जानकारी देखते हैं, टेम्पलेट के बारे में बुनियादी जानकारी, उपयोग किए गए संग्रह के बारे में, गिथस्टेरॉन और इतने पर। उसी पृष्ठ पर, मुख्य त्रुटियां दिखाई देंगी यदि विकास प्रक्रिया के दौरान कुछ गलत हो जाता है।

डेवलपर मोड चालू करने के बाद मूल जानकारी

इसलिए, जैसा कि आप देख सकते हैं, हमारे पास कनेक्ट और डीबग करने के दो तरीके हैं: Git और SFTP। यहां किसी के लिए यह अधिक सुविधाजनक है (या जैसा कि नियोक्ता की आवश्यकता होती है), लेकिन सरल परियोजनाओं के लिए यह मेरे लिए व्यक्तिगत रूप से SFTP का उपयोग करना आसान है, हालांकि स्पष्ट प्लस Git अच्छी तरह से टिप्पणी की गई कॉमिट्स के माध्यम से नेविगेट करने की क्षमता है, जो गलत हो गया और पहले वाले संस्करण में वापस आ गया। तो बस अपने पसंदीदा आईडीई या संपादक में SFTP कनेक्शन स्थापित करें और स्थानीय और दूरस्थ संस्करणों को सिंक्रनाइज़ करें (IDEA उपयोगकर्ताओं और JetBrains उत्पादों के लिए, सब कुछ बहुत सरल है - उपकरण -> तैनाती -> प्रकार: SFTP -> होस्ट / पोर्ट / लॉगिन / पासवर्ड -> साइट की जड़ का चयन करें। इसके अलावा मैपिंग टैब पर स्थानीय परियोजना की जड़ को मैप करना न भूलें, यदि आप Ctrl + S द्वारा स्वचालित अपलोड सक्षम करना चाहते हैं)।

डिफ़ॉल्ट रूप से स्क्वायरस्पेस पर विकसित सभी साइटें शामिल हैं: html5shiv.js , modernizr.js , और normalize.css , चीजों की आवश्यकता होती है, हमें इसकी देखभाल करने की आवश्यकता नहीं है। कम प्रीप्रोसेसर भी सर्वर साइड पर "आउट ऑफ बॉक्स" काम करता है - आप सुरक्षित रूप से कम सिंटैक्स का उपयोग कर सकते हैं, आप अलग-अलग फाइलों में सीएसएस स्टाइल बना सकते हैं - सर्वर उपयोगकर्ता को एक संयुक्त सीएसएस फाइल देगा। वही जावास्क्रिप्ट पर लागू होता है - डिफ़ॉल्ट रूप से, YUI3 फ्रेमवर्क का उपयोग किया जाता है , लेकिन आप अपने पसंदीदा फ्रेमवर्क या स्क्रिप्ट को कनेक्ट कर सकते हैं - आउटपुट पर उन्हें एक फ़ाइल में भी छोटा किया जाएगा। डिफ़ॉल्ट टेम्पलेट इंजन Json-T है ।

टेम्पलेट की संरचना कुछ इस तरह दिखती है:

पैटर्न संरचना

1. मुख्य कॉन्फ़िगरेशन फ़ाइल टेम्पलेट .conf

मैं परियोजना की जड़ से शुरू करूंगा, क्योंकि यह वह जगह है जहां साइट प्रदर्शित करने के लिए सबसे महत्वपूर्ण सेटिंग्स स्थित हैं। टेम्पलेट का दिल टेम्पलेट है। कॉन्फ़िगरेशन फ़ाइल। इस फ़ाइल में, टेम्प्लेट और ऑथरशिप का नाम वैकल्पिक रूप से निर्दिष्ट किया गया है, साथ ही आपकी साइट का लेआउट ( लेआउट ), साइट पर नेविगेशन ( नेविगेशन ) और प्रदर्शित करने के लिए उपयोग की जाने वाली शैलियों को यहां इंगित किया गया है। यह कुछ इस तरह दिखता है:

{ "name" : "Something", "author" : "michael", "layouts" : { "Default" : { "name" : "Default", "regions" : [ "header", "content", "footer" ] }, "Home" : { "name" : "Homepage", "regions" : [ "header", "contenthome", "events", "footer" ] }, "SidebarLeft" : { "name" : "WithLeftSidebar", "regions" : [ "header", "contentwithsidebar", "footer" ] }, "SidebarLeft2" : { "name" : "WithLeftSidebar2", "regions" : [ "header", "contentwithsidebar2", "footer" ] } }, "navigations" : [ { "title" : "Main Navigation", "name" : "mainNav" }, { "title" : "Secondary Navigation", "name" : "secondaryNav" } ], "stylesheets" : [ "base.less", "typography.less" ] }

Template.conf की सामग्री

जैसा कि आप देख सकते हैं, पहले से ही इस स्तर पर यह मान लेना वांछनीय है कि साइट के पृष्ठ क्या दिखेंगे, सामग्री क्या होगी, और इसी तरह। यह आपको पृष्ठों के लिए वांछित लेआउट और क्षेत्र ( क्षेत्र ) को तुरंत चुनने और सेट करने की अनुमति देगा। इस विशेष मामले में, निम्नलिखित लेआउट निर्दिष्ट हैं:

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

भविष्य में, पेज बनाते समय, दृश्य मोड में पहले से ही एक या किसी अन्य लेआउट का चयन करना संभव होगा।

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

टेम्पलेट.कॉन्फ़ फ़ाइल के अंतिम पैराग्राफ में, आप निर्दिष्ट करते हैं कि कौन सी शैलियों का उपयोग करने के लिए स्टाइल फ़ोल्डर से। डिफ़ॉल्ट रूप से, reset.css (उर्फ normalise.css ) पहले से ही इस फ़ोल्डर में निहित है और आपको इसे निर्दिष्ट करने की आवश्यकता नहीं है, यह भी कनेक्ट करेगा।

2. क्षेत्र फाइलें

सरलतम स्थिति में, मार्कअप में एक क्षेत्र शामिल हो सकता है, आइए इसे site.region कहते हैं। इसकी सामग्री लगभग इस प्रकार होगी:

 <!doctype html> <html> <head> {squarespace-headers} </head> <body class="{squarespace.page-classes}" id="{squarespace.page-id}"> <header id="header"> <h1><a href="/">{website.siteTitle}</a></h1> <squarespace:navigation navigationId="mainNav" template="navigation" /> </header> <div id="canvas"> <section id="page" role="main"> {squarespace.main-content} </section> <aside id="sidebar"> <squarespace:block-field id="sidebarBlocks" /> </aside> </div> </body> </html>

सामग्री साइट

स्क्वायरस्पेस टैग और JSON-T सिंटैक्स में जाने के बिना, और इसलिए यह स्पष्ट हो जाता है कि हेडर और साइडबार के साथ न्यूनतम पेज लेआउट बनाया गया है। लेकिन मेरा सुझाव है कि आप साइट के अलग-अलग क्षेत्रों के बीच कार्यात्मक रूप से अंतर करते हैं - यह परियोजना को अधिक बनाए रखने योग्य बनाता है, लेकिन बाद में अपने आप में बदलाव करना आसान है, यह उल्लेख करने के लिए नहीं कि आप किसी ऐसे व्यक्ति के लिए किस तरह का पक्ष लेते हैं, जिसे आपके बाद / इसके बजाय इसके साथ काम करना होगा।

इस प्रकार, शीर्ष लेख .region फ़ाइल इस तरह दिख सकती है:

 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <!--INCLUDE SQS SCRIPTS, META TAGS AND USER CONTENT FROM THE CODE INJECTION TAB--> {squarespace-headers} </head> <body id="{squarespace.page-id}" class="{squarespace.page-classes}"> <!--HEADER--> <header class="navbar navbar-default navbar-static-top navbar-inverse"> <div class="container fade-in"> <squarespace:navigation navigationId="mainNav" template="nav" /> </div> </header>

Header.region फ़ाइल

यहां, {squarespace-headers} कंस्ट्रक्शन में सर्च इंजन और सोशल नेटवर्क के लिए मेटा टैग शामिल हैं, स्क्वरस्पेस स्क्रिप्ट को जोड़ता है और आपको विजुअल मोड में कोड डालने की अनुमति देता है। <Squarespace: navigation navigationId = "mainNav" टेम्पलेट = "nav" /> टैग टेम्पलेट के रूप में ब्लॉक निर्देशिका से nav.block फ़ाइल का उपयोग करके mainNav अनुभाग को जोड़ता है।

शेष * .region फाइलें उसी तरह बनाई गई हैं - आवश्यक लेआउट बनाएं और आवश्यक स्क्वेर्स्पेस ब्लॉक को कनेक्ट करें। ये ब्लॉक हो सकते हैं:

* । फाइलें खोलना । जैसा कि शीर्ष लेख के साथ उदाहरण में। आप कनेक्ट कर सकते हैं, उदाहरण के लिए, तहखाने या साइडबार के लिए एक अलग नेविगेशन अनुभाग (संबंधित नाम निर्दिष्ट करके)
स्क्वरस्पेस टैग । उदाहरण के लिए, {squarespace.main-content} निर्दिष्ट करते हुए, हम आपके द्वारा साइट के दृश्य भाग में बनाए गए पृष्ठों की सामग्री को जोड़ते हैं।

सबसे उपयोगी टैग्स में से, मैं निम्नलिखित में से एक चाहूँगा:
1. <स्क्वैरस्पेस: ब्लॉक-फील्ड आईडी = "ब्लॉकनेम" कॉलम = "12" /> । यह एक खाली ब्लॉक बनाता है, जो स्तंभों की संख्या = "12" को दर्शाता है, हम इसे मूल तत्व की पूरी संभावित चौड़ाई तक बढ़ाएंगे (हां, स्क्वैरस्पेस में 12-स्तंभ ग्रिड-सिस्टम है, जैसे कई लोकप्रिय फ्रेमवर्क, मैं इसे नीचे से स्पर्श करूंगा)। दृश्य मोड में इस खाली ब्लॉक में, आप बाद में स्क्वरस्पेस विजेट्स या अपना स्वयं का html / js कोड जोड़ सकते हैं।
2. <squarespace: query collection = "ब्लॉग" सीमा = "3"> </ squarespace: query> । निर्दिष्ट संग्रह के लिए एक अनुरोध करेंगे (इस मामले में, ब्लॉग ), यह आपकी गैलरी, ब्लॉग, माल की सूची और पसंद हो सकता है, और JSON में सीमा में निर्दिष्ट वस्तुओं की संख्या को वापस कर सकता है। फिर उन्हें एक ही JSON-T के साथ पार्स करें और उन्हें मुख्य पृष्ठ पर, साइडबार में या जहाँ भी आप चाहें, प्रदर्शित करें। इस समय, क्वेरी कैशिंग का आयोजन नहीं किया जाता है, इस मामले के साथ इसे ज़्यादा नहीं करने की सिफारिश की जाती है।

3. ब्लॉक

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

navigation.block

 <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span> <span class="icon-bar"></span><span class="icon-bar"></span> </button>{.section website}<a class="navbar-brand" href="/">{.section logoImageUrl}<img src="{logoImageUrl}?format=original" alt="{siteTitle}"/>{.end}{.end}</a></div> {.section items} <div class="collapse navbar-collapse navbar-ex1-collapse middle"> <ul class="nav navbar-nav navbar-right"> {.repeated section @} {.folder?} <li class="folder dropdown"> <a class="{.if folderActive}folder-active{.end}" role="button" data-toggle="dropdown" href="#">{collection.navigationTitle}<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> {.repeated section items} {.collection?} <li class="{collection.typeLabel}-collection" role="presentation"> <a href="{collection.fullUrl}" class="{.section active}active{.end}" role="menuitem" tabindex="-1">{collection.navigationTitle}</a> </li> {.end} {.section externalLink} <li class="external-link"> <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a> </li> {.end} {.end} </ul> </li> {.or} {.collection?} <li class="{collection.typeLabel}-collection"> <a href="{collection.fullUrl}" class="{.section active}folder-active{.end}">{collection.navigationTitle}</a> </li> {.end} {.section externalLink} <li class="external-link"> <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a> </li> {.end} {.end} {.end} </ul> </div> {.end}

फ़ाइल नेविगेशन

तुरंत एक आरक्षण करें कि बूटस्ट्रैप 3 का उपयोग यहां किया गया था, इसलिए आप परिचित / अपरिचित वर्ग देखें। JSON-T मार्कअप का उपयोग यहां पूरी तरह से किया गया है, स्पष्ट करें कि इसके लिए क्या जिम्मेदार है।

 {.section website}<a class="navbar-brand" href="/">{.section logoImageUrl}<img src="{logoImageUrl}?format=original" alt="{siteTitle}"/>{.end}{.end}</a>

इस डिज़ाइन के साथ, हमने अपनी साइट के वैश्विक दायरे को "खोला", जाँच की कि क्या लोगो सेट किया गया था (दृश्य सेटिंग्स में लोड) और वास्तव में इसे प्रदर्शित किया गया था।

 {.section items} <div class="collapse navbar-collapse navbar-ex1-collapse middle"> <ul class="nav navbar-nav navbar-right"> {.repeated section @} {.folder?} <li class="folder dropdown"> <a class="{.if folderActive}folder-active{.end}" role="button" data-toggle="dropdown" href="#">{collection.navigationTitle}<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> {.repeated section items} {.collection?} <li class="{collection.typeLabel}-collection" role="presentation"> <a href="{collection.fullUrl}" class="{.section active}active{.end}" role="menuitem" tabindex="-1">{collection.navigationTitle}</a> </li> {.end} {.section externalLink} <li class="external-link"> <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a> </li> {.end} {.end} </ul> </li>

यहां हम साइट पर हमारे सभी पृष्ठों के लिए {.section आइटम} के निर्माण का उल्लेख करते हैं, जो कि नेविगेशन अनुभाग में आपके द्वारा डाली गई दृश्य सेटिंग्स में हैं। इसके बाद, हम एक "चक्र" - {.repeated अनुभाग @} शामिल करते हैं , जिसमें प्रत्येक आइटम (पृष्ठ, ब्लॉग, संग्रह, गैलरी, उत्पाद, या आपके द्वारा बनाई गई किसी भी चीज़ के साथ पृष्ठ) से पूछताछ की जाएगी। वास्तव में, {.folder?} और {.collection?} दोनों परीक्षण करते हैं कि वर्तमान वस्तु क्या है ।
यदि यह एक फ़ोल्डर है, तो इसका एक लिंक बनाया जाता है और दूसरा चक्र {.repeated अनुभाग आइटम} शुरू किया जाता है, जिसमें इस फ़ोल्डर की सामग्री अब प्रदूषित हो जाती है (और यह केवल बाहरी लिंक के साथ पृष्ठ, संग्रह या सामग्री हो सकती है) । यहां यह ध्यान दिया जाना चाहिए कि फिलहाल केवल एक स्तर के घोंसले के शिकार का समर्थन किया जाता है, इसलिए यदि आपके पास मेनू में कई स्तर हैं, तो आपको मुश्किल होने की आवश्यकता है।
एक सुविधाजनक क्षण - आप यह परीक्षण कर सकते हैं कि क्या कोई दिया गया फ़ोल्डर या लिंक {.if फ़ोल्डर के साथ सक्रिय है} निष्क्रिय हो गया है फ़ोल्डर सक्रिय {.end} और {। सक्रिय होना} सक्रिय {.end} उन्हें वांछित वर्ग असाइन करता है (और उन्हें आवश्यक शैलियों के साथ वर्णन करता है)। बहुत सुविधाजनक - नेविगेशन में वर्तमान पते और लिंक पतों की तुलना के साथ अपनी खुद की बाइक बनाने की कोई आवश्यकता नहीं है।

 {.or} {.collection?} <li class="{collection.typeLabel}-collection"> <a href="{collection.fullUrl}" class="{.section active}folder-active{.end}">{collection.navigationTitle}</a> </li> {.end} {.section externalLink} <li class="external-link"> <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a> </li> {.end} {.end} {.end} </ul> </div> {.end}

कोड का यह अंतिम टुकड़ा एक ही काम करता है जो हमने फ़ोल्डर मतदान चक्र के अंदर किया था - यह शेष तत्वों की जांच करता है, उनके लिए लिंक बनाता है, आवश्यक कक्षाओं और विशेषताओं (बाहरी लिंक के लिए) की स्थापना करता है। यह सुनिश्चित करना महत्वपूर्ण है कि सभी खंड ( {.end} ) बंद हैं, अन्यथा यह सही ढंग से काम नहीं करेगा।

4. संग्रह

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

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

कम से कम, संग्रह को * .conf और * .item फ़ाइलों की आवश्यकता होती है ।

इसके अलावा, मैं इन फ़ाइलों की सामग्री को बिना स्पष्टीकरण के दे दूंगा, मुझे लगता है कि यदि आप यहां पढ़ते हैं, तो मैंने बिल्डिंग टेम्प्लेट के बिंदु (टिप्पणियों और अनुभाग के नाम खुद के लिए बोलते हैं) को पकड़ा।

blog.conf

 { "title" : "Blog", "ordering" : "chronological", "addText" : "Add Post", "acceptTypes": ["text"], "promotedBlocks" : [ "" ] "icon": "blog" }

Blog.conf फ़ाइल

blog.item

 {.repeated section items} <article class="{@|item-classes}" id="article-{id}" data-item-id="{id}"> <div class="blog-wrapper"> <div class="post{.passthrough?} link-list-item{.end}"> <!--POST HEADER--> <header> {.if title}<h2 class="entry-title" data-content-field="title">{.passthrough?}<a href="{sourceUrl}" target="_blank">{title}<span class="passthrough">→</span></a>{.or}<a href="{fullUrl}">{title}</a>{.end}</h2>{.end} </header> <!--POST BODY--> {.excerpt?} <div class="excerpt-content">{.main-image?} <div class="excerpt-thumb"><img {@|image-meta} /></div>{.end} {excerpt}<div class="clearfix"></div><a class="inline-read-more" href="{fullUrl}">Click to read more ...</a></div> <div class="clearfix"></div> {.or} {.section body}<div class="entry-content">{@}</div>{.end} {.end} <!--POST FOOTER--> <footer class="article-meta"> <div class="article-author"> {.section author}<span class="author"><a href="{collection.fullUrl}?author={id}" rel="author"><i class="icon-user"></i>{displayName}</a><span class="delimiter">|</span></span>{.end} </div> <div class="article-dateline"> <i class="icon-calendar"></i><time class="published" datetime="{addedOn|date %F}">{addedOn|date %A, %B %d, %Y at %l:%M %p}</time><span class="delimiter">|</span> </div> <div class="shareLoveButtons"> <a href="#">{@|social-button-inline}</a> </div> <div class="post-entry-injection">{postItemInjectCode}</div> </footer> </div> <!-- / post --> </div><!-- / blog-wrapper --> </article> <div class="clearfix"></div> {.end} <!--PAGINATION--> {.section pagination} <nav class="page-pagination"> <div class="content-wrapper"> {.if pagination.prevPage}<a href="{prevPageUrl}" id="prevLink"><i class="icon-chevron-left"></i> Previous |</a> {.or}<!-- <a href="{collection.fullUrl}"><i class="icon-list"></i>{collection.title}</a> -->{.end} <!--HOME PAGE--> <a href="{collection.fullUrl}"><i class="icon-list"></i> Main |</a> {.if pagination.nextPage}<a href="{nextPageUrl}" id="nextLink">Next <i class="icon-chevron-right"></i></a> {.or}<a href="{collection.fullUrl}"><i class="icon-list"></i>{collection.title}</a>{.end} </div> </nav> {.end}

Blog.list फ़ाइल

blog.item

 {.section pagination} <nav class="blog-pagination"> {.section prevItem} <a href="{fullUrl}"><i class="icon-chevron-left"></i> {title} |</a> {.or} <a class="disabled"></a> {.end} <!--HOME PAGE--> <a href="{collection.fullUrl}"><i class="icon-list"></i> Main |</a> <!--OLDER PAGE--> {.section nextItem} <a href="{fullUrl}">{title} <i class="icon-chevron-right"></i></a> {.or} <a class="disabled">End off posts</a> {.end} </nav> {.end} {.section item} <article class="{@|item-classes}" id="article-{id}" data-item-id="{id}"> <div class="blog-wrapper item"> <div class="post{.passthrough?} link-list-item{.end}"> <!--POST HEADER--> <header> {.if title}<h2 class="entry-title" data-content-field="title">{.passthrough?}<a href="{sourceUrl}" target="_blank">{title}<span class="passthrough">→</span></a>{.or}<a href="{fullUrl}">{title}</a>{.end}</h2>{.end} </header> <!--POST BODY--> <!--POST BODY--> {.section body}<div class="entry-content">{@}</div>{.end} <!--POST FOOTER--> <footer class="article-meta"> <div class="article-author"> {.section author}<span class="author"><a href="{collection.fullUrl}?author={id}" rel="author"><i class="icon-user"></i>{displayName}</a><span class="delimiter">|</span></span>{.end} </div> <div class="article-dateline"> <i class="icon-calendar"></i><time class="published" datetime="{addedOn|date %F}">{addedOn|date %A, %B %d, %Y at %l:%M %p}</time><span class="delimiter">|</span> </div> <div class="shareLoveButtons"> <a href="#">{@|social-button-inline}</a> </div> <div class="clearfix"></div> <div class="post-entry-injection">{postItemInjectCode}</div> </footer> </div><!-- /post --> </div><!-- /content-wrapper --> </article> <div class="clearfix"></div> {.end} <!--PAGINATION--> {.section pagination} <nav class="blog-pagination"> {.section prevItem} <a href="{fullUrl}"><i class="icon-chevron-left"></i> {title} |</a> {.or} <a class="disabled"></a> {.end} <!--HOME PAGE--> <a href="{collection.fullUrl}"><i class="icon-list"></i> Main |</a> <!--OLDER PAGE--> {.section nextItem} <a href="{fullUrl}">{title} <i class="icon-chevron-right"></i></a> {.or} <a class="disabled">End off posts</a> {.end} </nav> {.end} {.section item} <!--COMMENTS--> {.comments?} <div class="comments">{@|comments}</div> {.end} {.end}

Blog.item फ़ाइल

5. शैलियाँ ( शैलियाँ कैटलॉग)

सबसे पहले, स्क्वैरस्पेस में 12 स्तंभों का अपना ग्रिड है। मार्कअप बूटस्ट्रैप के समान है, इसलिए पंक्ति = sqs-row , col-md-4 = sqs-col-4 । इसलिए मार्कअप में इस तथ्य का उपयोग करना काफी संभव है, लेकिन मैंने दस्तावेज़ीकरण में इन अंतर्निहित शैलियों के विवरण नहीं देखे हैं, इसलिए मुझे "इसे" प्राप्त करने की आवश्यकता है। और भले ही आप अपनी खुद की शैलियों का निर्माण कर रहे हों या किसी तरह के ढांचे का उपयोग कर रहे हों - स्क्वेयरस्पेस "पसंद" को अपने लेआउट्स को ब्लॉक में लपेटने के लिए - यह बिल्कुल भी हस्तक्षेप नहीं करता है, लेकिन अगर कुछ गलत हो जाता है, तो बस निरीक्षक में देखें - नहीं क्या मार्कअप में कुछ जोड़ा गया था। अन्यथा, सब कुछ सामान्य है, वैध लेस या CSS सिंटैक्स का उपयोग करें।

चाल यह है कि शैलियों में आप ट्वीक्स का उपयोग कर सकते हैं, जो स्क्वरस्पेस में निर्मित दृश्य शैली संपादक में निर्दिष्ट सीमाओं के भीतर आपके द्वारा निर्दिष्ट मापदंडों को बदलना संभव बनाता है। यह बहुत सुविधाजनक है - ग्राहक स्वयं तो कुछ बदल सकता है, इसे कॉन्फ़िगर कर सकता है, और अक्सर उसके लिए एसएफटीपी से चिपके रहने के बजाय कुछ को फिर से कॉन्फ़िगर करना आसान होता है।
ट्वीक्स LESS वैरिएबल और JSON ऑब्जेक्ट्स पर आधारित होते हैं, जिसमें आवश्यक पैरामीटर और सीमाएँ निर्धारित की जाती हैं। हम देखते हैं:

 // tweak: { "type" : "value", "title" : "Logo Size", "min" : 50, "max" : 150 } @logoHeight: 75px; .logo { max-height: @logoHeight; }

लोगो का आकार बदलने के लिए टीक

या चलो रंग बदलते हैं (एक सुविधाजनक रंग बीनने वाला व्यक्ति पॉप जाएगा):

 // tweak: { "type" : "color", "title" : "Text Color" } @textColor: #444444; body { color: @textColor; }

पाठ का रंग बदलने के लिए टीक

Tweaks को गुणों और श्रेणियों द्वारा वर्गीकृत किया जा सकता है - परिणामस्वरूप, दृश्य संपादक में आपको कुछ समान मिलेगा:

शैली के संपादक

6. एसेट्स

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

7. लिपियाँ

हम यहां स्क्रिप्ट स्टोर करते हैं। डिफ़ॉल्ट रूप से, एक site.js फ़ाइल बनाई जाती है जिसमें YUI3 आरंभीकृत होता है। सभी निर्देशिकाएं जो इस निर्देशिका स्टोर को बूट लोडर के माध्यम से (और चाहिए) डाउनलोड की जा सकती हैं - इस मामले में, आपकी साइट एक minified स्क्रिप्ट देगी। यह इस तरह किया जाता है (उदाहरण के लिए, हम इसे साइट के तहखाने में पेस्ट करते हैं):

 <squarespace:script src="plugin.js" combo="true" /> <squarespace:script src="site.js" combo="true" />

बूटलोडर के माध्यम से स्क्रिप्ट लोड कर रहा है

8.Stranitsy (पेज)

इस निर्देशिका में स्थिर पृष्ठ शामिल हैं जिन्हें दृश्य संपादक में नहीं बदला जा सकता है - यह रीडमी.पेज के लिए उपयोग करना सुविधाजनक है, जहां आप टेम्पलेट के मुख्य मापदंडों, ब्लॉकों और सेटिंग्स, संपर्कों और इतने पर निर्दिष्ट कर सकते हैं।

निष्कर्ष

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

मुझे उम्मीद है कि उपरोक्त आपको प्लेटफ़ॉर्म पर मास्टर करने और विकास शुरू करने में मदद करेगा।

स्क्वेयरस्पेस 6 पर वेबसाइट टेम्पलेट डेवलपमेंट