Codeausschnitte des SharePoint-Entwurfs-Managers
Wichtig
Diese Erweiterbarkeitsoption ist nur für klassische SharePoint-Oberflächen verfügbar. Sie können diese Option nicht mit modernen Benutzeroberflächen in SharePoint Online, wie z. B. mit Kommunikationswebsites, verwenden. Wir empfehlen nicht mehr, die klassische Benutzeroberfläche oder diese Brandingmethoden zu verwenden.
Ein Codeausschnitt ist eine HTML-Darstellung einer SharePoint-Komponente oder eines SharePoint-Steuerelements, z. B. einer Navigationsleiste oder eines Webparts. Mithilfe des Codeausschnittkatalogs im Entwurfs-Manager können Sie Ihrer HTML-Gestaltungsvorlage oder dem Seitenlayout schnell SharePoint-Funktionen hinzufügen.
Einführung in Codeausschnitte und den Codeausschnittkatalog
Nachdem Sie eine Gestaltungsvorlage konvertiert oder ein Seitenlayout erstellt haben, verfügen Sie über eine HTML-Version der betreffenden Seite. Über den Codeausschnittkatalog können Sie der HTML-Datei, die der Gestaltungsvorlage oder dem Seitenlayout zugeordnet ist, schnell bestimmte SharePoint-Funktionen, wie Such-, Navigations- oder Gerätekanalbereiche hinzufügen. Der Codeausschnittkatalog ist eine Seite im Entwurfs-Manager, auf der Sie folgende Möglichkeiten haben:
Auswählen einer SharePoint-Komponente aus den im Menüband verfügbaren Komponenten
Konfigurieren der Eigenschaften für diese Komponente
Kopieren des HTML-Codeausschnitts in die Zwischenablage, damit Sie den Codeausschnitt an der gewünschten Stelle in der HTML-Datei einfügen können
Der Codeausschnittkatalog zeigt verschiedene Optionen auf dem Menüband an, je nachdem, ob Sie eine Gestaltungsvorlage oder ein Seitenlayout bearbeiten. Beispielsweise werden Navigationssteuerelemente nur für Gestaltungsvorlagen und Webpartzonen und Seitenfeldsteuerelemente nur für Seitenlayouts angezeigt. Außerdem hängen beim Bearbeiten eines Seitenlayouts die verfügbaren Seitenfelder vom Inhaltstyp des Zuschnitts ab, das Sie bearbeiten.
Nachdem Sie einen Codeausschnitt in Ihre HTML-Datei eingefügt haben, erhalten Sie eine Entwurfszeitvorschau aus dem html-Code, der im Codeausschnitt bereitgestellt wird. Sie können auch die serverseitige Vorschau im Entwurfs-Manager verwenden, um zu sehen, wie das Steuerelement auf der Livewebsite angezeigt wird. Die Entwurfszeitvorschau kann statische Beispieldaten enthalten, aber die serverseitige Vorschau verwendet Livedaten, sofern verfügbar. Beispielsweise zeigt ein Navigationssteuerelement, das Navigationslinks aus einem Ausdruckssatz zeichnet, diese Begriffe dynamisch in der serverseitigen Vorschau an, aber die Entwurfszeitvorschau enthält eine statische Momentaufnahme der Begriffe zum Zeitpunkt der Erstellung des Codeausschnitts. Livedaten sind in der serverseitigen Vorschau für einige Codeausschnitte, einschließlich vieler Webparts, jedoch nicht verfügbar. In diesem Fall kann die serverseitige Vorschau vorschau nicht verfügbar sein.
Hinweis
Ein Codeausschnitt enthält HTML-Markup, das Ihnen eine Entwurfszeitvorschau in Ihrem HTML-Editor bietet, aber das HTML-Markup, das in den Kommentaren "Startvorschau" und "Endvorschau" enthalten ist, sollte nicht bearbeitet werden, da es sich nur auf die Entwurfszeitvorschau auswirkt und nicht darauf, wie SharePoint diesen Codeausschnitt letztendlich rendert. Um Ihren Codeausschnitt zu formatieren, müssen Sie stattdessen in der Regel die SharePoint-Standardstile identifizieren und überschreiben, die auf den Codeausschnitt angewendet werden.
Einfügen eines Codeausschnitts aus dem Codeausschnittkatalog
Der Codeausschnittkatalog zeigt je nach der Datei, die Sie bearbeiten, verschiedene Optionen an. Für unterschiedliche Seitenlayouts stehen beispielsweise unterschiedliche Sätze von Seitenfeldern zur Verfügung. Aus diesem Grund müssen Sie zunächst eine Gestaltungsvorlage oder ein Seitenlayout auswählen, um zum Codeausschnittkatalog zu navigieren.
So fügen Sie einen Codeausschnitt ein
Wechseln Sie zu Ihrer Veröffentlichungswebsite.
Wählen Sie in der rechten oberen Ecke der Seite das Zahnradsymbol für Einstellungen und dann Entwurfs-Manager aus.
Wählen Sie im Entwurfs-Manager im linken Navigationsbereich Gestaltungsvorlagen bearbeiten oder Seitenlayouts bearbeiten aus, je nachdem, welchen Dateityp Sie bearbeiten.
Wählen Sie den Namen der Gestaltungsvorlage oder des Seitenlayouts aus, der bzw. dem Sie Codeausschnitte hinzufügen möchten.
Wählen Sie zum Öffnen des Codeausschnittkatalogs in der serverseitigen Vorschau in der rechten oberen Ecke Codeausschnitte aus.
Wählen Sie im Menüband auf der Registerkarte Entwurf den Codeausschnitt aus, den Sie der Seite hinzufügen möchten.
Wenn Sie einen Codeausschnitt auswählen, wird der Codeausschnittkatalog aktualisiert. Auf der Seite werden dann die für den Codeausschnitt verfügbaren Eigenschaften sowie der HTML-Codeausschnitt, den Sie in die HTML-Gestaltungsvorlage oder das Seitenlayout kopieren können, angezeigt.
Hinweis
Die Vorschau des Codeausschnittkatalogs ist veraltet und zeigt beim Aktualisieren keine Vorschau des ausgewählten Ausschnitts an.
Klicken Sie auf der rechten Seite des Codeausschnittkatalogs unter Infos zu dieser Komponente auf Abschnittsüberschriften, oder wählen Sie diese aus, um Gruppen von Eigenschaften zu erweitern oder zu reduzieren und anschließend alle gewünschten benutzerdefinierten Eigenschaften zu konfigurieren.
Die Eigenschaften, die für den Hauptzweck des Codeausschnitts am wichtigsten sind, werden im obersten Abschnitt mit der Bezeichnung "Wichtig" angezeigt. Dies sind die wesentlichen Eigenschaften, die Sie verstehen müssen, wenn Sie Codeausschnitte verwenden.
Hinweis
Wenn das Eigenschaftenraster über eine Kopfzeile verfügt, die mit AjaxDelta endet, sollten Sie diese Eigenschaften ignorieren, da sie für die Steuerelemente im Zusammenhang mit der minimalen Downloadstrategie gelten, die für Gestaltungsvorlagen und Seitenlayouts, die über den Entwurfs-Manager erstellt werden, deaktiviert ist.
Nachdem Sie Eigenschaften konfiguriert haben, wählen Sie Aktualisieren. Dadurch wird der HTML-Codeausschnitt links auf der Seite aktualisiert, sodass das Markup Ihre benutzerdefinierten Einstellungen widerspiegelt. Sie können stets Zurücksetzen wählen, um alle Eigenschaften auf ihre Standardeinstellungen zurückzusetzen.
Wählen Sie auf der linken Seite des Codeausschnittkatalogs unter HTML-Code die Option In Zwischenablage kopieren aus.
Öffnen Sie im HTML-Editor das zugeordnete Netzlaufwerk auf dem Computer, und öffnen Sie dann die HTML-Datei für die Gestaltungsvorlage oder das Seitenlayout, der bzw. dem Sie den Codeausschnitt hinzufügen.
Fügen Sie den Codeausschnitt in der HTML-Datei an der Stelle ein, an der das Markup angezeigt werden soll.
Jeder Codeausschnitt enthält HTML-Code, der eine visuelle Vorschau der Komponente und der Beispieldaten zur Verfügung stellt. Sie sollten diesen HTML-Code nicht für die schreibgeschützte Vorschau innerhalb der <!--PS> - und <!--PE-Tags> ändern, da dieses Markup nur die Entwurfszeitvorschau des Ausschnitts und nicht die Darstellung des Codeausschnitts auf der Livewebsite beeinflusst.
Um die serverseitige Vorschau des Codeausschnitts anzuzeigen, speichern Sie die HTML-Datei, um die Änderungen mit der zugeordneten Datei ASP.NET zu synchronisieren. Aktualisieren Sie dann die serverseitige Vorschau im Entwurfs-Manager.
Anders als bei der Vorschau zur Entwurfszeit wird das Steuerelement in der serverseitigen Vorschau so angezeigt, wie es von SharePoint gerendert wird.
Überblick über das Markup eines HTML-Codeausschnitts
Ein Codeausschnitt enthält vier Basisabschnitte:
Header mit Start
und <!--CS-Tags> (außer benutzerdefinierten ASP.NET-Codeausschnitten, die nicht in einemTag)SharePoint-Markup , in dem Codeausschnitte in <!--MS-Start> - und <!--ME-Endtags> eingeschlossen sind
HTML-Vorschau , die in <!--PS-Start> - und <!--PE-Endtags> eingeschlossen ist
Fußzeile mit schließenden< !--CE> und Schilder
Alle Abschnitte eines Codeausschnitts, mit Ausnahme der HTML-Vorschau, sind in HTML-Kommentare eingeschlossen, um Interaktionen mit dem Dokumentobjektmodell (Document Object Model, DOM) und vorhandenen Formatierungen zu vermeiden. Ein Codeausschnitt beginnt mit dem Namen einer Komponente und enthält dann das eigentliche ASP.NET-Markup, eine HTML-Vorschau zum Rendern zur Entwurfszeit sowie die Endtags. Das ASP.NET-Markup ist auskommentiert, doch SharePoint entfernt die Kommentartags und verwendet dieses Markup, wenn die HTML-Datei mit der MASTER-Datei oder der ASPX-Datei synchronisiert wird. Wenn Sie ASP.NET kennen, können Sie dieses Markup im Codeausschnitt anpassen.
Als Beispiel ist nachfolgend das Standardmarkup für einen Bearbeitungsmodusbereich darstellt. Dabei handelt es sich einfach um einen Container, der unter bestimmten Bedingungen andere Inhalte und Steuerelemente anzeigt.
Kopfzeile
<div data-name="EditModePanelShowInEdit">
<!--CS: Start Edit Mode Panel Snippet-->
SharePoint-Markup
<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->
HTML-Vorschau
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
You should replace this div with content that renders based on your Edit Mode Panel Properties.
</div>
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
Fußzeile
<!--ME:</Publishing:EditModePanel>-->
<!--CE: End Edit Mode Panel Snippet-->
</div>
Nachfolgend finden Sie das Standardmarkup für einen Codeausschnitt für die obere Navigationsleiste. Dies ist komplexer, da dieser Codeausschnitt verschiedene Steuerelemente enthält, von denen einige ineinander geschachtelt sind, einschließlich einer Datenquelle für die Navigationsausdrücke, einem Stellvertretungs-Steuerelement und einem Inhaltsplatzhalter.
Hinweis
Einige der Steuerelemente, wie beispielsweise der Inhaltsplatzhalter, enthalten leere Tags für eine HTML-Vorschau, da das Element keine visuelle Darstellung auf der Seite benötigt.
Kopfzeile
<div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet--> <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->
SharePoint-Markup
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" runat="server">-->
HTML-Vorschau
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
SharePoint-Markup
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
HTML-Vorschau
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<span style="display:none">
<table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow">
<tr><td nowrap="nowrap">
<span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span>
<!--PE: End of READ-ONLY PREVIEW-->
SharePoint-Markup
<!--MS:<Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
SharePoint-Markup
<!--ME:</asp:SiteMapDataSource>-->
<!--ME:</Template_Controls>-->
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>
SharePoint-Markup
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
<!--MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="false" MaximumDynamicDisplayLevels="0" SkipLinkText="">-->
HTML-Vorschau
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" />
<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
<ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div>
<!--PE: End of READ-ONLY PREVIEW-->
SharePoint-Markup
<!--ME:</SharePoint:AspMenu>-->
<!--ME:</asp:ContentPlaceHolder>-->
HTML-Vorschau
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
SharePoint-Markup
<!--ME:</SharePoint:AjaxDelta>-->
Fußzeile
<!--CE: End Top Navigation Snippet-->
</div>
Arten von Markup
Es folgt eine Übersicht über die Arten von Markup, die in einem Codeausschnitt enthalten sind.
Registrierung eines SharePoint-Namespace SPM ("SharePoint-Markup") gibt eine Zeile zur Registrierung eines SharePoint-Namespace an.
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
Kommentare CS und CE ("Kommentaranfang" und "Kommentarende") dienen zur Analyse der Markupzeilen.
<!--CS: Start Top Navigation Snippet-->
…
<!--CE: End Top Navigation Snippet-->
Codeausschnitte MS und ME ("Markupanfang" und "Markupende") bestimmen den Anfang und das Ende eines SharePoint-Steuerelements oder -Codeausschnitts. Einige Codeausschnitte, wie das Menüband oder das obige Steuerelement für die obere Navigationsleiste, enthalten verschiedene Steuerelemente, die in einem einzelnen Codeausschnitt geschachtelt sind.
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
…
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>
<!--MS:<Template_Controls>-->
…
<!--ME:</Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
…
<!--ME:</asp:SiteMapDataSource>-->
Vorschaublöcke PS und PE ("Vorschauanfang" und "Vorschauende") umgeben einen HTML-Codeabschnitt, den Sie nicht bearbeiten sollten. Diese Vorschauabschnitte sind eine Momentaufnahme des SharePoint-Steuerelements, das der Codeausschnitt einfügt. Eine Vorschau ermöglicht es Ihnen, in einem clientseitigen HTML-Editor effektiver an der HTML-Datei zu arbeiten. Wenn Sie jedoch den Inhalt oder das Format in dieser Vorschau ändern, hat dies keine dauerhaften Auswirkung auf die .master-Datei, die SharePoint letztendlich verwendet. Um einen Ausschnitt zu formatieren, müssen Sie die SharePoint-Formatvorlagen ermitteln und mit Ihren eigenen benutzerdefinierten CSS-Formatvorlagen überschreiben.
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span style="display:none"><table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-ONLY PREVIEW-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div><!--PE: End of READ-ONLY PREVIEW-->