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 for at 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 to kolonner-skabelon, 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:

• Der oprettes 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å Power Pages-prøve 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. Vi skal sandsynligvis genbruge nogle af de gængse elementer i denne skabelon i fremtidige skabeloner. Derfor opretter vi en fælles grundlæggende skabelon, som vi derefter udvider med vores særlige skabelon. Vores grundlæggende skabelon indeholder brødkrummelinks og vores titel/sidehovedet og definerer også vores layout 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. Navngive webskabelonen til To kolonner-layout.

   

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

   Layout med to kolonner (webskabelon)

   <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 Gem.

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
   Navn	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. Derved får du adgang til de opdateringer, der er foretaget i appen Portaladministration, til designstudio.

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

3. i dialogboksen Tilføj en side.

   1. Indtast et 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. Du bruger appen Portaladministration til at tilføje yderligere konfiguration på din side.

2. I Portalstyring-appen skal du rulle til Indhold og vælge Websider.

3. Find og åbn den side, du har oprettet tidligere i arbejdsområdet Sider. Så åbnes rod-websiden. Vi er nødt til at foretage ændringerne på den relaterede side med lokaliseret indhold.

4. Rul ned, og 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 Desktop for at få vist den brugerdefinerede side med sidenavigation implementeret.

   

Se også

• Oprette et brugerdefineret sidelayout
• Liquid-oversigt