Skapa en anpassad sidmall

Artikel
03/15/2023

Anteckning

Från och med den 12 oktober 2022 byter Power Apps-portaler namn till Power Pages. Mer information: Microsoft Power Pages är nu allmänt tillgänglig (blogg)
Vi kommer snart migrera och sammanfoga dokumentationen för Power Apps-portaler med Power Pages-dokumentationen.

I det här exemplet skapar vi en anpassad sidmall genom att använda Liquid och en sidmall som baseras på en webbmall. Mer information: Lagra källinnehåll med hjälp av webbmallar. Vårt mål är att skapa en enkel mall med två kolumner som använder en uppsättning med webblänkar som vänster sidnavigering med sidans innehåll till höger.

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

Först skapar vi vår Webbmall och skriver vår Preliminära 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:

Enkolumnslayout för webbmall.

Tips

Läs mer om ärvda mallar med block- och utökade taggar: Malltaggar

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>

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

Använd webblänkinställningarna för navigering som är associerade med aktuell sida för våra navigeringslänkar för att skapa en ny webbmall som utökar vår grundläggande layoutmall.

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

Tips

Bekanta dig med hur du läser in webblänkuppsättningar med hjälp av webblänkar-objektet.

Webblänkar vänster navigering (webbmall)

{% 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 class=page-copy>
    {{ page.adx_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.

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

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

Skapa en webbsida som använder vår sidmall.
Gå till webbsidan för lokaliserat innehåll.
Gå till avsnittet Diverse och välj den webblänksuppsättning som du vill visa i fältet Navigering.
När du nu visar sidan ska du se sidnavigering.