🍻 🌏 🎑 बूटस्ट्रैप लेआउट के आधार पर 1C-Bitrix टेम्पलेट बनाएं 👍 🏇🏿 📢

परिचय

प्रिय पाठक, यह लेख मूल रूप से लेख "वेब पेज बनाने का तरीका" है। भाग 2 - बूटस्ट्रैप ” और यहां हम HTML टेम्पलेट के एकीकरण को CMS 1C-Bitrix में ले जाकर वास्तविक लेआउट से दूर हो जाएंगे।

पिछली किस्त में, मिरांटस हैब्रासर ने बूटस्ट्रैप 3 का उपयोग करके पेकब्लॉर्बेटरी से कॉर्पोरेट ब्लू टेम्पलेट बनाया ।

इस लेख के लिए, हम पिछले लेख के अंत में GitHub रिपॉजिटरी पर एक कांटे का उपयोग करेंगे, क्योंकि इसमें कुछ कीड़े तय किए गए थे।

टेम्पलेट वायरफ्रेम बनाएं

1C-Bitrix के दृष्टिकोण से साइट टेम्पलेट एक फ़ोल्डर है जिसमें विशिष्ट फ़ाइलों का एक सेट होता है, इसलिए टेम्पलेट को फ़ाइल संरचना (FTP या SSH के माध्यम से 1C-Bitrix उपकरण का उपयोग करके), और अनुभाग का उपयोग करके दोनों बनाया जा सकता है।

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

अब हमारा कार्य HTML वायरफ्रेम टेम्पलेट बनाना है। वास्तव में, इसमें 2 भाग होते हैं, जिनमें से प्रत्येक टेम्पलेट फ़ोल्डर में एक अलग फ़ाइल में होगा:

/bitrix/templates/whitesquare-bootstrap/header.php
/bitrix/templates/whitesquare-bootstrap/footer.php

यदि आप 1C-Bitrix प्रशासनिक अनुभाग ( सेटिंग्स >> उत्पाद सेटिंग >> साइट >> साइट टेम्पलेट ) के माध्यम से टेम्पलेट को देखते हैं, तो हम पूरे टेम्पलेट को देखेंगे। शीर्ष लेख को # WORK_ARI # टैग का उपयोग करके पाद लेख से अलग किया जाएगा।

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

इस प्रकार, हम मूल स्थिर टेम्पलेट से index.html कोड को तीन फाइलों में वितरित कर सकते हैं:

/bitrix/templates/whitesquare-bootstrap/header.php

<!DOCTYPE html> <html> <head> <title>Whitesquare</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/styles.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Oswald:400,300" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="wrapper container"> <header> <form name="search" action="#" method="get" class="form-inline form-search pull-right"> <div class="input-group"> <label class="sr-only" for="searchInput">Search</label> <input class="form-control" id="searchInput" type="text" name="search" placeholder="Search"> <div class="input-group-btn"> <button type="submit" class="btn btn-primary">GO</button> </div> </div> </form> <a href="/"><img src="images/logo.png" alt="Whitesquare logo"></a> </header> <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li><a href="/home/">Home</a></li> <li class="active"><a href="/about/">About us</a></li> <li><a href="/services/">Services</a></li> <li><a href="/partners/">Partners</a></li> <li><a href="/customers/">Customers</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/careers/">Careers</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav> <div class="heading"> <h1>About us</h1> </div> <div class="row"> <aside class="col-md-7"> <ul class="list-group submenu"> <li class="list-group-item active">Lorem ipsum</li> <li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li> <li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li> <li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li> <li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li> <li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li> </ul> <div class="panel panel-primary"> <div class="panel-heading">Our offices</div> <div class="panel-body"> <img src="images/map.png" class="img-responsive" alt="Our offices"> </div> </div> </aside> <section class="col-md-17">

/Index.php

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

 <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?> <div class="jumbotron"> <blockquote> <p> “Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.” </p> <small>John Doe, Lorem Ipsum</small> </blockquote> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat. </p> <p> Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor. </p> <div class="row"> <div class="col-md-12"> <img src="images/about-1.png" alt="" class="thumbnail"> </div> <div class="col-md-12"> <img src="images/about-2.png" alt="" class="thumbnail"> </div> </div> <h2>Our team</h2> <div class="team"> <div class="row"> <div class="col col-md-4"> <img src="images/team/Doe.jpg" alt="John Doe" class="thumbnail"> <div class="caption"> <h3>John Doe</h3> <p>ceo</p> </div> </div> <div class="col col-md-4 col-md-offset-1"> <img src="images/team/Pittsley.jpg" alt="Saundra Pittsley" class="thumbnail"> <div class="caption"> <h3>Saundra Pittsley</h3> <p>team leader</p> </div> </div> <div class="col col-md-4 col-md-offset-1"> <img src="images/team/Simser.jpg" alt="Julio Simser" class="thumbnail"> <div class="caption"> <h3>Julio Simser</h3> <p>senior developer</p> </div> </div> <div class="col col-md-4 col-md-offset-1"> <img src="images/team/Venuti.jpg" alt="Margery Venuti" class="thumbnail"> <div class="caption"> <h3>Margery Venuti</h3> <p>senior developer</p> </div> </div> <div class="col col-md-4 col-md-offset-1"> <img src="images/team/Tondrea.jpg" alt="Fernando Tondrea" class="thumbnail"> <div class="caption"> <h3>Fernando Tondrea</h3> <p>developer</p> </div> </div> </div> <div class="row"> <div class="col col-md-4"> <img src="images/team/Nobriga.jpg" alt="Ericka Nobriga" class="thumbnail"> <div class="caption"> <h3>Ericka Nobriga</h3> <p>art director</p> </div> </div> <div class="col col-md-4 col-md-offset-1"> <img src="images/team/Rousselle.jpg" alt="Cody Rousselle" class="thumbnail"> <div class="caption"> <h3>Cody Rousselle</h3> <p>senior ui designer</p> </div> </div> <div class="col col-md-4 col-md-offset-1"> <img src="images/team/Wollman.jpg" alt="Erik Wollman" class="thumbnail"> <div class="caption"> <h3>Erik Wollman</h3> <p>senior ui designer</p> </div> </div> <div class="col col-md-4 col-md-offset-1"> <img src="images/team/Shoff.jpg" alt="Dona Shoff" class="thumbnail"> <div class="caption"> <h3>Dona Shoff</h3> <p>ux designer</p> </div> </div> <div class="col col-md-4 col-md-offset-1"> <img src="images/team/Brunton.jpg" alt="Darryl Brunton" class="thumbnail"> <div class="caption"> <h3>Darryl Brunton</h3> <p>ui designer</p> </div> </div> </div> </div> <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

