Webvorlagen erstellen

12 Minuten

Um benutzerdefinierte Seitenvorlagen zu erstellen, können Sie die Zeile Webvorlage verwenden, bei der es sich im Grunde um eine Layoutvorlage handelt. Wenn eine Vorlage des Typs „Webvorlage“ beispielsweise statischen HTML-Code enthält, wird dieser HTML-Code in der Seitenausgabe, die diese Vorlage verwendet, „unverändert“ wiedergegeben. Die eigentliche Stärke von Webvorlagen beruht darauf, dass sie Liquid-Code enthalten können, der dem statischen Inhalt Verarbeitungsfunktionen hinzufügt, einschließlich des Zugriffs auf Dataverse-Daten.

Die Webvorlage ist eine einfache Tabelle, die die folgenden Spalten aufweist:

Name – Wenn eine Vorlage in anderen Inhalten enthalten ist oder durch andere Vorlagen erweitert wird, gilt für sie dieser Name.
Webseite – Websitezeile, in der die Vorlage verwendet wird.
Quelle – Der Quellinhalt der Vorlage Dabei kann es sich um statischen Text, ein HTML-Fragment oder, was am häufigsten der Fall ist, um ein Liquid-Layout handeln.
MIME-Typ – Definiert, welchen MIME-Typ (Multipurpose Internet Mail Extensions) der Server beim Rendern der Vorlage an den Client sendet. Wenn kein Wert angegeben ist, wird angenommen, das der Wert text/html ist, ein Standardtyp für HTML-Seiten. Sie können eine Webvorlage erstellen, mit der spezielle Inhalte gerendert werden. Beispielsweise können Sie eine Webvorlage erstellen, die einige Microsoft Dataverse-Daten im json-Format zurückgibt. In diesem Fall wird der MIME-Typ auf application/json festgelegt.

Webvorlagenverwaltung

Die Liquid-Implementierung in Power Pages-Websites enthält viele Vorlagen-Tags, die die Verwaltungen der Vorlagen erleichtern und die Wiederverwendbarkeit fördern.

FetchXML-Tag

Der fetchxml-Tag ermöglicht Benutzern, Daten von Dataverse abzufragen und rendert die Ergebnisse auf einer Seite.

{% fetchxml varResults %}
<!— Fetchxml query -->
<fetch>
  <entity name="account">
    <attribute name="name" />
  </entity>
</fetch>
{% endfetchxml %}

Die varResults-Variable enthält die Ergebnisse der Abfrage.

{% for account in varResults.results.entities %} 
  <p>{{ account.name }}</p>
{% endfor %}

Wichtig

Tabellenberechtigungen werden immer auf die Daten angewendet, die mit Liquid einschließlich des fetchxml-Tags abgerufen werden.

Tag „comment“

Mit dem Tag comment werden Inhalte innerhalb des Blocks nicht gerendert, und der Liquid-Code darin wird nicht ausgeführt. Dieser Tag ist nützlich, um erweiterte Kommentare in komplexe Vorlagen aufzunehmen und um Codeblöcke bei der Problembehandlung vorübergehend auszukommentieren.

This is a {% comment %}very useful {% endcomment %}comment.

Die vorhergehende Logik erzeugt das folgende Ergebnis:

Dies ist ein Kommentar.

Raw-Tag

Der raw-Tag ermöglicht die Ausgabe von Liquid-Code auf einer Seite, ohne dass diese analysiert und implementiert wird. Dieser Tag ist nützlich, um Inhalte zu generieren, die eine widersprüchliche clientseitige Syntax verwenden, z. B. Handlebars. Dies ist auch hilfreich, wenn der Seiteninhalt Fragmente von Liquid-Code enthalten muss, z. B. einen Wissensdatenbankartikel, der die Verwendung der Liquid-Sprache erläutert und Beispiele enthält.

Hello, {% raw %}{{ user.fullname }}.{% endraw %} Nice to meet you.

Die vorhergehende Logik erzeugt das folgende Ergebnis:

Hallo {{ user.fullname }}. Schön, Sie kennenzulernen.

Beachten Sie, dass user.fullname explizit ausgegeben wird, statt als Liquid-Anweisung verarbeitet und in den tatsächlichen Benutzernamen konvertiert zu werden.

Include-Tag

Der include-Tag schließt den Inhalt einer Vorlage in eine andere ein, nach Name. Dieser Tag ermöglicht die Wiederverwendung gemeinsamer Vorlagenfragmente an mehreren Stellen, z. B. beim Rendern von Links zu sozialen Medien. Die enthaltene Vorlage hat Zugriff auf Variablen, die in der übergeordneten Vorlage definiert sind, und es ist möglich, Parameter zu übergeben.

{% include 'Breadcrumbs', separator: '>' %}

