Kurz: Přidání vlastních rozložení stránky na web

Když vytváříte nové webové stránky pomocí pracovního prostoru Stránky, máte na výběr z nabízených rozvržení stránek. V některých případech můžete chtít vytvořit vlastní rozvržení stránky pro zobrazení informací v určitém formátu nebo pro poskytnutí specializovaného uživatelského rozhraní.

V tomto kurzu se naučíte, jak vytvořit vlastní rozvržení stránky pomocí nástroje Liquid.

Naším příkladovým scénářem je vytvoření jednoduché šablony se dvěma sloupci, která má hlavní nabídku webu jako navigaci vlevo s obsahem stránky vpravo.

Zde jsou následující kroky a podklady, které budou vytvořeny, aby poskytly vlastní rozvržení stránky:

• Vytvoříme společnou základní webovou šablonu s vlastním kódem pro vytvoření základního rozvržení stránky.
• Vytvoříme druhou webovou šablonu s dodatečným kódem pro demonstraci modulárních funkcí webových šablon.
• Vytvoříme také záznam šablony stránky odkazující na webovou šablonu, který nakonfiguruje způsob vykreslení rozvržení stránky na webu.
• Nakonec vytvoříme webovou stránku pomocí vlastního rozvržení stránky.

Předpoklady

• Předplatné nebo zkušební verze Power Pages. Získejte zkušební verzi Power Pages zde.
• Vytvořený web Power Pages. Vytvoření webu Power Pages.
• Základní znalost HTML a Liquid.

Krok 1: Vytvoření webové šablony a napsání kódu šablony Liquid

Nejprve vytvoříme šablonu webu a napíšeme kód šablony Liquid. Pravděpodobně znovu použijeme některé společné prvky této šablony v budoucích šablonách. Vytvoříme tedy společnou základní šablonu, kterou budeme poté rozšiřovat pomocí konkrétní šablony. Naše základní šablona bude poskytovat odkazy navigace s popisem cesty, nadpis/záhlaví naší stránky a definovat naše rozložení s jedním sloupcem.

1. Umožňuje přejít na Power Pages.

2. V návrhovém studiu vyberte ... a poté vyberte možnost Správa portálu. K vytvoření záznamu šablony webu a zadání vlastního kódu budete muset použít aplikaci Správa portálu.

   

3. V aplikaci Správa portálu vyhledejte sekci Obsah a vyberte Šablony webu.

4. Na obrazovce Aktivní šablony webu vyberte Nový.

5. Webovou šablonu pojmenujte Rozložení se dvěma sloupci.

   

6. Do pole Zdroj vložte následující kód.

   Rozložení se dvěma sloupci (webová šablona)

   <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. Vyberte Uložit.

Krok 2: Vytvoření nové webové šablony, která rozšiřuje naši šablonu se základním rozložením

Vytvoříme webovou šablonu, která bude číst navigační záznam z přidružené webové stránky (viz níže). Rozšíříme také základní šablonu, kterou jsme vytvořili v předchozím kroku. Webové šablony lze použít jako opakovaně použitelné součásti při vytváření pokročilých webů.

1. V aplikaci Správa portálu vyhledejte sekci Obsah a vyberte Šablony webu.

2. Na obrazovce Aktivní webové šablony vyberte Nová.

3. Webovou šablonu pojmenujte Levá navigace webových odkazů.

   

   Navigace na webové odkazy vlevo (webová šablona)

   Všimněte si, jak kód používá klíčové slovo Liquid extends pro začlenění šablony základního rozvržení.

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

Krok 3: Vytvoření nové šablony stránky na základě webové šablony

V tomto kroku vytvoříte novou šablonu stránky, který je založena na webové šabloně, již jsme vytvořili v předchozím kroku. Šablona stránky je vyžadována pro naše vlastní rozvržení stránky jako možnost, kterou si můžete vybrat při vytváření nové webové stránky.

1. V aplikaci Správa portálu přejděte na část Web a vyberte Šablony stránky.

2. Na obrazovce Aktivní šablony stránky vyberte Nový.

3. Vyplňte pole.

   Pole	Hodnota
   Name	Zapište název.
   Web	Vyberte web, na který bude motiv použit. Umístěte kurzor do pole a stisknutím Enter na klávesnici zobrazte seznam dostupných možností.
   Type	Vyberte Webová šablona
   Šablona webu	Vyberte Levá navigace webových odkazů (nebo jak jste pojmenovali svou webovou šablonu).
   Použít záhlaví a zápatí webu	Zaškrtnuto.
   Výchozí	Nezaškrtnuto.
   Název tabulky	Nebylo vybráno nic.
   Description	Popis šablony stránky.

   

4. Vyberte Uložit.

Krok 4: Vytvoření webové stránky pro zobrazení obsahu

1. V designovém studiu vyberte Synchronizovat. To přinese aktualizace provedené v aplikaci Správa portálu do designového studia.

2. V pracovním prostoru Stránky vyberte + Stránka.

3. V dialogovém okně Přidat stránku:

   1. Zadejte název stránky
   2. V části Vlastní rozložení vyberte vlastní rozvržení stránky.
   3. Vyberte Přidat.

   

4. Přidejte další obsah do upravitelných částí stránky.

Další konfigurace stránky

V tomto příkladu budeme muset propojit navigační záznam se stránkou s obsahem, aby náš vlastní kód vykreslil nabídku v levé navigaci.

1. V návrhovém studiu vyberte ... a poté vyberte možnost Správa portálu. K přidání další konfigurace na stránku použijete aplikaci Správa portálu.

2. V aplikaci Správa portálu vyhledejte sekci Obsah a vyberte Webové stránky.

3. Najděte a otevřete stránku, kterou jste dříve vytvořili v pracovním prostoru Stránky. Otevře se kořenová webová stránka. Budeme muset provést změny na související stránce s lokalizovaným obsahem.

4. Přejděte dolů a v části Lokalizovaný obsah vyberte webovou stránku s lokalizovaným obsahem.

   

   Poznámka:

   Pokud máte k dispozici více jazyků, budete muset aktualizovat každou lokalizovanou stránku.

5. Přejděte na oddíl Různé a vyberte sadu webových odkazů, kterou chcete zobrazit v poli Navigace.

   

6. Uložte změny a vraťte se do designového studia.

7. Vyberte Náhled a pak Plocha pro zobrazení vlastní stránky s implementovanou boční navigací.

   

Viz také

• Vytvoření vlastního rozložení stránky
• Přehled jazyka Liquid