/bitrix/templates/whitesquare-bootstrap/footer.php

  </section> </div> </div> <footer> <div class="container"> <div class="row"> <div class="col-md-8 twitter"> <h3>Twitter feed</h3> <time datetime="2012-10-23"><a href="#">23 oct</a></time> <p> In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug </p> </div> <div class="col-md-4 sitemap"> <h3>Sitemap</h3> <div class="row"> <div class="col-md-12"> <a href="/home/">Home</a> <a href="/about/">About</a> <a href="/services/">Services</a> </div> <div class="col-md-12"> <a href="/partners/">Partners</a> <a href="/customers/">Support</a> <a href="/contact/">Contact</a> </div> </div> </div> <div class="col-md-4 social"> <h3>Social networks</h3> <a href="http://twitter.com/" class="social-icon twitter"></a> <a href="http://facebook.com/" class="social-icon facebook"></a> <a href="http://plus.google.com/" class="social-icon google-plus"></a> <a href="http://vimeo.com/" class="social-icon-small vimeo"></a> <a href="http://youtube.com/" class="social-icon-small youtube"></a> <a href="http://flickr.com/" class="social-icon-small flickr"></a> <a href="http://instagram.com/" class="social-icon-small instagram"></a> <a href="/rss/" class="social-icon-small rss"></a> </div> <div class="col-md-8 footer-logo"> <a href="/"><img src="images/footer-logo.png" alt="Whitesquare logo"></a> <p> Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation </p> </div> </div> </div> </footer> </body> </html>

तत्वों 1C-Bitrix

