ट्यूटोरियल: अपनी साइट पर कस्टम पेज लेआउट जोड़ें

जब आप पेज कार्यस्थान का उपयोग करके नए वेबपेज बनाते हैं, तो आपके पास दिए गए पेज लेआउट का विकल्प होता है. कुछ मामलों में आप एक निश्चित प्रारूप में जानकारी प्रदर्शित करने या एक विशेष उपयोगकर्ता इंटरफ़ेस प्रदान करने के लिए एक कस्टम पेज लेआउट बनाना चाह सकते हैं.

इस ट्यूटोरियल में, आप सीखेंगे कि Liquid का उपयोग करके एक कस्टम पेज लेआउट कैसे बनाया जाता है.

हमारा उदाहरण परिदृश्य एक सरल दो-कॉलम टेम्पलेट का निर्माण करना है जिसमें मुख्य साइट मेनू को बाईं ओर नेविगेशन के रूप में, पृष्ठ सामग्री को दाईं ओर रखा जाए.

यहाँ निम्नलिखित चरण और संपत्तियाँ हैं जो एक कस्टम पेज लेआउट प्रदान करने के लिए बनाई जाएंगी:

• हम मूल पृष्ठ लेआउट स्थापित करने के लिए कस्टम कोड के साथ एक सामान्य आधार वेब टेम्पलेट बनाएंगे.
• हम वेब टेम्पलेट की मॉड्यूलर विशेषताओं को प्रदर्शित करने के लिए अतिरिक्त कोड के साथ एक दूसरा वेब टेम्प्लेट बनाएंगे.
• हम वेब टेम्पलेट को संदर्भित करते हुए एक पेज टेम्पलेट रिकॉर्ड भी बनाएंगे, जो कॉन्फ़िगर करेगा कि साइट पर पेज लेआउट कैसे प्रस्तुत किया जाएगा.
• अंत में, हम कस्टम पेज लेआउट का उपयोग करके एक वेब पेज बनाएंगे.

पूर्वावश्यकताएँ

• Power Pages सदस्यता या ट्रायल. यहाँ Power Pages ट्रायल पाएँ.
• एक Power Pages साइट बनाई गई. एक Power Pages साइट बनाएँ.
• HTML और Liquid का बुनियादी ज्ञान.

चरण 1: वेब टेम्पलेट बनाएं और लिक्विड टेम्पलेट कोड लिखें

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

1. Power Pages पर जाएँ.

2. डिज़ाइन स्टूडियो में, ... चुनें और फिर पोर्टल प्रबंधन चुनें। वेब टेम्पलेट रिकॉर्ड बनाने और अपना कस्टम कोड दर्ज करने के लिए आपको पोर्टल प्रबंधन ऐप का उपयोग करना होगा।

   

3. पोर्टल प्रबंधन ऐप में, सामग्री सेक्शन में स्क्रॉल करें और वेब टेम्पलेट्स का चयन करें.

4. सक्रिय वेब टेम्पलेट्स स्क्रीन से, नया का चयन करें.

5. वेब टेम्पलेट को दो कॉलम लेआउट नाम दें.

   

6. स्रोत फ़ील्ड में निम्न कोड चिपकाएँ.

   दो-स्तंभ लेआउट (वेब टेम्पलेट)

   <div class=container>
     <div class=page-heading>
       <ul class=breadcrumb>
         {% for crumb in page.breadcrumbs -%}
           <li>
             <a href={{ crumb.url }}>{{ crumb.title }}</a>
           </li>
         {% endfor -%}
         <li class=active>{{ page.title }}</li>
       </ul>
       <div class=page-header>
         <h1>{{ page.title }}</h1>
       </div>
     </div>
     <div class=row>
       <div class=col-sm-4 col-lg-3>
         {% block sidebar %}{% endblock %}
       </div>
       <div class=col-sm-8 col-lg-9>
         {% block content %}{% endblock %}
       </div>
     </div>
   </div>
   

7. सहेजें चुनें.

चरण 2: एक नया वेब टेम्पलेट बनाएं, जो हमारे मूल लेआउट टेम्पलेट का विस्तार करता है

हम एक वेब टेम्प्लेट बनाने जा रहे हैं जो संबंधित वेब पेज से नेविगेशन रिकॉर्ड को पढ़ेगा (नीचे देखें). हम पिछले चरण में बनाए गए बेस टेम्पलेट का भी विस्तार करेंगे. उन्नत साइट्स बनाते समय वेब टेम्प्लेट को पुन: प्रयोज्य घटकों के रूप में उपयोग किया जा सकता है.

1. पोर्टल प्रबंधन ऐप में, सामग्री सेक्शन में स्क्रॉल करें और वेब टेम्पलेट्स का चयन करें.

