Tutorial: Adăugați un aspect de pagină personalizat site-ului dvs.

Când creați pagini web noi utilizând spațiul de lucru Pagini, aveți la dispoziție o varietate de aspecte de pagini. În unele cazuri, poate doriți să creați un aspect de pagină personalizat pentru a afișa informații într-un anumit format sau pentru a oferi o interfață de utilizator specializată.

În acest tutorial, veți învăța cum să creați un aspect personalizat de pagină utilizând Liquid.

Exemplul de scenariu este de a construi un simplu șablon cu două coloane care utilizează meniul site-ului principal ca navigare în partea stângă, cu conținutul paginii la dreapta.

Iată următorii pași și elemente care vor fi create pentru a oferi un aspect personalizat al paginii:

• Vom crea un șablon web de bază comun cu cod personalizat pentru a stabili aspectul de bază al paginii.
• Vom crea un al doilea șablon web cu cod suplimentar pentru a demonstra caracteristicile modulare ale șabloanelor web.
• Vom crea, de asemenea, o înregistrare a șablonului de pagină care face referire la șablonul web care va configura modul în care aspectul paginii va fi redat pe site.
• În cele din urmă, vom crea o pagină web folosind aspectul personalizat al paginii.

Cerințe preliminare

• Un abonament sau o versiune de încercare a Power Pages. Obțineți o versiune gratuită a Power Pages aici.
• Trebuie creat un site Power Pages. Creați un site Power Pages.
• Cunoștințe de bază despre HTML și Liquid.

Pasul 1: creați un șablon web și scrieți codul de șablon Liquid

În primul rând, vom crea șablonul web și vom scrie codul pentru șablonul Liquid. Este posibil să reutilizăm unele elemente comune ale acestui șablon în șabloanele viitoare. Deci vom crea un șablon de bază comun pe care îl vom extinde apoi cu șablonul nostru specific. Șablonul nostru de bază va oferi linkuri de urmărire și titlul/antetul nostru de pagină, și va defini aspectul nostru cu o coloană.

1. Accesați Power Pages.

2. În studioul de proiectare, alegeți ... și apoi selectați Gestionare portal. Va trebui să utilizați aplicația Gestionare portal pentru a crea o înregistrare de șablon web și pentru a introduce codul personalizat.

   

3. În aplicația Gestionare portal, derulați până la secțiunea Conținut și selectați Șabloane web.

4. Din ecranul Șabloane Web active, selectați Nou.

5. Denumiți șablonul web Aspect cu două coloane.

   

6. Lipiți următorul cod în câmpul Sursă.

   Aspect cu două coloane (șablon web)

   <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. Selectați Salvați.

Pasul 2: creați un nou șablon web care extinde șablonul nostru aspect de bază

Vom crea un șablon web care va citi înregistrarea de navigare de pe pagina web asociată (vezi mai jos). Vom extinde, de asemenea, șablonul de bază creat la pasul anterior. Șabloanele web pot fi folosite drept componente reutilizabile atunci când se creează site-uri avansate.

1. În aplicația Gestionare portal, derulați până la secțiunea Conținut și selectați Șabloane web.

2. Din ecranul Șabloane Web active, selectați Nou.

3. Denumiți șablonul web Navigare la stânga în linkuri web.

   

   Navigarea la stânga în linkurile web (șablon web)

   Observați modul în care codul folosește cuvântul cheie extends din Liquid pentru a încorpora șablonul de aspect de bază.

   {% 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 %}
   

Pasul 3: creați un nou șablon de pagină pe baza șablonului web

În acest pas, vom crea un nou șablon de pagină care este bazat pe șablonul web pe care l-am creat la pasul anterior. Șablonul de pagină este necesar pentru ca aspectul nostru personalizat să fie o opțiune pe care o puteți selecta atunci când creați o nouă pagină web.

1. În aplicația Gestionare portal, derulați până la secțiunea Site și selectați Șabloane pagină.

2. Din ecranul Șabloane pagină activă, selectați Nou.

3. Completați câmpurile.

   Câmp	Valoare
   Nume	Introduceți un nume.
   Site web	Selectați site-ul căruia i se va aplica tema. Puneți cursorul în câmp și apăsați Enter de pe tastatură pentru a afișa o listă de opțiuni disponibile.
   Tipul	Alegeți Șablon web
   Șablon web	Selectați Navigare la stânga în linkuri web (sau cum ați numit șablonul dvs. web).
   Utilizare anteturi și subsoluri de site web	Bifată.
   Este implicit	Debifat.
   Nume tabel	Nicio selecție.
   Descriere	O descriere a șablonului dvs. de pagină.

   

4. Selectați Salvați.

Pasul 4: creați o pagină web pentru a afișa conținutul

1. În studioul de design, selectați Sincronizare. Acest lucru va aduce în studioul de design actualizări făcute în aplicația Gestionare portaluri.

2. În spațiul de lucru Pagini, selectați + Pagină.

3. În caseta de dialog Adăugați un robot;

   1. Introduceți în Nume de pagină
   2. Din Aspecte personalizate, selectați aspectul personalizat al paginii.
   3. Selectați Adăugare.

   

4. Adăugați mai mult conținut în secțiunile editabile ale paginii.

Configurație suplimentară pagină

În acest exemplu, va trebui să conectăm înregistrarea de navigare la pagina de conținut pentru ca codul nostru personalizat să redea meniul din partea de navigare din stânga.

1. În studioul de proiectare, alegeți ... și apoi selectați Gestionare portal. Veți folosi aplicația Gestionare portaluri pentru a adăuga o configurație suplimentară paginii dvs.

2. În aplicația Gestionare portaluri, derulați până la secțiunea Conținut și selectați Pagini web.

3. Găsiți și deschideți pagina pe care ați creat-o anterior în spațiul de lucru Pagini. Acest lucru va deschide pagina web rădăcină. Va trebui să facem modificările în pagina de conținut localizat aferentă.

4. Derulați în jos și în secțiunea Conținut localizat, selectați pagina web cu conținut localizat.

   

   Notă

   Dacă aveți mai multe limbi furnizate, va trebui să actualizați fiecare pagină localizată.

5. Accesați secțiunea Diverse și selectați setul de linkuri web pe care doriți să îl afișați în câmpul Navigare.

   

6. Salvați modificările dvs. și reveniți la studioul de design.

7. Selectați Previzualizare și apoi Desktop pentru a vizualiza pagina personalizată cu navigarea laterală implementată.

   

Consultați și

• Creați un aspect de pagină personalizat
• Prezentare generală Liquid