प्रस्तावना और भाषा फ़ाइलों का कनेक्शन जोड़ें। यह शीर्षलेख में किया जाना चाहिए। php और footer.php (यानी टेम्पलेट की शुरुआत में और # काम के बाद #)
```
 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); IncludeTemplateLangFile(__FILE__);?> 
```
फ़ंक्शन कॉल के साथ टेक्स्ट को <शीर्षक> टैग के अंदर बदलें:
```
 <title><? $APPLICATION->ShowTitle(false); ?></title> 
```
फ़ंक्शन कॉल के साथ टेक्स्ट को <h1> टैग के अंदर बदलें:
```
 <h1><?$APPLICATION->ShowTitle()?></h1> 
```
जैसा कि आप देख सकते हैं, विभिन्न मापदंडों का उपयोग एक लंबित फ़ंक्शन को कॉल करने के लिए किया जाता है, ताकि आप ब्राउज़र शीर्षक और पृष्ठ के दृश्य भाग के शीर्षक के लिए अलग-अलग मान सेट कर सकें, अगर एसईओ विशेषज्ञों को इसकी आवश्यकता है।
मेटा डेटा आउटपुट (कीवर्ड और खोज इंजन के लिए विवरण) जोड़ें:
```
 <?$APPLICATION->ShowMeta("keywords")?> <?$APPLICATION->ShowMeta("description")?> 
```
हम सभी टेम्पलेट फ़ाइलों (चित्र, CSS, JS, फोंट) के सापेक्ष पथ निर्धारित करते हैं - <? = SITE_TEMPLATE_PATH?> - यह फ़ंक्शन साइट रूट के सापेक्ष टेम्पलेट का पथ सेट करता है (और आपको टेम्पलेट आईडी को स्पष्ट रूप से पंजीकृत नहीं करने की अनुमति देता है, जो कॉपी या नाम बदलने पर उपयोगी होता है) क्या है)। नतीजतन, हम प्राप्त करते हैं:
```
 <link href="<?=SITE_TEMPLATE_PATH?>/css/styles.css" rel="stylesheet"> … <a href="/"><img src="<?=SITE_TEMPLATE_PATH?>/images/logo.png" alt="Whitesquare logo"></a> … <img src="<?=SITE_TEMPLATE_PATH?>/images/map.png" class="img-responsive" alt="Our offices"> … <a href="/"><img src="<?=SITE_TEMPLATE_PATH?>/images/footer-logo.png" alt="Whitesquare logo"></a> 
```
इसी तरह, हम SITE_TEMPLATE_PATH का उपयोग index.php में भी कर सकते हैं, हालाँकि, याद रखें कि जब आप पृष्ठ पर लागू साइट की सेटिंग में टेम्पलेट बदलते हैं, तो यह पथ भी बदल जाएगा!
<? $ आवेदन-> ShowMeta ("विवरण")?>
हम फ़ंक्शन $ APPLICATION-> ShowHead () के लिए एक कॉल जोड़ते हैं; जो एक ही बार में कई उद्देश्यों को पूरा करता है (विशेष रूप से, सीएसएस और जेएस लाइब्रेरी को हेडर में स्थगित कार्यों का उपयोग करते हुए पृष्ठों के शरीर में घटकों में घोषित किया जाता है, और इन पुस्तकालयों को जोड़ती और संपीड़ित करता है यदि इसी 1C-Bitrix सेटिंग का उपयोग किया जाता है)
आस्थगित फ़ंक्शंस SetAdditionalCSS और AddHeadScript का उपयोग करके, हम हमेशा CSS और JS को <हेडर> से जोड़ सकते हैं, साथ ही समान लाइब्रेरी को फिर से कनेक्ट करने से भी बच सकते हैं (यह विशेष रूप से सही है, उदाहरण के लिए, JQuery के लिए, यदि आप इसे साइट टेम्पलेट में केंद्रीय रूप से नहीं करते हैं, तो संबंधित घटकों में और इसी अनुरूप पृष्ठ पर कई ऐसे घटक होंगे)।
यह याद रखना महत्वपूर्ण है कि इस तरह से हम पुराने ब्राउज़रों के लिए <-! [[यदि लेट IE 9]> प्रकार के निर्माणों को पुन: पेश नहीं कर सकते हैं, तो संपूर्ण निर्माण जैसा दिखेगा:
```
 <? $APPLICATION->ShowHead(); $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/styles.css'); $APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Oswald:400,300'); ?>  
```
<Body > - <? $ APPLICATION-> ShowPelel ();> टैग खोलने के तुरंत बाद 1C-Bitrix टूलबार जोड़ें

वास्तव में, हमने 1C-Bitrix तत्वों के न्यूनतम सेट के साथ एक स्थिर HTML फ्रेमवर्क बनाया जो पहले से ही काम करता है।
हमारा अगला कार्य 1C-Bitrix घटकों के साथ काम करने के लिए व्यक्तिगत कार्यात्मक ब्लॉकों को स्थानांतरित करना है।

1C- बिट्रिक्स घटक

इस लेख के ढांचे में, हम केवल मानक 1C-Bitrix घटकों के साथ लेआउट को एकीकृत करने की प्रक्रिया पर ध्यान केंद्रित करेंगे। हम अपने स्वयं के घटक नहीं बनाएंगे और विशिष्ट लोगों को अनुकूलित नहीं करेंगे।

हम एक अलग पेज बनाएंगे (उदाहरण के लिए, 1. एफपी) जिस पर हम 1 सी-बिट्रिक्स का उपयोग करके कार्य को सरल बनाने के लिए 1 घटक रखेंगे।

साइट टेम्पलेट पर घटक टेम्पलेट की प्रतिलिपि बनाएँ

आइए हम दृश्य संपादक का उपयोग करके घटक (उदाहरण के लिए, खोज फ़ॉर्म - बिट्रिक्स: सर्च.फॉर्म) को रखें:

शामिल संपादन मोड का उपयोग करते हुए, साइट टेम्पलेट में घटक टेम्पलेट की प्रतिलिपि बनाएँ। ऐसा करने के लिए, घटक के साथ क्षेत्र पर माउस कर्सर को ले जाएं, तब तक प्रतीक्षा करें जब तक कि गियर के साथ संदर्भ मेनू दिखाई न दे और ड्रॉप-डाउन पर क्लिक करें:

दिखाई देने वाले संवाद में, हमें घटक टेम्पलेट का नाम निर्दिष्ट करना होगा और साइट टेम्पलेट का चयन करना होगा जिसमें घटक टेम्पलेट संग्रहीत किया जाएगा (हमारे मामले में, यह व्हाट्सएप-बूटस्ट्रैप है):

घटक टेम्पलेट / बिट्रिक्स / टेम्प्लेट / व्हाईटस्क्वेयर-बूटस्ट्रैप / में हमारे कार्यों के परिणामस्वरूप, एक और फ़ोल्डर दिखाई दिया - घटक - इसमें साइट टेम्पलेट के भीतर उपयोग किए जाने वाले सभी घटकों के टेम्पलेट होंगे।
दिखाई देने वाला पहला घटक टेम्पलेट /bitrix/templates/whitesquare-bootstrap/compenders/bitrix/search.form/top/ पर स्थित होगा
अनुभवी डेवलपर्स तुरंत घटक से साइट टेम्पलेट पर कॉपी करके एक घटक टेम्पलेट बना सकते हैं।

कभी-कभी आगे के काम के लिए, सिस्टम के साथ आपूर्ति किए गए घटक टेम्पलेट्स में से एक अधिक उपयुक्त होता है। तब यह उनमें से प्रत्येक को काम करने के लिए समझ में आता है। यह दृश्य संपादक में गियर बटन पर क्लिक करके किया जा सकता है:

शामिल क्षेत्र (लोगो, कॉपीराइट, सामाजिक नेटवर्क)

शामिल क्षेत्र का घटक आपको किसी भी पाठ, HTML या php कोड, साथ ही अन्य घटकों को एम्बेड करने की अनुमति देता है, और इस सामग्री को एक विशिष्ट पृष्ठ, अनुभाग, या जहां भी शामिल क्षेत्र कहा जाता है, के लिए प्रदर्शित करता है।
उपरोक्त सभी वस्तुओं के लिए, हम इन ब्लॉकों को टेम्पलेट से निकालने के लिए शामिल क्षेत्र का उपयोग करना तर्कसंगत मानते हैं। यानी उन्हें संपादित करने के लिए, आपको अभी भी HTML में न्यूनतम ज्ञान होना चाहिए।
पेशेवर यह तर्क दे सकते हैं कि सामाजिक नेटवर्क पर बटन वाले ब्लॉक के लिए, आपको अपना स्वयं का घटक बनाना चाहिए, लेकिन यह हमारे लिए तर्कसंगत नहीं है। इस ब्लॉक को 10 मिनट में सम्मिलित क्षेत्र में चलाना आसान है और यदि आवश्यक हो तो संपादित करें, क्योंकि हर दिन फेसबुक समुदाय का पता नहीं बदलता है!

इन सभी क्षेत्रों को पूरी साइट पर प्रदर्शित किया जाएगा, इसलिए हम टेम्पलेट में एक नया शामिल फ़ोल्डर बनाएंगे, जहां हम शामिल क्षेत्रों की फाइलें जोड़ेंगे:

/bitrix/templates/whitesquare-bootstrap/include/bottom-logo.php
/bitrix/templates/whitesquare-bootstrap/include/copyright.php
/bitrix/templates/whitesquare-bootstrap/include/social-networks.php
/bitrix/templates/whitesquare-bootstrap/include/top_logo.php

शामिल क्षेत्र के घटक को कॉल करने के लिए कोड इस मामले में इस तरह दिखाई देगा:

 <?$APPLICATION->IncludeComponent( "bitrix:main.include", "", Array( "AREA_FILE_SHOW" => "file", "PATH" => SITE_TEMPLATE_PATH."/include/bottom-logo.php", "EDIT_TEMPLATE" => "" ), false );?>

शामिल क्षेत्र की फ़ाइल के अंदर, हम बस HTML कोड का एक टुकड़ा रखते हैं:

 <a href="/"><img src="<?=SITE_TEMPLATE_PATH?>/images/footer-logo.png" alt="Whitesquare logo"></a>

इस लेख में हम ट्विटर फीड को एकीकृत करने के मुद्दे पर विचार नहीं करेंगे, क्योंकि सबसे सरल समाधान ट्विटर विजेट को सम्मिलित क्षेत्र में रखना है, ऊपर वर्णित समाधान के समान है।
मार्केटप्लेस 1C-बिट्रिक्स में भी काफी घटक हैं जो ट्विटर फीड को प्रदर्शित करते हैं, जिसका आप उपयोग भी कर सकते हैं।

खोज प्रपत्र

हमने बिट्रिक्स का उपयोग किया: search.form घटक और साइट टेम्पलेट में सुझाव घटक टेम्पलेट की प्रतिलिपि बनाई।
घटक टेम्पलेट के लिए HTML कोड /bitrix/templates/whitesquare-bootstrap/compenders/bitrix/search.form/top/template.php फ़ाइल में स्थित है

 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <div class="search-form"> <form action="<?=$arResult["FORM_ACTION"]?>"> <?$APPLICATION->IncludeComponent( "bitrix:search.suggest.input", "", array( "NAME" => "q", "VALUE" => "", "INPUT_SIZE" => 15, "DROPDOWN_SIZE" => 10, ), $component, array("HIDE_ICONS" => "Y") );?> <input name="s" type="submit" value="<?=GetMessage("BSF_T_SEARCH_BUTTON");?>" /> </form> </div>

जैसा कि आप देख सकते हैं, हमारे पास एक सरल नहीं है, लेकिन एक जटिल घटक (यानी, एक घटक जिसमें अन्य घटक शामिल हैं)। इस स्थिति में, यह वह रूप है जिसमें खोज क्वेरी दर्ज की गई है।
इसके टेम्पलेट को साइट टेम्पलेट में कॉपी करें।
दुर्भाग्य से, यह बहुत सुंदर नहीं है - जनता में हम 1 घटक का उपयोग करते हैं, और हमारे पास 2 टेम्पलेट हैं। हम जटिल योजनाओं के लिए सामान्य योजना का उपयोग करेंगे:

जटिल घटक

/Bitrix/templates/whitesquare-bootstrap/compenders/bitrix/search.form/top/ फ़ोल्डर में एक बिट्रिक्स फ़ोल्डर बनाएँ
घटक टेम्पलेट /bitrix/templates/whitesquare-bootstrap/compenders/bitrix/search.suggest.input/ को /bitrix/templates/whitesquare-bootstrap-compenders/bitearch/search.form/top/bitrix/ पर ले जाएँ। इस प्रकार, प्राप्त होने:
/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/

बिट्रिक्स के मापदंडों में: search.suggest.input घटक, हम शीर्ष टेम्पलेट निर्दिष्ट करते हैं:

 <?$APPLICATION->IncludeComponent( "bitrix:search.suggest.input", "top", array( "NAME" => "q", "VALUE" => "", "INPUT_SIZE" => 15, "DROPDOWN_SIZE" => 10, ), $component, array("HIDE_ICONS" => "Y") );?>

वापस खोज प्रपत्र पर

तो, हम देखते हैं कि, 1C-Bitrix वास्तुकला में लेआउट में खोज के पूरे ब्लॉक के विपरीत, हमारे फॉर्म में 2 नेस्टेड टेम्पलेट (जटिल और सरल) घटक शामिल होंगे।

/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php

 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <form name="search" action="<?=$arResult["FORM_ACTION"]?>" method="get" class="form-inline form-search pull-right"> <div class="input-group"> <?$APPLICATION->IncludeComponent( "bitrix:search.suggest.input", "top", array( "NAME" => "q", "VALUE" => "", "INPUT_SIZE" => 15, "DROPDOWN_SIZE" => 10, ), $component, array("HIDE_ICONS" => "Y") );?><div class="input-group-btn"><input name="s" class="btn btn-primary" type="submit" value="<?=GetMessage("BSF_T_SEARCH_BUTTON");?>" /></div> </div> </form>

/bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/template.php

 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); CJSCore::Init(array("ajax")); ?> <script type="text/javascript"> if (!window.oObject || typeof oObject != "object") window.oObject = {}; window.<?= $arResult["ID"]?>_CheckThis = document.<?= $arResult["ID"]?>_CheckThis = function(oObj) { try { if(SuggestLoaded) { if (typeof window.oObject[oObj.id] != 'object') window.oObject[oObj.id] = new JsSuggest(oObj, '<?echo $arResult["ADDITIONAL_VALUES"]?>'); return; } else { setTimeout(<?echo $arResult["ID"]?>_CheckThis(oObj), 10); } } catch(e) { setTimeout(<?echo $arResult["ID"]?>_CheckThis(oObj), 10); } } </script> <IFRAME style="width:0px; height:0px; border: 0px;" src="javascript:''" name="<?echo $arResult["ID"]?>_div_frame" id="<?echo $arResult["ID"]?>_div_frame"></IFRAME> <label class="sr-only" for="searchInput">Search</label> <input class="form-control" id="searchInput" type="text" name="search" placeholder="<?=GetMessage("BSF_T_SEARCH_FORM");?>" <?if($arParams["INPUT_SIZE"] > 0):?> size="<?echo $arParams["INPUT_SIZE"]?>"<?endif?> value="<?echo $arParams["VALUE"]?>" autocomplete="off" onfocus="<?echo $arResult["ID"]?>_CheckThis(this);" />

