In meinem letzten Artikel habe ich dokumentiert, wie Sie eine Masterseite in SharePoint 2013 erstellen. Masterseiten definieren die globalen Chrome-Elemente Ihrer Website. In diesem Artikel wird erläutert, wie Sie benutzerdefinierte Seitenlayouts in SharePoint 2013 erstellen. Weitere Informationen zum SharePoint 2013-Seitenmodell finden Sie in diesem Microsoft-Artikel.
Planen Ihres Seitenlayouts
In diesem Beispiel erstellen wir einen Teil einer Seite auf unserer Website neu (www.navantis.com):
In unserem vorherigen Artikel haben wir eine Musterseite erstellt, die die Kopf-, Fuß- und globalen Stylesheets für diese Seite definiert. Jetzt werden wir ein Seitenlayout erstellen, das diesem Grundformat folgt. Der Inhalt wird dynamisch sein, so dass Sie so viele Seiten erstellen können, wie Sie möchten, basierend auf diesem Layout.
In unserem Seitenlayout definieren wir die folgenden Bereiche als „Feldsteuerelemente“. Wir werden sie alle in einem einzigen Inhaltscontainer erstellen und explizit auslegen, um unser Design widerzuspiegeln:
Der Breadcrumb oben links Wir können den Breadcrumb-Trail von SharePoint verwenden und das Newsletter-Abonnement in das Seitenlayout einbetten, da dies nicht explizit im Layout definiert werden soll.
Definieren Ihres Inhaltstyps
Bevor wir also die HTML-Arbeit erledigen, erstellen wir einen Inhaltstyp (eine Definition für Inhaltsfelder), der jedes dieser Felder für unsere Seite definiert. Basierend auf dem obigen Plan benötigen wir die folgenden Felder:
- LargeHeadline
- RightHandBlurb
- LeftLinkList
- LeftColumnTitle
- LeftColumnText
- RightColumnText
Jeweils , dies werden HTML-Steuerelemente sein. Mit SharePoint 2013 können Sie andere Inhaltstypen für diese Felder definieren, z. B. Bilder. Bilder in SharePoint 2013 können in bestimmten Dimensionen gerendert werden, und SharePoint 2013 rendert jedes Bild dynamisch in die angegebenen Dimensionen, um sicherzustellen, dass es gut in Ihr definiertes Layout passt.
Um einen Inhaltstyp zu erstellen, gehen Sie zu Websiteeinstellungen –> Websiteinhaltstypen (unter Webdesignergalerien). Wenn Sie sich die Inhaltstypen des Seitenlayouts ansehen, werden vorhandene für Artikel, Katalog, Startseite usw. angezeigt. Wir werden einen Inhaltstyp für unser Layout erstellen. Klicken Sie auf Erstellen und geben Sie einen Namen für Ihren neuen Inhaltstyp ein:
Unter Übergeordneter Inhaltstyp können Sie den übergeordneten Inhaltstyp auswählen, von dem Ihr Inhaltstyp erben soll. Wenn Sie sich die vorhandenen Seitenlayout-Inhaltstypen ansehen, erben sie von der Inhaltstypseite. Die Seite befindet sich in der Gruppe Inhaltstypen veröffentlichen. Sie können auch die Gruppe angeben, in der Sie Ihren neuen Inhaltstyp platzieren möchten – Sie können ihn der vorhandenen Gruppe Seitenlayout-Inhaltstypen hinzufügen oder eine eigene benutzerdefinierte Gruppe erstellen.
Wenn Sie Ihren neuen Inhaltstyp erstellt haben, zeigt SharePoint 2013 die Spalten an, die automatisch vom Seiteninhaltstyp geerbt wurden. Fügen wir einige neue hinzu, um unsere benutzerdefinierten Felder darzustellen. Klicken Sie auf die Spalte Von neuer Site hinzufügen und fügen Sie jedes Feld hinzu:
Für jede Spalte können wir den Typ angeben. Für die Felder, die wir explizit formatieren möchten, können wir die Option Einzelne Textzeile verwenden, um den Inhaltsautor in einfachen Text zu setzen, der von der Vorlage formatiert wird. Für die Felder, die wir dem Inhaltsautor mehr Kontrolle geben möchten, können wir das Feld als vollständigen HTML-Inhalt angeben, und der Inhaltsautor kann dann mit dem Rich-Text-Editor jeden HTML-Code einfügen. Verwenden wir für unsere Felder diesen Ansatz:
- LargeHeadline – Einzelne Textzeile
- RightHandBlurb – Mehrere Textzeilen
- LeftLinkList – Vollständiger HTML-Code
- LeftColumnTitle – Einzelne Textzeile
- LeftColumnText – Vollständiger HTML-Code
- RightColumnText – Vollständiger HTML-Code
Erstellen Sie für jedes Feld eine Websitespalte.
Jetzt haben wir Felder, um den Inhalt zu speichern, lassen Sie uns nun ein Seitenlayout erstellen.
Erstellen eines Seitenlayouts
Um ein Seitenlayout zu erstellen, gehen Sie zum Design Manager und klicken Sie auf 6. Seitenlayouts bearbeiten. Klicken Sie auf Seitenlayout erstellen. Geben Sie Ihrem Seitenlayout einen Namen, wählen Sie Ihre Masterseite und den Inhaltstyp aus, den Sie gerade erstellt haben.
Wenn Sie eine Vorschau Ihres Seitenlayouts anzeigen, werden Sie sehen, dass es nicht viel aussieht – wir müssen den HTML-Code um die Feldsteuerelemente herum aktualisieren, um das Layout richtig zu formatieren.
Veröffentlichen Ihres Seitenlayouts
Bevor Sie Ihr Seitenlayout verwenden können, muss es veröffentlicht werden. Um Ihr Seitenlayout zu veröffentlichen, gehen Sie zu Websiteeinstellungen –> Musterseiten und Seitenlayouts. Sie sehen zwei Dateien – eine ist HTML und eine ist ASPX. in SharePoint 2013 ist der HTML-Code jetzt der Master und Sie können ihn mit einem HTML-Editor bearbeiten. SharePoint 2013 generiert dann die ASPX-Datei automatisch. Um Ihr Layout zu veröffentlichen, klicken Sie auf die HTML-Datei und dann auf Veröffentlichen:
Dadurch werden sowohl die HTML- als auch die ASPX-Dateien veröffentlicht, sodass sie jetzt verfügbar sind, um eine Seite basierend auf Ihrem Layout zu erstellen.
Erstellen einer Seite
Um eine Seite basierend auf unserem neuen Layout zu erstellen, gehen Sie zu Neue Seite.
Wenn Sie dann zu Seite –> Seitenlayouts gehen, finden Sie unser neues Seitenlayout in der Liste der verfügbaren Seitenlayouts. Wenn Sie das Seitenlayout wechseln, sollten Sie jetzt alle Felder sehen, die wir zuvor in unserem Inhaltstyp erstellt haben.
Sie können Ihren Inhalt ausfüllen, indem Sie ihn entweder von Ihrer vorhandenen Website oder aus Office-Dokumenten wie Word eingeben oder kopieren und einfügen. Das Kopieren und Einfügen hat sich gegenüber früheren Versionen dramatisch verbessert!
Hier ist mein Inhalt jetzt ausgefüllt:
Jetzt können wir unsere Seite veröffentlichen…
Unser Inhalt ist da, aber das Layout spiegelt nicht wider, was wir want…so bearbeiten Sie nun den HTML-Code, um unser Layout zu aktualisieren.
Anpassen von Seitenlayouts
Seitenlayouts in SharePoint 2013 sind nur HTML-Dateien mit vielen zusätzlichen Markups, um anzugeben, wo die Steuerelemente eingefügt werden sollen. Wir können die HTML-Datei jetzt über den Design Manager anpassen. Sie können einfach eine Kopie der HTML-Datei abrufen, Ihre Änderungen vornehmen und Ihre Datei erneut hochladen, und SharePoint 2013 erledigt den Rest. Es gibt zwei Möglichkeiten, die Datei abzurufen:
- Gehen Sie zu Design Manager -> 3. Laden Sie Designdateien hoch und ordnen Sie ein Netzlaufwerk Ihrem Musterseitenverzeichnis zu.
- Gehen Sie zu Site-Einstellungen -> Masterseiten und Seitenlayouts und Sie können Ihre Datei herunterladen.
Nachdem wir einige Male mit dem Seitenlayout iteriert und die von SharePoint 2013 bereitgestellten Snippets an die entsprechenden Stellen verschoben haben, haben wir jetzt eine schön formatierte Seite:
Der gesamte Inhalt innerhalb der Hauptseite Bereich vollständig von SharePoint verwaltet wird, kann leicht von einem Content-Autor geändert werden.
Dieser Beitrag wurde geschrieben von Chris Woodill
Christopher Woodill ist der Vice President, Public Sector für Navantis. Mit über 15 Jahren Erfahrung in der Planung, Verwaltung und Umsetzung von Technologiestrategien sowohl im öffentlichen als auch im privaten Sektor ist Christopher für den Verkauf, die Strategie und die Bereitstellung von Lösungen im öffentlichen Sektor für unsere Kunden in den Bereichen Gesundheitswesen, Regierung, Kommunen und Bildung verantwortlich.