2. सक्रिय वेब टेम्पलेट्स स्क्रीन से, नया का चयन करें.

3. वेब टेम्पलेट को वेबलिंक्स बायाँ नेविगेशन में नाम दें.

   

   वेबलिंक्स बाएं नेविगेशन (वेब टेम्पलेट)

   ध्यान दें कि कोड बेस लेआउट टेम्पलेट को शामिल करने के लिए Liquid extends कीवर्ड का उपयोग कैसे करता है.

   {% extends 'Two Column Layout' %}
   
   {% block sidebar %}
     {% assign weblinkset_id = page.adx_navigation.id %}
     {% if weblinkset_id %}
       {% assign nav = weblinks[page.adx_navigation.id] %}
       {% if nav %}
         <div class=list-group>
           {% for link in nav.weblinks %}
             <a class=list-group-item href={{ link.url }}>
               {{ link.name }}
             </a>
           {% endfor %}
         </div>
       {% endif %}
     {% endif %}
   {% endblock %}
   
   {% block content %}
     <div id="mainContent" class = "wrapper-body" role="main">
       {% include 'Page Copy' %}
     </div>
   {% endblock %}
   

चरण 3: वेब टेम्पलेट के आधार पर एक नया पृष्ठ टेम्पलेट बनाएं

इस चरण में, हम पिछले चरण में बनाए गए वेब टेम्पलेट पर आधारित एक नया पृष्ठ टेम्पलेट बनाएंगे. हमारे कस्टम पेज लेआउट के लिए पेज टेम्पलेट आवश्यक है, एक ऐसा विकल्प जिसे आप नया वेब पेज बनाते समय चुन सकते हैं.

1. पोर्टल प्रबंधन ऐप में, वेबसाइट सेक्शन में स्क्रॉल करें और पृष्ठ टेम्पलेट्स का चयन करें.

2. सक्रिय पृष्ठ टेम्पलेट्स स्क्रीन से, नया का चयन करें.

3. क्षेत्रों को भरें।

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

   

4. सहेजें चुनें.

चरण 4: सामग्री प्रदर्शित करने के लिए एक वेब पृष्ठ बनाएं

1. डिज़ाइन स्टूडियो में, सिंक करें चुनें. यह पोर्टल प्रबंधन ऐप में किए गए अपडेट को डिज़ाइन स्टूडियो में लाएगा.

2. पेज कार्यस्थान में, + पेज चुनें.

3. एक पृष्ठ जोड़ें संवाद में;

   1. पृष्ठ नाम दर्ज करें
   2. कस्टम लेआउट से, अपना कस्टम पेज लेआउट चुनें।
   3. जोड़ें चुनें.

   

4. पृष्ठ के संपादन योग्य सेक्शन में कोई और सामग्री जोड़ें.

अतिरिक्त पृष्ठ कॉन्फ़िगरेशन

इस उदाहरण में, हमें अपने कस्टम कोड के लिए बाएं नेविगेशन पर मेनू प्रस्तुत करने के लिए नेविगेशन रिकॉर्ड को सामग्री पृष्ठ से लिंक करना होगा.

1. डिज़ाइन स्टूडियो में, ... चुनें और फिर पोर्टल प्रबंधन चुनें। आप अपने पेज पर अतिरिक्त कॉन्फ़िगरेशन जोड़ने के लिए पोर्टल प्रबंधन ऐप का उपयोग करेंगे.

2. पोर्टल प्रबंधन ऐप में, सामग्री सेक्शन में स्क्रॉल करें और वेब पृष्ठ का चयन करें.

3. पेज कार्यस्थान में आपके द्वारा पहले बनाए गए पेज को ढूंढें और खोलें. इससे रूट वेबपेज खुल जाएगा. हमें संबंधित स्थानीयकृत सामग्री पृष्ठ में अपने परिवर्तन करने होंगे.

4. नीचे स्क्रॉल करें और स्थानीयकृत सामग्री सेक्शन में, स्थानीयकृत सामग्री वेब पेज का चयन करें.

   

   नोट

   यदि आपके पास एकाधिक भाषाओं का प्रावधान है, तो आपको प्रत्येक स्थानीयकृत पृष्ठ को अपडेट करना होगा.

5. विविध अनुभाग पर जाएं और वह वेब लिंक सेट चुनें, जिसे आप नेविगेशन फ़ील्ड में प्रदर्शित करना चाहते हैं.

   

6. अपने परिवर्तन सहेजें, और डिज़ाइन स्टूडियो पर वापस आएँ.

7. लागू किए गए साइड नेविगेशन के साथ अपना कस्टम पेज देखने के लिए, पूर्वावलोकन को चुनें और फिर डेस्कटॉप को चुनें.

   

भी देखें

• एक कस्टम पेज लेआउट बनाएँ
• Liquid अवलोकन