जैसा कि आप देख सकते हैं, हमने GetMessage के लिए कॉल के साथ घटकों में "गो" और "खोज" वाक्यांशों को प्रतिस्थापित किया - इस प्रकार, हम वाक्यांशों को भाषा फ़ाइलों में डालते हैं और रूसी और अंग्रेजी साइटों के लिए अलग-अलग मान सेट कर सकते हैं जो एक सामान्य टेम्पलेट और एक सामान्य घटक का उपयोग करते हैं।
भाषा फ़ाइलों के बारे में
भाषा फ़ाइलों को उसी फ़ोल्डर में संग्रहीत किया जाता है जो टेम्पलेट (या घटक टेम्पलेट) सबफ़ोल्डर / लैंग / भाषा_ड / फ़ाइल में मूल नाम के समान फ़ाइल के साथ होता है जिसमें गेटमेसेज कहा जाता है।
भाषा फ़ाइल कुंजी और भाषा वाक्यांशों के मूल्यों की एक सरणी है।
हमारे मामले में, यह है:
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/lang/ru/template.php
```
 <?$MESS ['BSF_T_SEARCH_FORM'] = "";?> 
```
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/lang/en/template.php
```
 <?$MESS ['BSF_T_SEARCH_FORM'] = "Search";?> 
```
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/lang/ru/template.php
```
 <?$MESS ['BSF_T_SEARCH_BUTTON'] = "";?> 
```
- /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/lang/en/template.php
```
 <?$MESS ['BSF_T_SEARCH_BUTTON'] = "GO";?> 
```
हमारी राय में, रूसी संस्करण बहुत "अनाड़ी" हैं, हालांकि, हमने उन्हें केवल भाषा फ़ाइलों के तंत्र का प्रदर्शन करने के लिए बनाया है। यदि आप चाहें, तो आप उनमें अंग्रेजी पाठ रख सकते हैं या उन्हें खाली छोड़ सकते हैं।