Diese Logik schließt die von der Vorlage Breadcrumbs generierte Ausgabe ein, bei der die Variable separator auf das Symbol mit der rechtwinkligen Klammer > festgelegt ist.

Block-Tag

Mit dem block-Tag können Sie einen Block innerhalb einer Vorlage definieren. Dies definiert einen Bereich, der optional durch die Vorlagen überschrieben werden kann, die die aktuelle Vorlage erweitern.

Extend-Tag

Bei Verwendung mit dem block-Tag stellt der extend-Tag die Vorlagenvererbung bereit. Dieser Tag ermöglicht es mehreren Vorlagen ein gemeinsames Layout zu verwenden und bestimmte Bereiche des übergeordneten Layouts zu überschreiben. Wenn extend verwendet wird, muss es der erste Inhalt in der Vorlage sein und kann nur von einem oder mehreren block-Tags gefolgt werden.

Basisvorlage

Die Basisvorlagenlogik lautet wie folgt:

<div>
Hello
{% block content %}default content{% endblock %}
</div>

Untergeordnete Vorlage

Die untergeordnete Vorlagenlogik lautet wie folgt:

{% extends 'Base Template' %}
{% block content %}Power Pages websites{% endblock%}

Die untergeordnete Vorlage generiert die folgende Ausgabe:

<div>
  Hello
  Power Pages websites
</div>

Die Tags extend und block dienen typischerweise zum Trennen von Layout‑ und Inhaltsvorlagen. Übergeordnete Vorlagen bzw. Basisvorlagen definieren normalerweise ein breites Seitenlayout, z. B. wenn es sich um eine einspaltige oder zweispaltige Seite handelt. Untergeordnete Vorlagen, die die Basisvorlage erweitern, können nur den Inhalt der Blöcke definieren, wie von der übergeordneten Vorlage angegeben.

Ein umfassendes Liquid-Codebeispiel, das die Vorlagenvererbung mit den Tags block/extend und include zeigt, finden Sie unter Benutzerdefinierte Seitenlayouts in Power Pages.

Best Practices für Webvorlagen

Folgen Sie diesen Anweisungen, um die Vorlagenstruktur zu verbessern und die Verwaltung der Webvorlagen zu vereinfachen:

Wählen Sie beschreibende Namen für Ihre Vorlagen, da diese referenziert oder als Teil anderer Vorlagen enthalten sind.
Teilen Sie das Seitenlayout auf: Trennen Sie das Layout vom Inhalt. Diese Layouts sind gute Ausgangspunkte für erweiterbare Vorlagen.
Achten Sie auf wiederholbare und wiederverwendbare Fragmente – diese können als Untervorlagen definiert werden und den Tag include verwenden.
Mit dem Tag include können Sie nicht nur das Layout, sondern auch häufig verwendete JavaScript-Fragmente wiederverwenden. Mit Parametern im Tag include können Sie Ihre JavaScript-Vorlagen intelligent gestalten. Diese Fragmente werden inline eingefügt.
Verschieben Sie größere wiederverwendbare JavaScript-Blöcke zu separaten Dateien, und fügen Sie sie stattdessen als Verweis ein. Der Client-Browser lädt sie separat, und sie können zwischengespeichert werden. Darüber hinaus können Sie extern geladene Skripte minimieren, was zu einer besseren Leistung führt.
Ermitteln Sie die Teile der Seite, die für die mehrsprachige Implementierung übersetzt werden müssen. Definieren Sie diese Seiten als Seiteninhalt oder als Inhaltsausschnitte.
Identifizieren Sie bearbeitbare Fragmente. Bestimmen Sie, in welchen Teilen der Webseite Benutzer für die Verwaltung und Wartung von Inhalten verantwortlich sein sollen.
Seien Sie beim Erstellen einer Vorlage großzügig, was das Layout betrifft, vermeiden Sie jedoch übermäßig viele Leerzeilen, indem Sie beispielsweise Bindestriche in Ihren Tags verwenden.
```
{%- if username -%}
  Hello, {{ user.firstname}}
{%- endif -%}
```
Verwenden Sie den Tag comments, um komplexe Teile der Vorlage zu beschreiben.
Sehen Sie sich Vorlagen an, die bereits mit dem Starterportal bereitgestellt wurden, und suchen Sie unter Benutzerdefinierte Seitenlayouts in Power Pages nach Liquid-Methoden.

Beim Bereitstellen eines Starterportals stehen Ihnen eine Reihe installierter gebrauchsfertiger Liquid-Vorlagen zur Verfügung: Integrierte Webvorlagen. Ihre Namen sind fest, und einige dieser Vorlagen sind möglicherweise nicht für die Bearbeitung verfügbar.

Weitere Informationen finden Sie unter Liquid-Übersicht.