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í rozložení stránky, které bude zobrazovat informace v určitém formátu nebo poskytovat specializované uživatelské rozhraní.

V tomto kurzu se dozvíte, jak vytvořit vlastní rozložení stránky používající Liquid.

V našem ukázkovém scénáři vytvoříme šablonu se dvěma sloupci a hlavní nabídkou webu jako levou navigaci s obsahem stránky vpravo.

Tady jsou následující kroky a prostředky, které se vytvoří za účelem zajištění vlastního rozložení stránky:

• Vytvoříme společnou základní webovou šablonu s vlastním kódem pro vytvoření základního rozlož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á konfiguruje způsob vykreslování rozložení stránky na webu.
• Nakonec vytvoříme webovou stránku pomocí vlastního rozlož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řte šablonu webu a napište kód šablony Liquid. Pravděpodobně znovu použijete některé společné prvky této šablony v budoucích šablonách. Vytvoříte tedy společnou základní šablonu, kterou poté rozšíříte pomocí konkrétní šablony. Vaše základní šablona poskytuje odkazy navigace s popisem cesty a nadpis/záhlaví vaší stránky, jakož i definuje rozložení se dvěma sloupci.

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. Pomocí aplikace Správa portálu vytvořte záznam šablony webu a zadejte svůj vlastní kód.

   

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

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

5. Šablonu webu pojmenujte jako Rozložení se dvěma sloupci.

   

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

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

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

Vytváříme webovou šablonu, která čte 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. Šablonu webu pojmenujte jako Levá navigace s odkazy.

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ě vytvořené v předchozím kroku. Šablona stránky je vyžadována pro vlastní rozvržení stránky, které 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ánek vyberte Nová.

3. Vyplňte pole:

   Pole	Hodnota
   Name	Zapište název.
   Web	Vyberte web, na který se motiv použije. Chcete-li zobrazit seznam dostupných možností, umístěte kurzor do pole a stiskněte klávesu Enter na klávesnici.
   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 návrhovém studiu vyberte Synchronizovat. Tato akce přenese aktualizace provedené v aplikaci Správa portálu do návrhového studia.

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

3. V dialogovém okně Přidání stránky:

   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 propojte navigační záznam se stránkou obsahu pro vlastní kód, který vykreslí nabídku v levém navigačním panelu.

1. V návrhovém studiu vyberte ... a poté vyberte možnost Správa portálu. Pomocí aplikace Správa portálu můžete na stránku přidat další konfigurace.

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. Proveďte změny na související stránce lokalizovaného obsahu.

4. V části Lokalizovaný obsah vyberte webovou stránku s lokalizovaným obsahem.

   

   Poznámka:

   Pokud máte zřízeno více jazyků, aktualizujte 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 návrhového studia.

7. Vyberte Náhled a pak Plocha, čímž zobrazíte vlastní stránku s boční navigací.

   

Viz také

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