अब यह केवल टेम्पलेट में लेआउट के बजाय घटक कॉल कोड रखने के लिए बना हुआ है:

 <form name="search" action="#" method="get" class="form-inline form-search pull-right"> <div class="input-group"> <label class="sr-only" for="searchInput">Search</label> <input class="form-control" id="searchInput" type="text" name="search" placeholder="Search"> <div class="input-group-btn"> <button type="submit" class="btn btn-primary">GO</button> </div> </div> </form>

शीर्ष मेनू

साइट पर काम को सरल बनाने के लिए, प्रत्येक मेनू पर काम शुरू करने से पहले, हम काम को आसान बनाने के लिए प्रासंगिक सामग्री के साथ एक मेनू फ़ाइल बनाएंगे।

उदाहरण के लिए, शीर्ष मेनू को निम्न सामग्री के साथ .top.menu.php फ़ाइल में सेट किया जाएगा

 <? $aMenuLinks = Array( Array( "Home", "/", Array(), Array(), "" ), Array( "About us", "/about/", Array(), Array(), "" ), Array( "Services", "", Array(), Array(), "" ), Array( "Partners", "", Array(), Array(), "" ), Array( "Customers", "", Array(), Array(), "" ), Array( "Projects", "", Array(), Array(), "" ), Array( "Careers", "", Array(), Array(), "" ), Array( "Contact", "", Array(), Array(), "" ) ); ?>

शीर्ष मेनू बनाने के लिए, बिट्रिक्स: मेनू घटक का उपयोग करें। नाम शीर्ष के अंतर्गत हमारी साइट के टेम्पलेट में इस घटक के .default टेम्पलेट की प्रतिलिपि बनाएँ। व्यावहारिक रूप से इसमें कुछ भी अधिक नहीं होता है, इसलिए हम इसे आसानी से अपने लेआउट में ढाल लेते हैं:

 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <? foreach($arResult as $arItem): if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?> <?if($arItem["SELECTED"]):?> <li class="active"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?endforeach?> </ul> </nav> <?endif?>

अब मेनू घटक के लिए कॉल के साथ टेम्पलेट में शीर्ष मेनू ब्लॉक को बदलें:

 <?$APPLICATION->IncludeComponent("bitrix:menu", "top", Array( "ROOT_MENU_TYPE" => "top", "MENU_CACHE_TYPE" => "A", "MENU_CACHE_TIME" => "3600", "MENU_CACHE_USE_GROUPS" => "Y", "MENU_CACHE_GET_VARS" => "", "MAX_LEVEL" => "1", "CHILD_MENU_TYPE" => "left", "USE_EXT" => "N", "DELAY" => "N", "ALLOW_MULTI_SELECT" => "N", ), false );?>

वाम मेनू

इसी प्रकार शीर्ष मेनू में, हम घटक को बिट्रिक्स: मेनू के रूप में लेते हैं। इस घटक के .default टेम्प्लेट को हमारी साइट के टेम्प्लेट में बचे नाम के तहत कॉपी करें।
हमारे द्वारा प्राप्त टेम्पलेट को संपादित करने के बाद:

 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <ul class="list-group submenu"> <? foreach($arResult as $arItem): if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?> <?if($arItem["SELECTED"]):?> <li class="list-group-item active"><?=$arItem["TEXT"]?></li> <?else:?> <li class="list-group-item"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?endforeach?> </ul> <?endif?>

