Selvstudium: Tilføje brugerdefineret sidelayout på dit websted

Når du opretter nye websider ved hjælp af arbejdsområdet Sider, har du mulighed for at vælge sidelayout. I visse tilfælde kan du oprette et brugerdefineret sidelayout, der viser oplysninger i et bestemt format, eller oprette en specialiseret brugergrænseflade.

I dette selvstudium får du mere at vide om, hvordan du opretter et brugerdefineret sidelayout ved hjælp af Liquid.

Vores eksempelscenarie er at bygge en simpel skabelon med to kolonner, der bruger hovedwebstedsmenuen som venstre navigation, med sideindholdet til højre.

Du kan se følgende trin og aktiver, der oprettes for at oprette et brugerdefineret sidelayout:

• Vi opretter en fælles basiswebskabelon med brugerdefineret kode for at oprette et grundlæggende sidelayout.
• Vi opretter endnu en webskabelon med yderligere kode for at vise funktionaliteten af webskabeloner.
• Der oprettes også en sideskabelonpost med henvisning til webskabelonen, som konfigurerer, hvordan sidelayoutet gengives på webstedet.
• Til sidst oprettes der en webside ved hjælp af det brugerdefinerede sidelayout.

Forudsætninger

• Power Pages-abonnement eller prøve. Få en gratis Power Pages-prøveversion her.
• Oprette et Power Pages-websted Oprette et Power Pages-websted
• Grundlæggende kendskab til HTML og Liquid

Trin 1: Oprette en webstedsskabelon og skrive Liquid-skabelonkoden

Først skal vi oprette vores webstedsskabelon og skrive Liquid-skabelonkoden. Du skal sandsynligvis genbruge nogle af de gængse elementer i denne skabelon i fremtidige skabeloner. Derfor skal der oprettes en fælles grundlæggende skabelon, som derefter kan udvides med vores særlige skabelon. Den grundlæggende skabelon indeholder brødkrummelinks, titel/sidehoved og definerer også layoutet med to kolonner:

1. Gå til Power Pages.

2. Vælg i designstudiet..., og vælg derefter Portalstyring. Du skal bruge appen Portaladministration til at oprette en post i en webskabelon og angive din brugerdefinerede kode.

   

3. I Portalstyring-appen skal du rulle til Indhold og vælge Web-skabeloner.

4. Vælg Ny i skærmbilledet Aktive webskabeloner.

5. Navngiv webskabelonen til Layout med to kolonner.

   

6. Indsæt følgende kode i feltet Kilde:

   <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. Vælg Save.

Trin 2: Oprette en ny webskabelon, der udvider vores grundlæggende layoutskabelon

Vi opretter en webskabelon, der læser navigationsposten fra den tilknyttede webside (se nedenfor). Vi udvider også den basisskabelon, vi oprettede i forrige trin. Webskabeloner kan bruges som komponenter, der kan genbruges, når du opretter avancerede websteder.

1. I Portalstyring-appen skal du rulle til Indhold og vælge Web-skabeloner.

2. Vælg Ny i skærmbilledet Aktive webskabeloner.

3. Navngiv webskabelonen til Venstre navigation til weblinks.

Venstre navigation til weblinks (webskabelon)

Bemærk, hvordan koden bruger nøgleordet Liquid extends til at indarbejde basislayoutskabelonen.

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

Trin 3: Oprette en ny sideskabelon, der er baseret på webstedsskabelonen

I dette trin skal oprette vi en ny sideskabelon, der er baseret på den webskabelon, vi oprettede i forrige trin. Sideskabelonen er påkrævet, for at vores brugerdefinerede sidelayout kan være en indstilling, du kan vælge, når du opretter en ny webside.

1. I Portalstyring-appen skal du rulle til Websted og vælge Sideskabeloner.

2. Vælg Ny i skærmbilledet Aktive sideskabeloner.

3. Udfyld felterne:

   Felt	Værdi
   Name	Navn på en type.
   Websted	Vælg det websted, som temaet skal anvendes på. Sæt markøren i feltet, og tryk på Enter på tastaturet for at få vist en liste over tilgængelige indstillinger.
   Type	Vælg Webstedsskabelon
   Webskabelon	Vælg Venstre navigation til weblinks (eller det, du har navngivet webskabelonen).
   Brug webstedets sidehoved og sidefod	Markeret.
   Er standard	Ikke markeret.
   Tabelnavn	Ingen er valgt.
   Beskrivelse	En beskrivelse af din sideskabelon.

   

4. Vælg Gem.

Trin 4: Opret en webside for at få vist indhold

1. Vælg Synkroniser i design studio. Denne handling giver opdateringer, der er foretaget i appen Portaladministration, til design studio.

2. Vælg + Side i arbejdsområdet Sider.

3. I dialogboksen Tilføj en side:

   1. Angiv Sidenavn.
   2. Vælg det brugerdefinerede sidelayout i Brugerdefineret layout.
   3. Vælg Tilføj.

   

4. Føj mere indhold til de redigerbare sektioner på siden.

Yderligere sidekonfiguration

I dette eksempel skal vi knytte navigationsposten til indholdssiden, for at vores brugerdefinerede kode kan gengive menuen i venstre navigation.

1. Vælg i designstudiet..., og vælg derefter Portalstyring. Brug appen Portaladministration til at tilføje yderligere konfiguration på din side.

2. Rul til Indhold i appen Portaladministration, og vælg Websider.

3. Find og åbn den side, du har oprettet tidligere i arbejdsområdet Sider. Dette åbner rodwebsiden. Foretag ændringer på den relaterede side med lokaliseret indhold.

4. Vælg den oversatte indholdswebside i sektionen Oversat indhold.

   

   Bemærk

   Hvis der er klargjort flere sprog, skal du opdatere alle oversatte sider.

5. Gå til sektionen Diverse, og vælg det weblinksæt, du vil have vist i navigationsfeltet.

   

6. Gem dine ændringer, og vend tilbage til Design studio.

7. Vælg Forhåndsversion, og vælg derefter Skrivebord for at få vist den brugerdefinerede side med sidenavigation implementeret.

   

Se også

• Oprette et brugerdefineret sidelayout
• Liquid-oversigt