Självstudier: Lägga till anpassad sidlayout på din webbplats

Artikel
03/16/2023

När du skapar nya webbsidor med arbetsytan Sidor kan du välja vilka sidlayouter som ska visas. I vissa fall kanske du vill skapa en egen sidlayout för att visa information i ett visst format eller för att tillhandahålla ett särskilt användargränssnitt.

I den här självstudien lär du dig hur du skapar en anpassad sidlayout med hjälp av Liquid.

Vårt exempelscenario är att skapa en enkel mall med två kolumner som huvudplatsmeny som vänster sidnavigering med sidans innehåll till höger.

Följande steg och tillgångar skapas för att skapa en anpassad sidlayout:

Vi skapar en gemensam baswebbmall med anpassad kod för att skapa en grundläggande sidlayout.
Vi skapar ytterligare en webbmall med ytterligare kod som demonstrerar funktionerna i webbmallar.
Vi skapar också en sidmallspost som refererar till webbmallen som konfigurerar hur sidlayouten ska renderas på webbplatsen.
Slutligen skapar vi en webbsida med den anpassade sidlayouten.

Förutsättningar

En prenumeration på eller utvärdering av Power Pages. Skapa en Power Pages-utvärdering här.
En Power Pages-webbplats har skapats. Skapa en Power Pages-webbplats.
Grundläggande kunskaper i HTML och Liquid.

Steg 1: Skapa en Webbmall och skriv mallkod för Liquid.

Först skapar vi vår webbmall och skriver vår Liquid mallkod. Vi kommer med stor sannolikhet att återanvända vanliga element i denna mall i framtida mallar. Så skapar vi en gemensam basmall som vi sedan utökar med vår anpassade mall. Vår basmall tillhandahåller spårlänkar och vår sidrubrik/vårt sidhuvud, samt definierar även vår enkolumnslayout.

Gå till Power Pages.
I designstudion väljer du ... och seda Portalhantering. Du måste använda appen Portalhantering för att skapa en webbmall och ange din anpassade kod.
I appen Portalhantering bläddrar du till avsnittet Innehåll och väljer Webbmallar.
På skärmen Aktiva webbmallar väljer du Nu.
Ge webbmallen namnet till Layout med två kolumner.

Klistra in följande kod i fältet Källa.

Layout med två kolumner (webbmall)

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

Välj Spara.

Steg 2: Skapa en ny webbmall för som utökar vår grundläggande layoutmall

Vi ska skapa en webbmall som läser navigeringsposten från den associerade webbsidan (se nedan). Dessutom utökar vi grundmallen som vi skapade i föregående steg. Webbmallar kan användas som återanvändbara komponenter när du skapar avancerade webbplatser.

I appen Portalhantering bläddrar du till avsnittet Innehåll och väljer Webbmallar.
På skärmen Aktiva webbmallar väljer du Nu.

Ge webbmallen ett namn vänsternavigeringslayout för webblänkar.

Anpassad webbmall med navigering och innehåll.

Observera hur koden använder Liquid extends-nyckelordet för att införliva grundlayoutmallen.

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

Steg 3: Skapa en ny sidmall baserad på webbmallen

I det här steget ska vi skapa en ny sidmall som baseras på webbmallen som vi skapade i föregående steg. Sidmallen krävs för att vår egen sidlayout ska vara ett alternativ som du kan välja när du skapar en ny webbsida.

I appen Portalhantering bläddrar du till avsnittet Webbplats och väljer Sidmallar.
På skärmen Aktiva sidmallar väljer du Nu.

Fyll i fälten.

Fält	Värde
Name	Skriv in ett namn.
Webbplats	Välj den webbplats som ska användas för temat. Placera markören i fältet och tryck på Retur på tangentbordet för att visa en lista med tillgängliga alternativ.
Type	Välj Webbmall
Webbmall	Välj Vänster navigering med webblänkar (eller vad du än har namnet på din webbmall).
Använd webbplatsens sidhuvud och sidfot	Markerad.
Är standard	Avmarkerad.
Tabellnamn	Inget har valts.
Description	Beskrivningen av din sidmall.

Webblänkar med vänsternavigeringslayout för sidmall.

Välj Spara.

Steg 4: Skapa en webbplats för att visa innehåll

I designstudio, välj Synkronisering. Detta ger uppdateringar som görs i appen Portalhantering till designstudion.
I arbetsytan Sidor, välj + Sida.
I dialogrutan Lägg till en sida;
1. Ange Sidnamn
2. Från Anpassade layouter, välj din anpassade sidlayout.
3. Markera Lägga till.
Lägg till mer innehåll i de redigerbara avsnitten på sidan.

Ytterligare sidkonfiguration

I det här exemplet måste vi länka navigeringsposten till innehållssidan för att vår egen kod ska rendera menyn i vänster navigering.

I designstudion väljer du ... och seda Portalhantering. Du använder appen Portalhantering för att lägga till ytterligare konfiguration på sidan.
I appen Portalhanterin bläddrar du till avsnittet Innehåll och väljer Webbsidor.
Leta upp och öppna den sida du skapat tidigare på arbetsytan Sidor. Detta öppnar rotwebbsidan. Vi måste göra ändringarna på den relaterade lokaliserade innehållssidan.
Bläddra nedåt och markera webbsidan för lokaliserat innehåll i avsnittet Lokaliserat innehåll.

Kommentar

Om flera språk har etablerats måste du uppdatera varje lokaliserad sida.
Gå till avsnittet Diverse och välj den webblänksuppsättning som du vill visa i fältet Navigering.
Spara dina ändringar och gå tillbaka till designstudio.
Välj Förhandsgranskning och sedan Dator om du vill visa din anpassade sida med sidnavigeringen implementerad.

Dela via