घटक कॉल के साथ टेम्पलेट में बाएं मेनू ब्लॉक को बदलें:

 <?$APPLICATION->IncludeComponent("bitrix:menu", "left", Array( "ROOT_MENU_TYPE" => "left", "MENU_CACHE_TYPE" => "A", "MENU_CACHE_TIME" => "3600", "MENU_CACHE_USE_GROUPS" => "Y", "MENU_CACHE_GET_VARS" => "", "MAX_LEVEL" => "1", "CHILD_MENU_TYPE" => "left", "USE_EXT" => "N", "DELAY" => "N", "ALLOW_MULTI_SELECT" => "N", ), false );?>

इस तथ्य का लाभ उठाते हुए कि 1 सी-बिट्रिक्स में मेनू विरासत में मिला है, हम बाएं मेनू फ़ाइलों को .left.menu.php उन सभी वर्गों में रख सकते हैं जहां उन्हें अलग-अलग सामग्री की आवश्यकता होती है, और मूल में, उदाहरण के लिए, इसे पूरी तरह से हटा दें। लेआउट पीड़ित नहीं होगा, और मेनू को केवल जहां आवश्यक हो प्रदर्शित किया जाएगा।

नीचे मेनू

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

फिर, आइए घटक को घटक बिट्रिक्स के रूप में लेते हैं: मेनू। इस घटक के .default टेम्प्लेट को नीचे दिए गए हमारी वेबसाइट टेम्पलेट पर कॉपी करें।
टेम्पलेट:

 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <div class="col-md-12"> <? foreach($arResult as $arItem): if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?> <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a> <?endforeach?> </div> <?endif?>

साइडबार - हमारे कार्यालय

ईमानदारी से, डेमो सामग्री के बिना यह स्पष्ट नहीं है कि यह साइडबार क्या कार्य करता है। हम यह मानने की हिम्मत करते हैं कि, फिर भी, यह एक तस्वीर नहीं दिखाता है (यह दर्द से पुराना है), लेकिन एक पूर्ण Google मानचित्र। संभवत: इस पर नियंत्रण होना पर्याप्त नहीं है, ताकि यह मानववादी हो जाए।
अगर मैं गलत हूं, तो शायद साइडबार को लागू करने के सबसे आसान तरीकों में से एक शामिल क्षेत्र है, जिसके बारे में हम पहले ही बात कर चुके हैं।
बिट्रिक्स लें: map.google.view घटक और साइट टेम्पलेट में .default टेम्पलेट को कॉपी करके, इसे साइडबार-मैप का नाम देते हुए।
हम शीर्षक सहित घटक के पूरे साइडबार भाग को बनाएंगे। तो, संपादकों के काम को आसान बनाने के लिए, हेडर टेक्स्ट को घटक मापदंडों में रखना आवश्यक है।
निम्न सामग्री के घटक टेम्पलेट में .parameters.php फ़ाइल बनाएँ:

 <? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); $arTemplateParameters = array( "SIDEBAR_MAP_NAME" => Array( "NAME" => GetMessage("SIDEBAR_MAP_NAME"), "TYPE" => "HTML", "DEFAULT" => "Our offices", ), ); ?>

और भाषा फ़ाइलें, खोज प्रपत्र घटक की भाषा फ़ाइलों के साथ समानता से:

RU (/bitrix/templates/whitesquare-bootstrap/compords/bitrix/map.google.view/sidebar-map/lang/ru/.parameters.php):
```
 <?$MESS ['SIDEBAR_MAP_NAME'] = " ";?> 
```
EN (/bitrix/templates/whitesquare-bootstrap/compenders/bitrix/map.google.view/sidebar-map/lang/en/.parameters.php):
```
 <?$MESS ['SIDEBAR_MAP_NAME'] = "Sidebar Map Name";?> 
```

इस मामले में घटक टेम्पलेट को थोड़ा संशोधित किया गया है (कार्ड को साइडबार के अंदर रखें और शीर्षक जोड़ें):

 <? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); $arTransParams = array( 'INIT_MAP_TYPE' => $arParams['INIT_MAP_TYPE'], 'INIT_MAP_LON' => $arResult['POSITION']['google_lon'], 'INIT_MAP_LAT' => $arResult['POSITION']['google_lat'], 'INIT_MAP_SCALE' => $arResult['POSITION']['google_scale'], 'MAP_WIDTH' => $arParams['MAP_WIDTH'], 'MAP_HEIGHT' => $arParams['MAP_HEIGHT'], 'CONTROLS' => $arParams['CONTROLS'], 'OPTIONS' => $arParams['OPTIONS'], 'MAP_ID' => $arParams['MAP_ID'], ); if ($arParams['DEV_MODE'] == 'Y') { $arTransParams['DEV_MODE'] = 'Y'; if ($arParams['WAIT_FOR_EVENT']) $arTransParams['WAIT_FOR_EVENT'] = $arParams['WAIT_FOR_EVENT']; } ?> <div class="panel panel-primary"> <div class="panel-heading"><?=$arParams['SIDEBAR_MAP_NAME']?></div> <div class="panel-body"> <div class="bx-yandex-view-layout"> <div class="bx-yandex-view-map"> <? //echo '<pre>'; print_r($arResult['POSITION']); echo '</pre>'; $APPLICATION->IncludeComponent('bitrix:map.google.system', '.default', $arTransParams, false, array('HIDE_ICONS' => 'Y')); ?> </div> </div> <?if (is_array($arResult['POSITION']['PLACEMARKS']) && ($cnt = count($arResult['POSITION']['PLACEMARKS']))):?> <script type="text/javascript"> function BX_SetPlacemarks_<?echo $arParams['MAP_ID']?>() { <? for($i = 0; $i < $cnt; $i++): ?> BX_GMapAddPlacemark(<?echo CUtil::PhpToJsObject($arResult['POSITION']['PLACEMARKS'][$i])?>, '<?echo $arParams['MAP_ID']?>'); <? endfor; ?> } function BXShowMap_<?echo $arParams['MAP_ID']?>() {BXWaitForMap_view('<?echo $arParams['MAP_ID']?>');} BX.ready(BXShowMap_<?echo $arParams['MAP_ID']?>); </script> </div> </div> <?endif;?>

