Oprette en brugerdefineret sideskabelon

Artikel
03/16/2023

Bemærk

Fra 12. oktober 2022 bliver Power Apps-portaler til Power Pages. Flere oplysninger: Microsoft Power Pages er nu generelt tilgængelig (blog)
Vi overfører og fletter snart dokumentationen til Power Apps-portalerne med Power Pages-dokumentationen.

I dette eksempel skal vi oprette en brugerdefineret sideskabelon ved hjælp af Liquid og en sideskabelon, der er baseret på en webstedsskabelon. Flere oplysninger: Gemme kildeindhold ved hjælp af webskabeloner. Vores mål er at bygge en simpel to kolonner-skabelon, der bruger et weblinksæt som venstre navigation, med sideindholdet til højre.

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 én kolonne:

Layout med én kolonne i webskabelon.

Tip

Læs om skabelonnedarvning ved hjælp af blokken og udvidede mærker: Skabelon-mærker

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>

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

Brug det sæt navigationsweblinks, der er knyttet til den aktuelle side for vores navigationslinks, til at oprette en ny webskabelon, der udvider vores grundlæggende layoutskabelon:

Layout for navigationsområde med weblinks til venstre i webskabelon.

Tip

Sæt dig i, hvordan du indlæse weblinksæt ved hjælp af weblinks-objektet.

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

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.

Layout for navigationsområde med weblinks til venstre i sideskabelon.

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

Opret en webside, der bruger sideskabelonen.
Gå til websiden med lokaliseret indhold.
Gå til sektionen Diverse, og vælg det weblinksæt, du vil have vist i navigationsfeltet.
Når du nu får vist siden, kan du nu se sidenavigation.