Оқулық: сайтыңызға реттелетін бет орналасуын қосу

Беттер жұмыс кеңістігін пайдаланып жаңа веб-беттерді жасаған кезде, сізде берілген бет орналасуларының таңдауы болады. Кейбір жағдайларда ақпаратты белгілі бір пішімде көрсету немесе арнайы пайдаланушы интерфейсін қамтамасыз ету үшін реттелетін бет орналасуын жасағыңыз келуі мүмкін.

Бұл оқулықта сіз Liquid арқылы реттелетін бет орналасуын жасауды үйренесіз.

Біздің мысал сценарийі — негізгі сайт мәзірін бет мазмұны оң жаққа қарай орналасқан сол жақ навигация ретінде пайдаланатын екі бағанды үлгі жасау.

Мұнда реттелетін бет орналасуын қамтамасыз ету үшін жасалатын келесі қадамдар мен активтер берілген:

• Негізгі бет орналасуын орнату үшін реттелетін коды бар жалпы негізгі веб-үлгіні жасаймыз.
• Веб-үлгілердің модульдік мүмкіндіктерін көрсету үшін қосымша коды бар екінші веб-үлгіні жасаймыз.
• Сондай-ақ сайтта бет орналасуын көрсету жолын конфигурациялайтын веб-үлгіге сілтеме жасайтын бет үлгісінің жазбасын жасаймыз.
• Ақырында біз реттелетін бет орналасуын пайдаланып веб-бет жасаймыз.

Алғышарттар

• Power Pages жазылымы немесе сынақ нұсқасы. Power Pages сынақ нұсқасын осы жерден алыңыз.
• Power Pages сайты жасалды. Power Pages сайтын жасау.
• HTML және Liquid туралы негізгі білім.

1-қадам: веб-үлгісін жасау және Liquid үлгі кодын жазу

Алдымен веб-үлгі жасалады және 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. Өрістерді толтыру.

   Өріс	Value
   Аты	Атауын енгізу.
   Веб-сайт	Тақырып қолданылатын веб-сайтты таңдаңыз. Курсорды өріске қойып, қолжетімді опциялардың тізімін көрсету үшін пернетақтада Enter пернесін басыңыз.
   Түр	Веб-үлгі опциясын таңдаңыз
   Веб-үлгі	Веб-сілтемелер сол жақ навигациясы (немесе веб-үлгіні қалай атасаңыз да) параметрін таңдаңыз.
   Веб-сайттың үстіңгі және төменгі колонтитулдарын пайдалану	Құсбелгі қойылды.
   Әдепкі болып табылады	Құсбелгі алынды.
   Кесте атауы	Ешқайсысы таңдалмаған.
   Сипаттама	Бет үлгісінің сипаттамасы.

   

4. Сақтау опциясын таңдаңыз.

4-қадам: мазмұнын көрсету үшін веб-бет жасау

1. Дизайн студиясында Синхрондау параметрін таңдаңыз. Бұл Порталды басқару бағдарламасында жасалған жаңартуларды дизайн студиясына әкеледі.

2. Беттер жұмыс кеңістігінде + Бет параметрін таңдаңыз.

3. Бет қосу диалогтік терезесінде;

   1. Бет атауын енгізу
   2. Арнайы орналасулар ішінен арнайы бет орналасуын таңдаңыз.
   3. Қосу параметрін таңдаңыз.

   

4. Беттің өңделетін бөлімдеріне кез келген басқа мазмұнды қосыңыз.

Қосымша бет конфигурациясы

Бұл мысалда реттелетін кодымыз сол жақтағы навигацияда мәзірді көрсету үшін навигация жазбасын мазмұн бетімен байланыстыруымыз керек.

1. Дизайн студиясында ... белгісін таңдаңыз, содан кейін Порталды басқару опциясын таңдаңыз. Бетіңізге қосымша конфигурация қосу үшін Порталды басқару бағдарламасын пайдаланасыз.

2. Порталды басқару бағдарламасында Мазмұн бөліміне айналдырып, Веб-беттер параметрін таңдаңыз.

3. Сіз бұрын Беттер жұмыс кеңістігінде жасаған бетті тауып, ашыңыз. Бұл түбірлік веб-бетті ашады. Өзгерістерімізді қатысты жергілікті мазмұн бетінде енгізуіміз керек болады.

4. Төмен қарай айналдырып, Локализацияланған мазмұн бөлімінде локализацияланған мазмұнның веб-бетін таңдаңыз.

   

   Ескертпе

   Сізде бірнеше тіл дайын болса, әрбір локализацияланған бетті жаңарту керек болады.

5. Басқа бөліміне өтіңіз және Навигация өрісінде көрсету керек веб-сілтеме жинағын таңдаңыз.

   

6. Өзгертулерді сақтап, дизайн студиясына оралыңыз.

7. Бүйірлік навигация ендірілген реттелетін бетті көру үшін Алдын ала қарау нұсқасы параметрін таңдап, Жұмыс үстелі параметрін таңдаңыз.

   

Келесіні де қараңыз:

• Реттелетін бет орналасуын жасау
• Liquid жүйесіне шолу