Zelfstudie: Aangepaste paginalay-out toevoegen aan uw site

Wanneer u nieuwe webpagina's maakt met behulp van de werkruimte Pagina's, hebt u de keuze uit de aangeboden paginalay-outs. In sommige gevallen wilt u misschien een aangepaste pagina-indeling maken om informatie in een bepaalde indeling weer te geven of om een gespecialiseerde gebruikersinterface te bieden.

In deze zelfstudie leert u hoe u een aangepaste pagina-indeling maakt met Liquid.

In dit voorbeeldscenario maken we een eenvoudige sjabloon met twee kolommen met het hoofdmenu van de site voor navigatie links en de pagina-inhoud rechts.

De volgende stappen en activa worden gemaakt om een aangepaste pagina-indeling te bieden:

• We maken een gemeenschappelijke basiswebsjabloon met aangepaste code om de basispagina-indeling vast te stellen.
• We maken een tweede websjabloon met aanvullende code om de modulaire functies van websjablonen te demonstreren.
• Daarnaast maken we een paginasjabloonrecord die verwijst naar de websjabloon waarmee wordt geconfigureerd hoe de pagina-indeling op de site wordt weergegeven.
• Tot slot maken we een webpagina op basis van de aangepaste pagina-indeling.

Voorwaarden

• Een Power Pages-abonnement of -proefversie. Download hier een Power Pages-proefversie
• Een Power Pages-site gemaakt. Een Power Pages-site maken
• Basiskennis van HTML en Liquid

Stap 1: Een websjabloon maken en de Liquid-sjablooncode schrijven

Eerst maken we uw websjabloon en schrijven we de Liquid-sjablooncode. Waarschijnlijk gebruikt u vaak voorkomende elementen van deze sjabloon opnieuw in toekomstige sjablonen. Daarom maken we een algemene basissjabloon die u uitbreidt met uw specifieke sjabloon. Uw basissjabloon biedt breadcrumb-koppelingen en uw paginatitel/-koptekst, en definieert uw tweekoloms indeling.

1. Ga naar Power Pages.

2. Kies in de ontwerpstudio... en selecteer vervolgens Portalbeheer. Gebruik de Portalbeheer-app om een websjabloonrecord te maken en in te voeren in uw aangepaste code.

   

3. Scrol in de Portalbeheer-app naar de sectie Inhoud en selecteer Websjablonen.

4. Selecteer op het scherm Actieve websjablonen de optie Nieuw.

5. Geef de websjabloon de naam Indeling met twee kolommen.

   

6. Plak de volgende code in het veld Bron:

   <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. Selecteer Opslaan.

Stap 2: Een nieuwe websjabloon maken waarmee onze basisindelingssjabloon wordt uitgebreid

We maken een websjabloon die de navigatierecord van de bijbehorende webpagina leest (zie hieronder). Daarnaast breiden we de basissjabloon uit die we in de vorige stap hebben gemaakt. Websjablonen kunnen worden gebruikt als herbruikbare onderdelen bij het maken van geavanceerde sites.

1. Scrol in de Portalbeheer-app naar de sectie Inhoud en selecteer Websjablonen.

2. Selecteer op het scherm Actieve websjablonen de optie Nieuw.

3. Geef de websjabloon de naam Webkoppelingen voor linkernavigatie.

Linker navigatievenster met webkoppelingen (websjabloon)

Merk op hoe de code het Liquid-trefwoord extends gebruikt om de basislay-outsjabloon op te nemen.

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

Stap 3: Een nieuwe paginasjabloon maken op basis van de websjabloon

Maak in deze stap een nieuwe paginasjabloon gebaseerd op de websjabloon die in de vorige stap is gemaakt. De paginasjabloon is vereist voor de aangepaste pagina-indeling om een optie te zijn die u kunt selecteren bij het maken van een nieuwe webpagina.

1. Scrol in de Portalbeheer-app naar de sectie Website en selecteer Paginasjablonen.

2. In het scherm Actieve paginasjablonen selecteert u de optie Nieuw.

3. Vul de velden in:

   Veld	Weergegeven als
   Meting	Typ een naam.
   Website	Selecteer de website waarop het thema wordt toegepast. Plaats de cursor in het veld en druk op Enter om een lijst met beschikbare opties weer te geven.
   Type	Kies Websjabloon
   Websjabloon	Selecteer Webkoppelingen voor linkernavigatie (of hoe u de websjabloon ook hebt genoemd).
   Koptekst en voettekst van website gebruiken	Geselecteerd.
   Is standaard	Niet geselecteerd.
   Tabelnaam	Niets geselecteerd.
   Omschrijving	Een beschrijving van uw paginasjabloon.

   

4. Selecteer Save.

Stap 4: Een webpagina maken voor het weergeven van inhoud

1. Selecteer in de ontwerpstudio de optie Synchroniseren. Met deze actie worden gemaakte updates in de Portalbeheer-app overgebracht naar de ontwerpstudio.

2. Selecteer in de werkruimte Pagina's de optie + Pagina.

3. Doe het volgende in het dialoogvenster Een pagina toevoegen:

   1. Voer Paginanaam in.
   2. Selecteer bij Aangepaste lay-outs uw aangepaste paginalay-out.
   3. Selecteer Toevoegen.

   

4. Voeg nog meer inhoud toe aan de bewerkbare secties van de pagina.

Aanvullende paginaconfiguratie

In dit voorbeeld koppelt u de navigatierecord aan de inhoudspagina, zodat het menu in de linkernavigatie kan worden weergegeven door de aangepaste code.

1. Kies in de ontwerpstudio... en selecteer vervolgens Portalbeheer. Gebruik de Portalbeheer-app om extra configuraties aan uw pagina toe te voegen.

2. Blader in de Portalbeheer-app naar de sectie Inhoud en selecteer Webpagina's.

3. Zoek en open de pagina die u eerder hebt gemaakt in de werkruimte Pagina's. De hoofdwebpagina wordt geopend. Breng wijzigingen aan op de pagina met gerelateerde gelokaliseerde inhoud.

4. Selecteer in de sectie Gelokaliseerde inhoud de webpagina met gelokaliseerde inhoud.

   

   Notitie

   Als u meerdere talen hebt ingericht, werkt u elke gelokaliseerde pagina bij.

5. Ga naar de sectie Diversen en selecteer de webkoppelingsset die moet worden weergegeven in het veld Navigatie.

   

6. Sla uw wijzigingen op en ga terug naar de ontwerpstudio.

7. Selecteer Voorbeeld en vervolgens Bureaublad om uw aangepaste pagina met de zijnavigatie te bekijken.

   

Zie ook

• Een aangepaste paginalay-out maken
• Overzicht van Liquid