अब आप साइट टेम्पलेट में साइडबार घटक के लिए एक कॉल रख सकते हैं (यदि इसे पूरी साइट पर प्रदर्शित किया जाना चाहिए, लेकिन केवल कुछ वर्गों में, तो बस इसे शामिल क्षेत्र में लपेटें):

 <?$APPLICATION->IncludeComponent("bitrix:map.google.view", "sidebar-map", array( "INIT_MAP_TYPE" => "ROADMAP", "MAP_DATA" => "a:4:{s:10:\"google_lat\";d:55.7383;s:10:\"google_lon\";d:37.5946;s:12:\"google_scale\";i:13;s:10:\"PLACEMARKS\";a:1:{i:0;a:3:{s:4:\"TEXT\";s:10:\"Test point\";s:3:\"LON\";d:37.593626976013184;s:3:\"LAT\";d:55.736905609230966;}}}", "MAP_WIDTH" => "235", "MAP_HEIGHT" => "180", "CONTROLS" => array( ), "OPTIONS" => array( 0 => "ENABLE_SCROLL_ZOOM", 1 => "ENABLE_DBLCLICK_ZOOM", 2 => "ENABLE_DRAGGING", 3 => "ENABLE_KEYBOARD", ), "MAP_ID" => "", "SIDEBAR_MAP_NAME" => "Our offices" ), false );?>

अब यह कार्यक्षेत्र पर ले जाने का समय है!

टीम के सदस्यों की सूची

सबसे पहले, एक सूचना ब्लॉक बनाएं जिसमें वह व्यक्तियों के बारे में जानकारी संग्रहीत करेगा। मौजूदा लेआउट से यह स्पष्ट है कि कम से कम 4 क्षेत्रों की आवश्यकता है:

पहला नाम
फोटो (लघु)
नौकरी का शीर्षक
टीम के अन्य सदस्यों के सापेक्ष ऑर्डर करें

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

जानकारी ब्लॉक चरित्र कोड - टीम
स्थिति के लिए चरित्र संपत्ति कोड - स्थिति

ऐसा लग सकता है कि इस स्तर पर बोर्ड टेम्पलेट के साथ कैटलॉग.सैक्शन घटक हमारे लिए उपयुक्त होगा (यह टेम्पलेट किसी दिए गए कॉलम की संख्या के साथ एक तालिका बनाता है), लेकिन ऑपरेशन के दौरान यह समाधान बहुत अधिक कठिन साबित होगा। इसलिए, हम अभी भी बिट्रिक्स का उपयोग करेंगे: news.list (नाम टीम-सूची के तहत साइट टेम्पलेट पर .default टेम्पलेट की प्रतिलिपि बनाकर) और कुछ कस्टम कोड जोड़ें।
हमारे टेम्पलेट के .parameters.php में एक नया मान जोड़ें:

 $arTemplateParameters = array( "LIST_NAME" => Array( "NAME" => GetMessage("LIST_NAME"), "TYPE" => "HTML", "DEFAULT" => "Our Team", ), );

भाषा फ़ाइलों में मान जोड़ना न भूलें!

अब घटक टेम्पलेट लेते हैं। यहां हमें एक सरल काउंटर की आवश्यकता है जो पंक्ति लोअरकेस ब्लॉक को बंद कर देगा और एक लाइन में 2,3,4 और 5 ब्लॉक के लिए इंडेंट करेगा।

 <? $i++; if ($i >= 5) { $i = 0; ?> </div><div class="row"> <? } ?> <?endforeach;?> <? if ($i > 0) { ?> </div> <? } ?>

हर फायरमैन के लिए एक चक्र शुरू करने से पहले काउंटर को रीसेट करना न भूलें।

काउंटर के अलावा, हमें अपनी "स्थिति" संपत्ति का मूल्य प्रदर्शित करना होगा, जिसके लिए हम स्थिति कोड निर्धारित करते हैं। घटक के रिटर्न वाले डेटा वाले सरणी में, यह संपत्ति $ arResult ["ITEMS"] ["PROPERTIES"] ["स्थिति"] ["VALUE"] में संग्रहीत होती है, क्योंकि हम ITEMS पर पुनरावृत्त तत्वों में संपत्ति प्रदर्शित करेंगे, यह दिखेगा :

 <?=$arItem["PROPERTIES"]["POSITION"]["VALUE"]?>

फिर टेम्प्लेट स्वयं इस तरह दिखाई देगा:

 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); $i=0;?> <h2><?=$arParams['LIST_NAME']?></h2> <div class="team"> <div class="row"> <?if($arParams["DISPLAY_TOP_PAGER"]):?> <?=$arResult["NAV_STRING"]?><br /> <?endif;?> <?foreach($arResult["ITEMS"] as $arItem):?> <? $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT")); $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM'))); ?> <div class="col col-md-4 <?if($i > 0){?>col-md-offset-1<?} ?>" id="<?=$this->GetEditAreaId($arItem['ID']);?>"> <img src=""PREVIEW_PICTURE"]["SRC"]?>" alt=""PREVIEW_PICTURE"]["ALT"]?>" title=""PREVIEW_PICTURE"]["TITLE"]?>" class="thumbnail"> <div class="caption"> <h3><?echo $arItem["NAME"]?></h3> <P><?=$arItem["PROPERTIES"]["POSITION"]["VALUE"]?></P> </div> </div> <? $i++; if ($i >= 5) { $i = 0; ?> </div><div class="row"> <? } ?> <?endforeach;?> <? if ($i > 0) { ?> </div> <? } ?> <?if($arParams["DISPLAY_BOTTOM_PAGER"]):?> <br /><?=$arResult["NAV_STRING"]?> <?endif;?> </div>

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

