Aktualisieren des Brandings von vorhandenen SharePoint-Websites und Seitenbereichen
Sie können das Branding auf Ihren vorhandenen SharePoint-Websites und -Websitesammlungen aktualisieren und Bereiche von SharePoint-Seiten anpassen. Dies kann beispielsweise beim Aktualisieren auf eine neue Version der Website hilfreich sein.
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.
Aktualisieren des Brandings von vorhandenen Websites und Unterwebsites
Das Branding.Refresh-Beispiel im Projekt Office 365 Developer Patterns and Practices auf GitHub zeigt Ihnen, wie Sie die OfficeDevPnP.Core-Bibliothek verwenden, um vorhandene Websites und Unterwebsites zu durchlaufen, um das angewendete Branding zu überprüfen und zu aktualisieren. Das Beispiel zeigt, wie das Websitebranding aktualisiert wird, das gleiche Konzept kann jedoch auch für andere Dinge verwendet werden, beispielsweise das Bereitstellen einer neuen Bibliothek in einer Liste von Websites, oder das Aktualisieren einer benutzerdefinierten Aktion, die während der Bereitstellung bereitgestellt wurde. Sie können den gleichen Prozess verwenden, um vorhandene Websites auf eine neue Version zu aktualisieren.
Der Vorgang umfasst zwei Schritte:
- Abrufen der Websites, die aktualisiert werden sollen.
- Aktualisieren Sie das Websitebranding.
Abrufen der Websites, die Sie aktualisieren möchten
Rufen Sie zunächst eine Liste von Websites und Unterwebsites ab, die Sie aktualisieren möchten. Das Beispiel zeigt, wie dies mithilfe der Suchfunktion funktioniert, es gibt jedoch auch andere Optionen, wie z. B. das Lesen aus einem Websiteverzeichnis oder das Bereitstellen einer Verwaltungsoberfläche, in der Administratoren die Liste angeben können. Das folgende Beispiel veranschaulicht die Verwendung der Suchfunktion, um die Liste zu generieren.
// Get a list of sites. Search is one way to get this list, an alternative can be a site directory.
List<SiteEntity> sites = cc.Web.SiteSearchScopedByUrl("https://bertonline.sharepoint.com");
// Generic settings (apply changes on all webs or just root web).
bool applyChangesToAllWebs = true;
// Optionally further refine the list of returned site collections.
var filteredSites = from p in sites
where p.Url.Contains("13003")
select p;
List<SiteEntity> sitesAndSubSites = new List<SiteEntity>();
if (applyChangesToAllWebs)
{
// You want to update all sites, so the list of sites is extended to all subsites.
foreach (SiteEntity site in filteredSites)
{
sitesAndSubSites.Add(new SiteEntity() { Url = site.Url,
Title = site.Title,
Template = site.Template });
GetSubSites(cc, site.Url, ref sitesAndSubSites);
}
sites = sitesAndSubSites;
}
Der Aufruf von GetSubSites ist rekursiv, sodass die Unterwebsitestruktur abgerufen wird. Überprüfen Sie nach dem Abrufen der Struktur, dass die zurückgegebene Anzahl korrekt ist, bevor Sie fortfahren.
Aktualisieren des Brandings
Nachdem Sie eine zu verarbeitende Website ausgewählt haben, können Sie OfficeDevPnP.Core-Methoden verwenden, um die Website zu bearbeiten. In dem Beispiel wird gezeigt, wie dies für das Websitebranding funktioniert, Sie können jedoch auch beliebige andere Änderungen auf die gleiche Weise verarbeiten.
Im Beispiel wird ein Muster verwendet, das den Webeigenschaftenbehälter verwendet, um Informationen zu den aktuellen Einstellungen zu speichern. Der Code liest zuerst die Werte des Webeigenschaftenbehälters und führt dann eine für jeden Wert passende Aktion aus.
// Verify that you have a property bag entry.
string themeName = cc.Web.GetPropertyBagValueString(BRANDING_THEME, "");
if (!String.IsNullOrEmpty(themeName))
{
// If no theme property bag entry, assume no theme has been applied.
if (themeName.Equals(currentThemeName, StringComparison.InvariantCultureIgnoreCase))
{
// The applied theme matches to the theme you want to update.
int? brandingVersion = cc.Web.GetPropertyBagValueInt(BRANDING_VERSION, 0);
if (brandingVersion < currentBrandingVersion)
{
DeployTheme(cc, currentThemeName);
// Set the web propertybag entries
cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
}
}
else
{
if (forceBranding)
{
DeployTheme(cc, currentThemeName);
// Set the web propertybag entries.
cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
}
}
}
Der Code, der dann das Design aktualisiert, ist simpel und basiert auf OfficeDevPnP.Core-Methoden.
string themeRoot = Path.Combine(AppRootPath, String.Format(@"Themes\{0}", themeName));
string spColorFile = Path.Combine(themeRoot, string.Format("{0}.spcolor", themeName));
string spFontFile = Path.Combine(themeRoot, string.Format("{0}.spfont", themeName));
string backgroundFile = Path.Combine(themeRoot, string.Format("{0}bg.jpg", themeName));
string logoFile = Path.Combine(themeRoot, string.Format("{0}logo.png", themeName));
if (IsThisASubSite(cc.Url))
{
// Retrieve the context of the root site of the site collection.
using (ClientContext ccParent = new ClientContext(GetRootSite(cc.Url)))
{
ccParent.Credentials = cc.Credentials;
cc.Web.DeployThemeToSubWeb(ccParent.Web, themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToSubWeb(ccParent.Web, themeName);
}
}
else
{
cc.Web.DeployThemeToWeb(themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToWeb(themeName);
}
Anpassen von Regionen einer SharePoint-Seite
Wenn Sie Bereiche einer SharePoint-Seite anpassen möchten, können Sie eine Kombination aus Remotebereitstellung und benutzerdefinierten Cascading Stylesheets (CSS) für Dateien verwenden, die Regionen der Seite zugeordnet sind. Zunächst müssen Sie dann wissen, welche SharePoint-Dateien den verschiedenen Regionen einer SharePoint-Seite zugeordnet sind.
Tabelle 1. SharePoint-Seitenbereiche und zugehörige Dateien
| Seitenbereich | Zugehörige Dateien | Weitere Informationen |
|---|---|---|
| Menüband | Sämtliche standardmäßigen Gestaltungsvorlagen. Entsprechendes CSS:
|
Kann über die Schaltfläche Fokus auf Inhalt ausgeblendet werden. |
| Suite-Navigation | Sämtliche standardmäßigen Gestaltungsvorlagen. | Kann über die Schaltfläche Fokus auf Inhalt ausgeblendet werden. |
| Suite-Links | Kann über die Schaltfläche Fokus auf Inhalt ausgeblendet werden. | |
| Willkommensmenü | *. master | Kann über die Schaltfläche Fokus auf Inhalt ausgeblendet werden. |
| Einstellungsmenü oder Zahnrad | *. master | |
| Hilfe | *. master | |
| Kontextbezogene Registerkarten des Menübands | Sämtliche standardmäßigen Gestaltungsvorlagen. | Beispiele finden Sie hier: |
| Symbolleiste für den Schnellzugriff | *. master | Kann über die Schaltfläche Fokus auf Inhalt ausgeblendet werden. |
| Websitelogo | *. master Entsprechende CSS: .ms-sitelcon-img |
|
| Obere Navigation | Navigations-CSOM/JSOM *. master Entsprechendes CSS (nicht im Bearbeitungsmodus):
|
|
| Seitentitel | Entsprechendes CSS (nicht im Bearbeitungsmodus):
|
|
| Suchfeld | Nav CSOM/JSOM *.master Entsprechende CSS:
|
|
| Linke Navigation | Nav CSOM/JSOM *.master | Weitere Informationen finden Sie unter: |
| Strukturansicht | *. master | Weitere Informationen finden Sie unter Anpassen des integrierten Treeview-Navigators. |
| Seiteninhalt | Seitenlayout/Inhaltsseiten Webpartzone/WebpartsKorrespondieren von CSS (Webpartzone und Webpart):
|
Weitere Informationen finden Sie unter Erstellen eines Seitenlayouts in SharePoint. |
Beispiele zum Anpassen von Bereichen einer Seite finden Sie im projekt Office 365 Developer Patterns and Practices auf GitHub:
Erforderliche "minimale" Inhaltsplatzhalter auf Standardmäßigen SharePoint-master-Seiten
Sharepoint. master Seiten erfordern, dass Sie Inhaltsplatzhalter verwenden, die die grundlegenden Inhalte und Strukturelemente rendern, die eine SharePoint-Seite benötigt, um den Seitenlebenszyklus zu unterstützen. In Tabelle 2 enthält und beschreibt die Inhaltsplatzhalter.
Tabelle 2. Mindestens erforderliche Inhaltsplatzhalter für eine SharePoint-master-Seite
| Inhaltsplatzhalter | Enthält Inhalt für |
|---|---|
| PlaceHolderAdditionalPageHead | Zusätzliche Elemente im \<head\> Abschnitt einer Seite. |
| PlaceHolderBodyAreaClass | Zusätzliche Formatvorlagen in der Kopfzeile der Seite. |
| PlaceHolderBodyLeftBorder | Das Element am linken Rand für den Textkörper der Seite. |
| PlaceHolderBodyRightBorder | Das Element am rechten Rand für den Textkörper der Seite. |
| PlaceHolderCalendarNavigator | Eine Datumsauswahl für die Navigation im Kalender, wenn ein Kalender auf einer Seite angezeigt wird. |
| PlaceHolderFormDigest | Die Sicherheitskontrolle "Formulardigest". |
| PlaceHolderGlobalNavigation | Globales Navigations-Breadcrumb (obere Navigation). |
| PlaceHolderGlobalNavigationSiteMap | Die Siteübersicht in der globalen Navigation (obere Navigationsleiste). |
| PlaceHolderHorizontalNav | Oberes Navigationsmenü für eine Seite (obere Navigation). |
| PlaceHolderLeftActions | Navigationsbereich unten links (linke Navigation). |
| PlaceHolderLeftNavBar | Linker Navigationsbereich (linke Navigation). |
| PlaceHolderLeftNavBarDataSource | Die Datenquelle für das linke Navigationsmenü (linke Navigation). |
| PlaceHolderLeftNavBarTop | Navigationsbereich links oben (linke Navigation). |
| PlaceHolderMain | Der Hauptinhalt der Seite (Seiteninhalt). |
| PlaceHolderMiniConsole | Befehle auf Seitenebene, z. B. Seite bearbeiten, Verlauf und Eingehende Links auf einer Unternehmens-Wiki-Seite. |
| PlaceHolderNavSpacer | Die Breite des linken Navigationsbereichs (linke Navigation). |
| PlaceHolderPageDescription | Beschreibung der Seiteninhalte. |
| PlaceHolderPageImage | Seitensymbol in der linken oberen Ecke der Seite (Menüband). |
| PlaceHolderPageTitle | Der Seitentitel (\<title\>) (Seitentitel), der in der Titelleiste der Browserseite angezeigt wird. |
| PlaceHolderPageTitleInTitle | Der Titel der Seite (Seitentitel), der direkt unterhalb des Breadcrumbs angezeigt wird. |
| PlaceHolderQuickLaunchBottom | Unteres Ende der Schnellstartnavigation (obere Navigation). |
| PlaceHolderQuickLaunchTop | Oberes Ende der Schnellstartnavigation (obere Navigation). |
| PlaceHolderSearchArea | Der Bereich, in dem das Suchfeldsteuerelement angezeigt wird (Suche). |
| PlaceHolderSiteName | Der Name der Website (Suite-Navigation). |
| PlaceHolderTitleAreaClass | Der Titelbereich der Seite (Suite-Navigation). |
| PlaceHolderTitleAreaSeparator | Schatten im Titelbereich (Suite-Navigation). |
| PlaceHolderTitleBreadCrumb | Der Inhaltsbereich für das Tittel-Breadcrumb. |
| PlaceHolderTitleLeftBorder | Der linke Rand des Titelbereichs (Suite-Navigation). |
| PlaceHolderTitleRightMargin | Der rechte Rand des Titelbereichs (Suite-Navigation). |
| PlaceHolderTopNavBar | Der oberen Navigationsbereich (obere Navigation). |
| PlaceHolderUtilities | Zusätzlicher Inhalt, der am unteren Rand der Seite angezeigt werden muss (Seiteninhalt). |
| SPNavigation | Umfasst Vorgänge im Zusammenhang mit der Navigation. |
| WSSDesignConsole | Die Steuerelemente für die Seitenbearbeitung, wenn sich die Seite im Bearbeitungsmodus befindet. |
Wenn Sie einen der in Tabelle 2 aufgeführten Inhaltsplatzhalter aus einem SharePoint entfernen. master Seite löst SharePoint einen Fehler aus. Sie können einen Inhaltsplatzhalter mit ausgeblendeter Sichtbarkeit hinzufügen, sodass der Inhalt für Endbenutzer nicht sichtbar ist.
Weitere Informationen finden Sie unter Windows SharePoint Services Standardgestaltungsvorlagen (in diesem Artikel werden die Funktionen in SharePoint Services 3 beschrieben, aber der Inhalt gilt weiterhin). Siehe auch Arbeiten mit Inhaltsplatzhaltersteuerelementen.
Standardmäßige SharePoint-master-Seiten wie seattle.master und oslo.master enthalten viel mehr Inhaltsplatzhalter, als SharePoint erfordert. Diese master Seiten enthalten <SharePoint:Themes runat="server"> z. B. - und <SharePoint.CssRegistration runat="server"> -Steuerelemente.
Sowohl das Themes- als auch das CssRegistration-Steuerelement wird während des Seitenlebenszyklus ausgeführt. Durch Verwendung des Remotebereitstellungsmusters können Sie eine benutzerdefinierte Aktion verwenden, um ein Serversteuerelement zur Registrierung von benutzerdefinierten CSS hinzuzufügen.
Inhaltsplatzhalter, die nicht sichtbar sind, funktionieren weiterhin wie erwartet, aber alle inhalte, die sie generieren, werden aus der HTML-Quelle weggelassen, die Browser erkennen. Ein Inhaltsplatzhalter mit Visible="false" ist ausgeblendet.
Wichtig
Erstellen Sie keine benutzerdefinierten Platzhalter in benutzerdefinierten master Seiten, die in vordefinierten .master-Seiten wie seattle.master und oslo.master vorhanden sind. Dadurch werden schwerwiegende Ausnahmen verursacht.
Navigationssteuerelement SharePoint Online-Suite
SharePoint Online führt ein neues master-Seitenmarkup für das Suite-Navigationssteuerelement ein, das die obere Navigation rendert. Die standardmäßige Markup für das Suite-Navigation-Steuerelement unterscheidet sich in Abhängigkeit davon, ob sich die Website in einem Intranet befindet oder öffentlich zugänglich ist. Weitere Informationen zum Suite-Navigation-Steuerelement und Codebeispiele sowohl für Intranet-Websites als auch für öffentliche Website, die Sie Ihren Gestaltungsvorlagen hinzufügen können, finden Sie unter SharePoint Online Suite Navigation control.
Verwenden von CSOM zum Anpassen der Bereiche einer SharePoint-Seite
Im Allgemeinen wird empfohlen, die UserCustomAction-Klasse zu verwenden, um Links und andere Elemente hinzuzufügen oder zu entfernen. Dies ist eine Variante von SharePoint, die das CustomAction-Element verwendet, das Sie möglicherweise als Teil des Featureframeworks erkennen können, wenn Sie mit dem vollständig vertrauenswürdigen Codemodell vertraut sind. Obwohl das CustomAction-Element und das Featureframeworkbereitstellungsmuster im clientseitigen Objektmodell (CSOM) nicht speziell unterstützt werden, können die gleichen Speicherortbezeichner, die für das CustomAction-Element verfügbar sind, im CSOM-Code verwendet werden.
<CustomAction
RequiredAdmin = "Delegated | Farm | Machine"
ControlAssembly = "Text"
ControlClass = "Text"
ControlSrc = "Text"
Description = "Text"
FeatureId = "Text"
GroupId = "Text"
Id = "Text"
ImageUrl = "Text"
Location = "Text"
RegistrationId = "Text"
RegistrationType = "Text"
RequireSiteAdministrator = "TRUE" | "FALSE"
Rights = "Text"
RootWebOnly = "TRUE" | "FALSE"
ScriptSrc = "Text"
ScriptBlock = "Text"
Sequence = "Integer"
ShowInLists = "TRUE" | "FALSE"
ShowInReadOnlyContentTypes = "TRUE" | "FALSE"
ShowInSealedContentTypes = "TRUE" | "FALSE"
Title = "Text"
UIVersion = "Integer">
</CustomAction>
Anpassen des SharePoint-Menübands
Wenn Sie das Menüband anpassen, wird der vom Server gerenderte HTML-Code dem Klassennamen zugewiesen, den Sie einem benutzerdefinierten Stil zuweisen. Um dieses Feature zu verwenden, wechseln Sie zur Formatbibliothek, und erstellen Sie eine neue CSS-Datei für jede Formatvorlage, die Sie dem Menüband hinzufügen möchten. Sie können zwei Abschnitten des Menübands benutzerdefinierte Formatvorlagen hinzufügen:
- Für den Abschnitt Seitenelemente :
span.ms-rteElement-{{YOUR_OWN_DEFINED_NAME}}. Alternativ können Sie die Formatvorlagen H1, H2, H3 oder H4 verwenden, die den Text umschließen, auf den die Formatvorlage angewendet wird. - Für den Abschnitt Textformatvorlagen :
.ms-rteEStyle-{{YOUR_OWN_DEFINED_NAME}}.
Fügen Sie dann in der CSS-Klassendefiniton die folgende Zeile hinzu:
-ms-name:"The name visual in the ribbon for your style";
Sie können nun das Definieren der Details für die benutzerdefinierte CSS-Klasse in der benutzerdefinierten CSS-Datei beenden.
Anpassen der Suite-Navigation auf einer Webpartseite
In SharePoint hat die Benutzeroberfläche ein modernes Erscheinungsbild, das auf Seitenkacheln basiert. Livekacheln werden beispielsweise standardmäßig auf der SharePoint-Standardseite angezeigt. Die obere Navigation erleichtert Benutzern das Anzeigen und Zugreifen auf soziale Inhalte und OneDrive for Business. Sie können das Aussehen und Verhalten dieser Bereiche anpassen, indem Sie eine Mischung aus CSS und JavaScript verwenden.
Nachdem Sie eine Webpartseite erstellt haben, fügen Sie einer verfügbaren Webpartzone ein Skript-Editor-Webpart hinzu. Sie können dieses Webpart verwenden, um Ihrer Seite JavaScript hinzuzufügen. Sie können javaScript-Code zum Skript-Editor-Webpart hinzufügen, der die obere Navigationsleiste anhand ihrer ElementId identifiziert, und sie dann ausblenden, indem Sie die Sichtbarkeitseigenschaft auf ausgeblendet festlegen.
Anpassen des Einstellungsmenüs oder Zahnrads
Sie können die UserCustomAction-Klasse und eigenschaftenbehältereinträge verwenden, um das Einstellungsmenü einer beliebigen SharePoint-Website anzupassen, wie im folgenden Codebeispiel gezeigt.
public void AddCustomActions(ClientContext clientContext)
{
// Add a site settings link if it doesn't already exist.
if (!CustomActionAlreadyExists(clientContext, "Sample_CustomSiteSetting"))
{
// Add a site settings link.
UserCustomAction siteSettingLink = clientContext.Web.UserCustomActions.Add();
siteSettingLink.Group = "SiteTasks";
siteSettingLink.Location = "Microsoft.SharePoint.SiteSettings";
siteSettingLink.Name = "Sample_CustomSiteSetting";
siteSettingLink.Sequence = 1000;
siteSettingLink.Url = string.Format(DeployManager.appUrl, clientContext.Url);
siteSettingLink.Title = "Modify Site Metadata";
siteSettingLink.Update();
clientContext.ExecuteQuery();
}
// Add a site actions link, if it doesn't already exist.
if (!CustomActionAlreadyExists(clientContext, "Sample_CustomAction"))
{
UserCustomAction siteAction = clientContext.Web.UserCustomActions.Add();
siteAction.Group = "SiteActions";
siteAction.Location = "Microsoft.SharePoint.StandardMenu";
siteAction.Name = "Sample_CustomAction";
siteAction.Sequence = 1000;
siteAction.Url = string.Format(DeployManager.appUrl, clientContext.Url); ;
siteAction.Title = "Modify Site Metadata";
siteAction.Update();
clientContext.ExecuteQuery();
}
}
Anpassen der Strukturansicht
Um die Breite der Strukturansicht zu ändern, fügen Sie auf der Seite .master ein <div> Tag um das Tree-Tag hinzu, und weisen Sie dem <div>eine CSS-Klasse mit einem Formatbreitenattribut zu. Sie können die Breite der Schnellstartnavigation erhöhen, indem Sie der Datei *.css die folgende Formatdefinition hinzufügen.
.ms-nav {
width: 220 px;
}
Anpassen von Seiteninhalten
Die Anforderungen für das Anpassen von Seiteninhalten hängen von den Inhalten ab, die Sie auf Ihrer Seite einfügen. Zum Anpassen des Menüs Websiteaktionen können Sie ein UserCustomAction-Objekt verwenden, um Branding für Webparts bereitzustellen.
Wenn Sie eine Veröffentlichungswebsite erstellen, finden Sie unter Erstellen eines Seitenlayouts in SharePoint informationen zu den Grundlagen. Seitenlayouts hängen von der Verfügbarkeit der ContentTypeId-Klasse im CSOM ab. Wie bei anderen Mitgliedern, die in CSOM nicht verfügbar sind, können Sie einen Windows Communication Foundation-Dienst (WCF) verwenden, um mit ContentTypeId als temporäre Problemumgehung zu arbeiten.