Vorherige

Nächste

Übung – Seitennavigation erstellen

Abgeschlossen

Der Zweck dieser Übungseinheit besteht darin, ein Webseitenlayout einzurichten und anderen Webseiten und externen Links eine Seitenmenünavigation hinzuzufügen.

Lernziele

Das Ziel dieser Übungen ist, dass Sie Folgendes lernen:

• Identifizieren und ändern Sie die sekundäre Websitenavigation.

• Verwenden Sie die App „Portalverwaltung“, um einem vorhandenen Weblinksatz neue Weblinks hinzuzufügen.

• Erstellen Sie mit Power Pages-Designstudio eine Webseite mit einem eingebetteten Navigationsmenü.

Voraussetzungen

Für diese Übung müssen Sie die folgenden Parameter in Ihrer Umgebung festlegen:

• Eine bereitgestellte Power Pages-Website Wenn Ihnen keine Website zur Verfügung steht, folgen Sie den Anweisungen Eine Seite mit Power Pages erstellen.
• Zugriff auf das Power Pages-Designstudio

Hinweis

Bei dieser Übung wird vorausgesetzt, dass eine der Starter-Layout-Website-Vorlagen zur Bereitstellung der Website verwendet wurde, aber jede Starter-Vorlage mit mehreren Seiten funktioniert.

Szenario

Ihre Organisation hat eine Power Pages-Website bereitgestellt und eingerichtet. Sie möchten die Websitenavigation ändern, um einen schnellen Zugriff auf häufig verwendete Informationen zu ermöglichen.

Sie müssen die folgenden Aufgaben ausführen, um die Websitenavigation an die organisatorischen Anforderungen anpassen zu können:

• Ändern Sie den vorhandenen Weblinksatz Sekundäre Navigation mit der Verwaltungsportal-App, um vorhandene Webseiten und einen externen Link einzuschließen.

• Erstellen Sie eine neue Seite, indem Sie das Power Pages-Designstudio verwenden.

• Fügen Sie der neuen Seite eine zweispaltige Komponente hinzu.

• Ändern Sie den Seitenquellcode, um auf die sekundäre Navigation zu verweisen.

Weblinksatz aktualisieren

Führen Sie die folgenden Schritte aus, um den Weblinksatz zu aktualisieren:

1. Melden Sie sich bei Power Pages an.

2. Wählen Sie in der oberen rechten Ecke die richtige Umgebung aus.

3. Wählen das Menü mit den vertikalen Auslassungspunkten (...) für die Website und Portalverwaltung aus. Schließen Sie das Power Pages-Startfenster nicht.

4. Suchen Sie die Zeilen der Weblinksätze.

5. Wählen und öffnen Sie die Zeile Weblinksätze mit dem Namen Sekundäre Navigation.

6. Wenn die Zeile nicht vorhanden ist, wählen Sie + Neu aus, um eine neue Zeile mit dem Namen Sekundäre Navigation zu erstellen.

   

7. Wählen Sie die Registerkarte Links aus.

8. Wählen Sie die Schaltfläche Neuer Weblinksatz aus.

9. Geben Sie die folgenden Informationen ein:

   • Name – Produkt A

   • Weblinksatz – Sekundäre Navigation (die bereits ausgewählt sein sollte)

   • Veröffentlichungsstatus – Veröffentlicht

   • Seite – Unterseite 1

   Hinweis

   In dieser Übung wird davon ausgegangen, dass eine leere Starterlayout-Website-Vorlage zum Bereitstellen der Website verwendet wurde. Wenn eine andere Vorlage verwendet wurde, verfügt Ihre Website möglicherweise nicht über die Seite Unterseite 1. Sie können eine beliebige Seite Ihrer Wahl auswählen, um den Link zu erstellen.

10. Wählen Sie Speichern und schließen aus.

    

11. Wählen Sie die Schaltfläche Neuer Weblinksatz erneut aus.

12. Geben Sie die folgenden Informationen ein:

    • Name – Produkt B

    • Weblinksatz – Sekundäre Navigation (die bereits ausgewählt sein sollte)

    • Veröffentlichungsstatus – Veröffentlicht

    • Seite – Unterseite 2

13. Wählen Sie Speichern und schließen aus.

14. Wählen Sie die Schaltfläche Neuer Weblinksatz erneut aus.

15. Geben Sie die folgenden Informationen ein:

    • Name: – Microsoft

    • Weblinksatz – Sekundäre Navigation (die bereits ausgewählt sein sollte)

    • Veröffentlichungsstatus – Veröffentlicht

    • Externe URL - https://www.microsoft.com

16. Wählen Sie Speichern und schließen aus.

Webseite erstellen

Führen Sie die folgenden Schritte aus, um die Webseite zu erstellen:

1. Wechseln Sie zum Fenster Power Pages-Startseite.

2. Klicken Sie auf Bearbeiten, um das Power Pages-Designstudio zu öffnen.

3. Wählen Sie den Arbeitsbereich Seiten aus, und klicken Sie dann auf + Seite.

4. Führen Sie im Dialogfeld Neue Seite die folgenden Aktionen aus:

   1. Geben Sie als SeitennameProduktlinks ein.

   2. Wählen Sie das Layout Leer starten aus.

   3. Klicken Sie auf Hinzufügen.

Eine Spaltenkomponente und Navigation hinzufügen

Führen Sie die folgenden Schritte aus, um eine Spaltenkomponente und eine Navigation hinzuzufügen:

1. Wählen Sie Code bearbeiten aus, um den Visual Studio Code-Editor zu starten.

2. Suchen Sie im Code-Editor das innerste <div>-Element.

3. Fügen Sie der Zeile das Liquid-Tag {% include "weblink_list_group" weblink_set_name: "Secondary Navigation" %} hinzu, sodass sie wie im folgenden Beispiel angezeigt wird:

   <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;">
     {% include "Weblink List Group" weblink_set_name: "Secondary Navigation" %}
   </div>
   

4. Schließen Sie die Registerkarte Visual Studio Code. Wählen Sie Speichern aus, wenn Sie dazu aufgefordert werden.

5. Wählen Sie die Option Synchronisieren aus, um die Änderungen zu synchronisieren.

6. Wählen Sie Vorschau > Desktop aus. Es sollte eine Seite mit Links zu den Webseiten und der externen URL angezeigt werden.

   

Hinweis

Viele Webseitekomponenten wie Listen und Formulare werden durch Liquid-Tags dargestellt. In dieser Übung verweist das Tag einschließen auf die Webvorlage namens Weblink-Listengruppe, die beschreibt, wie die sekundäre Navigation gerendert werden soll. Weitere Informationen finden Sie unter Liquid-Übersicht.

Weiter