फोल्डर / बिट्रिक्स / टेम्प्लेट / व्हाट्सएप-बूटस्ट्रैप / इमेज / टीम / को टेंप्लेट में चित्रों के साथ डिलीट करना न भूलें , जो कि अब व्यक्ति ब्लॉक को इंफो ब्लॉक में स्थानांतरित करने के बाद की जरूरत नहीं है!

पृष्ठ पाठ के बारे में

चूंकि हमें इस बात की समझ नहीं है कि पृष्ठ के अन्य तत्व क्या कार्य करते हैं, क्या कोई यादृच्छिक उद्धरण प्रकट होना चाहिए या, यह कहना चाहिए कि क्या तस्वीरों को फोटो गैलरी तक ले जाना चाहिए, हम एक सरल पथ के साथ जाएंगे।
सभी सामग्री स्थिर रहेगी, हम केवल कुछ शैलियों को जोड़ेंगे ताकि भावी संपादक महान सुविधा के साथ पृष्ठ पर काम कर सकें।
ऐसा करने के लिए
, हम अपने टेम्पलेट / साइट मैट्रिक्स /templates/whitesquare-bootstrap/styles.css (या प्रशासनिक अनुभाग) से जुड़ी साइट शैलियों फ़ाइल का उपयोग करेंगे : चूंकि यह फ़ाइल सीएसएस को सामग्री पर लागू करने के लिए उपयोग की जाती है, एक दृश्य संपादक सहित, हमें "भूल" करना होगा सीएसएस कैस्केडिंग और तत्वों के घोंसले को ध्यान में रखे बिना शैलियों को निर्धारित करता है।
उदाहरण के लिए, एक उद्धरण इस तरह दिखेगा:

 .jumbotron { border-radius: 0; padding: 0; margin: 0; font-size: 18px; font-weight: 200; background-color: #29c5e6; box-sizing: border-box; color: #ffffff; line-height: 2.1428571435; display: block; box-sizing: border-box; font-family: Tahoma, sans-serif; blockquote { border-left: none; p { font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; color: #ffffff; } small { display: block; text-align: right; color: #1D8EA6; color: #1D8EA6; font: 300 20px @brand-font; &:before { content: ''; } } } }

संपादकों द्वारा इस शैली को स्वयं वीजा का उपयोग करने के लिए, संपादक को टेम्पलेट की जड़ में .styles.php फ़ाइल में शैलियों की एक सरणी जोड़ने की आवश्यकता है:

 <? return array( "jumbotron" => "", ); ?>

या टेम्प्लेट संपादन टूल (टैब "साइट शैलियाँ") के माध्यम से:

हम एक मारफेट बनाते हैं

संपादकों के काम को थोड़ा सुविधाजनक बनाने के लिए, आप साइट टेम्पलेट में एक फ़ोल्डर / पेज_टैम्पलेट्स बना सकते हैं, जहां पृष्ठ टेम्पलेट होंगे जो प्रोजेक्ट के लिए डिफ़ॉल्ट रूप से बनाए जा सकते हैं।
पेज टेम्प्लेट एक नियमित php फाइल है जो पब्लिक पार्ट में पेज के समान है।
टेम्प्लेट के अलावा, आपको .content.php फ़ाइल को सभी संभावित पेज टेम्प्लेट की एक सरणी के साथ रखना होगा। हमारे मामले में, यह होगा:

 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?><? IncludeTemplateLangFile(__FILE__); $TEMPLATE["about.php"] = Array("name"=>GetMessage("about"), "sort"=>1); ?>

भाषा फ़ाइलों को बनाने के लिए मत भूलना!

/bitrix/templates/whitesquare-bootstrap/lang/ru/page_templates/.content.php
/bitrix/templates/whitesquare-bootstrap/lang/ru/page_templates/.content.php

टेम्पलेट के लिए प्रशासनिक अनुभाग तक पहुंच रखने वालों के लिए एक अज्ञात वस्तु नहीं होने के लिए, हम एक विवरण फ़ाइल जारी करेंगे और एक स्क्रीनशॉट संलग्न करेंगे! वे स्वचालित रूप से उठाए जाएंगे:

विवरण - विवरण. टेम्पलेट की जड़ में

 <?$arTemplate = array( "NAME" => " 1   ", "DESCRIPTION" => "   Bootstrap   - ", "SORT" => 100, ); ?>

स्क्रीनशॉट - स्क्रीन.gif टेम्पलेट की जड़ में

बस इतना ही!

हमने तैयार HTML बूटस्ट्रैप लेआउट को 1C-Bitrix, पेज लेआउट में खींच लिया और एक पूर्ण टेम्पलेट प्राप्त किया!

अंतभाषण

लेख बहुत लंबा निकला, इसलिए सभी अशुद्धियों और टाइपो को घटाना बहुत मुश्किल है। यदि आपको कोई गलती मिलती है - मुझे पीएम में लिखें, और मैं इसे खुशी के साथ ठीक कर दूंगा!
बहुत धन्यवाद Mirantus मूल लेख और तैयार vorstku है कि मैं एक आधार के रूप में ले सकता है के लिए!
GitHub प्रोजेक्ट में एक छोटे से बोनस के रूप में, टेम्पलेट और पृष्ठों के अलावा, मैंने IMPORT_DATA फ़ोल्डर रखा, जिसमें लेख में चित्रित टीम के सदस्यों के साथ एकमात्र जानकारी ब्लॉक के लिए डेमो डेटा का एक डंप होता है। आप इसे XML के रूप में पृष्ठ /bitrix/admin/iblock_xml_import.php?lang=en पर आयात कर सकते हैं

बूटस्ट्रैप लेआउट के आधार पर 1C-Bitrix टेम्पलेट बनाएं