👩🏼 💪🏿 🍃 ऑर्चर्ड सीएमएस एक्सटेंशन: डिज़ाइन थीम 👂🏻 🏉 👸🏼

यह ऑर्चर्ड सीएमएस सामग्री प्रबंधन प्रणाली के आधार पर अपनी स्वयं की साइटों के विकास पर लेखों की एक श्रृंखला की एक निरंतरता है। इस श्रृंखला के पहले लेख निम्नलिखित लिंक पर देखे जा सकते हैं:

पिछले भागों में, हमने विगेट्स और मॉड्यूल के माध्यम से ऑर्चर्ड सीएमएस के विस्तार को पेश किया। यह लेख ऑर्चर्ड पर आधारित साइटों के लिए थीम बनाने के बारे में बात करेगा।

नया विषय बनाएँ

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

यह लेख खरोंच से एक ऑर्चर्ड थीम बनाने के बारे में बात करता है। यह लेख अधिक गहरा नहीं है और इसे डिजाइन विषयों के विकास के लिए एक परिचय के रूप में माना जाना चाहिए।

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

नई विषय पीढ़ी

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

अपने नए विषय के लिए कोड संरचना तैयार करने के लिए, कमांड लाइन टूल खोलें और निम्नलिखित कमांड दर्ज करें:

  कोडगेन थीम MyFirstTheme

यह कमांड नई थीम के लिए कोड और फ़ोल्डर संरचना बनाएगा और थीम नाम को MyFirstTheme पर सेट करेगा। निम्नलिखित फ़ोल्डर संरचना बनाई जाएगी:

दर्ज की गई कमांड कई फ़ोल्डर्स और केवल दो फाइलें बनाएगी: Theme.txt और Views \ Web.config। Theme.txt एक थीम मैनिफ़ेस्ट है जिसका उपयोग किया जाता है, उदाहरण के लिए, किसी विषय के नाम और अन्य मापदंडों को निर्धारित करने के लिए प्रशासन पैनल द्वारा। Web.config एक ASP.NET MVC एप्लिकेशन कॉन्फ़िगरेशन फ़ाइल है, जो व्यू फ़ोल्डर में स्थित विचारों को प्रदर्शित करने के लिए आवश्यक है। आपको इस फ़ाइल में शायद ही कोई बदलाव करना पड़े।

एक नई थीम के लिए शैलियाँ बनाना

शैलियाँ फ़ोल्डर में एक Site.css फ़ाइल बनाएँ (आप अपनी पसंद के अनुसार फ़ाइल को नाम दे सकते हैं, लेकिन एक्सटेंशन .css के साथ)। निम्न कोड स्निपेट एक उदाहरण शैली फ़ाइल दिखाता है। इस स्टाइलशीट की संरचना के बारे में अधिक जानकारी के लिए ओरचर्ड सीएमएस में सीएसएस का उपयोग करने के लिए अन्य सिफारिशें, इस गाइड को देखें।

/* Theme: My First Theme Author: Copyright: */ /* Colors Palette Background: #d3d3d3 Text: #000 Main Accent: #999 Links: #c03 */ /* Reset ***************************************************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } header, footer, aside, nav, article { display: block; } /* Clearing Float ***************************************************************/ group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;} /* for IE/Mac */ /* General ***************************************************************/ body { font: normal 100% Segoe UI,Trebuchet,Arial,Sans-Serif; height: 100%; text-align:left; color:#000; background: #d3d3d3; } /* Headings */ h1,h2,h3,h4,h5,h6,legend {font-weight:normal; font-style: normal;} h1 {font-size: 160%;} h2 {font-size: 145%;} h3 {font-size: 130%;} h4 {font-size: 120%;} h5 {font-size: 105%;} p { margin: 0 0 1em; line-height: 1.538em; } p img.left { float: left; margin: 0.923em 0.923em 0.923em 0; padding: 0; } p img.right { float: right; margin: 0.923em 0 0.923em 0.923em; } a:focus, a:hover { text-decoration: underline; } a { color: #c03; text-decoration: none; } #header { background:#000; color: #000; width:100%; height:50px; margin-bottom:40px; } #branding h1{ font-size: 140%; color:#fff; padding:8px 0 0 40px; } /* Structure ***************************************************************/ #layout-navigation { width: 960px; margin: 0 auto; display: block; border-bottom: 1px solid #dbdbdb; } nav ul { padding: 0px; margin: 0px; } nav ul li { border:1px solid #dbdbdb; background:#f6f6f6; display:block; float:left; margin:0 2px -1px 0; } nav ul li.current { border-bottom: 1px solid #fff; background:#fff; } nav ul a { padding:0 18px; display:block; float:left; color: #333; font-size: 1.077em; text-decoration:none; line-height:24px; } /* Main ***************************************************************/ #main { margin:0 auto 40px; width:600px; } /* Secondary ***************************************************************/ /* Forms ***************************************************************/ /* Misc ***************************************************************/

एक नए विषय के लिए एक लेआउट मॉडल जोड़ना

व्यू फ़ाइल में लेआउट फ़ाइल (Layout.cshtml) जोड़ें और इसमें निम्न कोड और मार्कअप जोड़ें:

 @{ Script.Require("ShapesBase"); Style.Include("site.css"); } <div id="header"> <div id="branding"> <h1>@T("Welcome to the Playground")</h1> </div> </div> <div id="layout-navigation" class="group"> @Display(Model.Navigation) </div> <div id="main"> @Display(Model.Content) </div>

यह फ़ाइल Orchard CMS वेबसाइट पर प्रदर्शित पृष्ठ की सबसे सरल संरचना को परिभाषित करती है। बिल्ड फ़ाइलों के बारे में अधिक जानकारी के लिए, यह आलेख देखें ।

एक थीम छवि जोड़ना

आप एक चित्र के रूप में एक छोटे से उदाहरण के साथ अपने डिजाइन विषय के साथ कर सकते हैं। साइट के लिए थीम चुनते समय यह चित्र प्रशासन पैनल में प्रदर्शित किया जाएगा। थीम छवि फ़ाइल को Theme.png नाम दिया जाना चाहिए और थीम फ़ोल्डर की जड़ में स्थित होना चाहिए। उदाहरण के लिए, नीचे दी गई छवि इस तरह से एक फ़ाइल का प्रतिनिधित्व करती है:

नया विषय लागू करें

साइट पर एक नया विषय लागू करने के लिए, प्रशासन पैनल पर जाएं और थीम्स अनुभाग चुनें। विषय अनुभाग में, बनाई गई थीम का चयन करें और इसे लागू करें (सेट करें बटन)।

उसके बाद, साइट के लिए आपका नया विषय स्थापित किया जाएगा। आप मुख्य पृष्ठ पर जाकर इसे सत्यापित कर सकते हैं।