Поделиться через


Обновление фирменной символики существующих сайтов и областей страниц SharePoint

Вы можете обновить фирменную символику на существующих сайтах и семействах веб-сайтов SharePoint, а также настроить регионы страниц SharePoint. Это может потребоваться, например, при обновлении до новой версии сайта.

Важно!

Такая расширяемость доступна только для классического интерфейса SharePoint. Эту возможность нельзя использовать вместе с современным интерфейсом в SharePoint Online, например на сайтах для общения.

Обновление фирменного стиля существующих сайтов и дочерних сайтов

В примере Branding.Refresh в проекте шаблоны и методики разработчика Office 365 на GitHub показано, как использовать библиотеку OfficeDevPnP.Core для итерации существующих сайтов и дочерних сайтов, чтобы проверить и обновить примененную фирменную символику. Пример иллюстрирует обновление фирменной символики сайта, но ту же концепцию можно использовать для выполнения других действий, таких как развертывание новой библиотеки на нескольких сайтах или обновление настраиваемого действия, которое было развернуто во время подготовки. Тот же процесс можно использовать для обновления существующих сайтов до новой версии.

Операция состоит из двух этапов:

  • получение сайтов, которые требуется обновить;
  • Обновите фирменную символику сайта.

Получение сайтов, которые требуется обновить

Сначала получите список сайтов и дочерних сайтов, которые вы хотите обновить. В примере показано, как это сделать с помощью функции поиска, но есть и другие варианты, такие как чтение из каталога сайта или реализация пользовательского интерфейса управления, где администраторы могут указать список сайтов. Ниже показано, как создать список с помощью функции поиска.

// 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;
}

Вызов GetSubSites является рекурсивным, поэтому он извлекает дерево дочернего сайта. После получения дерева убедитесь, что возвращено правильное число.

Обновление фирменной символики

После выбора сайта для обработки можно использовать методы OfficeDevPnP.Core для работы с ним. В примере показано, как это сделать для фирменного стиля, но таким же образом можно обрабатывать любые изменения.

В этом примере используется шаблон, который применяет контейнер веб-свойств для хранения сведений о текущих параметрах. Код сначала считывает значения контейнера веб-свойств и выполняет соответствующие действия для каждого значения.

// 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);
    }
  }
}

Код, который затем обновляет тему, довольно прост и основан на методах OfficeDevPnP.Core.

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);
}

Настройка регионов страницы SharePoint

Если вы хотите настроить регионы страницы SharePoint, можно использовать сочетание удаленной подготовки и настраиваемых каскадных таблиц стилей (CSS) для файлов, связанных с регионами страницы. Сначала необходимо знать, какие файлы SharePoint связаны с различными регионами страницы SharePoint.

Таблица 1. Регионы страницы SharePoint и связанные файлы

Область страницы Связанные файлы Дополнительные сведения
Ribbon Любые главные страницы по умолчанию. Соответствующая CSS:
  • Основной текст — body: #s4-workspace
  • Панель набора — слева: #suiteBarLeft
  • Панель набора — справа: #suiteBarRight
  • Контейнер ленты: #globalNavBox
Можно скрыть с помощью кнопки Сосредоточиться на контенте.
Комплексная навигация Любые главные страницы по умолчанию. Можно скрыть с помощью кнопки Сосредоточиться на контенте.
Комплексные ссылки Можно скрыть с помощью кнопки Сосредоточиться на контенте.
Меню приветствия *. master Можно скрыть с помощью кнопки Сосредоточиться на контенте.
Меню настроек или значок шестеренки *. master
Справка *. master
Контекстные вкладки ленты Любая главная страница по умолчанию. Примеры см. ниже:
Панель быстрого доступа *. master Можно скрыть с помощью кнопки Сосредоточиться на контенте.
Эмблема сайта *. master

Соответствующий CSS: .ms-sitelcon-img
Верхняя панель навигации Панель навигации CSOM или JSOM

*. master

Соответствующая CSS (не в режиме редактирования):
  • Новый элемент выбран: .ms-core-listMenu-horizontalBox li.static > .ms-core.listMenu-selected
  • Наведите указатель мыши на новый элемент: .mscore-listMenu-horizontalBox li.static > a.ms-core-listMenu-item:hover
  • Всплывающее меню стрелка: .ms-core-listMenu-horizontalBox .dynamic-children.additional-background
  • Элемент навигации (соответствующий элементам меню верхнего уровня): .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item
  • Всплывающий элемент: ul.dynamic .ms-core-listMenu-item
  • Всплывающий контейнер: ul.dynamic
  • Изменить ссылки: .ms-navedit-editLinksText > span> .ms-metadata
Соответствующая CSS (в режиме редактирования):
  • Навигация в режиме редактирования: .ms-core-listMenu-horizontalBox .ms-core-listMenuEdit > tr > .msnavedit-linkCell > .ms-core-listMenu-item
  • Добавить ссылку: .ms-core-listMenu-horizontalBox a.ms-navedit-addNewLink
Заголовок страницы Соответствующая CSS (в режиме редактирования):
  • Заголовок страницы и заголовок страницы со ссылкой: .ms-core-pageTitle, .ms-core-pageTitle a
  • Кнопка "Описание": #ms-pageDescriptionDiv
  • Поле описания: .js-callout-mainElement
  • Стрелка поля описания: .js-callout-beak
  • Текст описания: .js-callout-body
Поле поиска Nav CSOM/JSOM *.master Соответствующий CSS:
  • Граница поля поиска: .ms-srch-sb-border
  • Наведите указатель мыши на границу поля поиска: .ms-srch-sb-border: hover
  • Поле поиска граница при нажатии: .ms-srch-sb-borderFocused
  • Поле ввода поля поиска: .ms-srch-sb-borderFocused
  • Текст поля поиска: .ms-srch-sb
  • Поле ввода поля поиска: .ms-srch-sb-searching
  • Поиск
Левая область навигации Nav CSOM/JSOM *.master Дополнительные сведения см. в следующих разделах.
Представление в виде дерева *. master Дополнительные сведения см . в разделе Настройка встроенного навигатора Treeview.
Содержимое страницы Макет страницы или страницы содержимого

Зона веб-частей или веб-частиКорвечая CSS (зона веб-части и веб-часть):
  • Зона веб-части: .ms-webpart-zone
  • Владелец веб-части: .ms-webpartzone-cell
  • Название веб-части: .ms-webpart-titleText
  • Заголовок веб-части со ссылкой: .ms-webpart-titleText > a
  • Текст веб-части: .ms-WPBody
Дополнительные сведения см. в статье Создание макета страницы в SharePoint.

Примеры, связанные с настройкой регионов страницы, см. ниже в проекте Office 365 шаблоны и методики разработчика на сайте GitHub:

Обязательные заполнители "минимального" содержимого на страницах SharePoint по умолчанию master

Sharepoint. master страницах требуется использовать заполнители контента, которые отрисовывает основное содержимое и структурные элементы, необходимые странице SharePoint для поддержки жизненного цикла страницы. В таблице 2 описываются заполнители контента.

Табл. 2. Минимальный обязательный заполнитель содержимого для страницы master SharePoint

Заполнитель контента Хранит контент для
PlaceHolderAdditionalPageHead Дополнительные элементы в \<head\> разделе страницы.
PlaceHolderBodyAreaClass Дополнительные стили в заголовке страницы.
PlaceHolderBodyLeftBorder Левый граничный элемент основной части страницы.
PlaceHolderBodyRightBorder Правый граничный элемент основной части страницы.
PlaceHolderCalendarNavigator Элемент выбора даты для навигации в календаре, когда он отображается на странице.
PlaceHolderFormDigest Элемент управления безопасностью "дайджест формы".
PlaceHolderGlobalNavigation Глобальная иерархическая навигация (верхняя панель навигации).
PlaceHolderGlobalNavigationSiteMap Карта сайта в глобальной навигации (верхняя панель навигации).
PlaceHolderHorizontalNav Верхнее меню навигации для страницы (верхняя панель навигации).
PlaceHolderLeftActions Нижняя левая область навигации (левая область навигации).
PlaceHolderLeftNavBar Левая область навигации.
PlaceHolderLeftNavBarDataSource Источник данных для левого меню навигации (левая область навигации).
PlaceHolderLeftNavBarTop Верхняя левая область навигации (левая область навигации).
Placeholdermain Основной контент страницы (контент страницы).
PlaceHolderMiniConsole Команды на уровне страницы, такие как "Изменить страницу", "Журнал" и "Входящие ссылки" на корпоративной вики-странице.
PlaceHolderNavSpacer Ширина левой области навигации.
PlaceHolderPageDescription Описание содержимого страницы.
PlaceHolderPageImage Значок страницы в левом верхнем углу страницы (лента).
PlaceHolderPageTitle Заголовок страницы (\<title\>) (заголовок страницы), отображаемый в строке заголовка страницы браузера.
PlaceHolderPageTitleInTitle Заголовок страницы отображается непосредственно под строкой навигации.
PlaceHolderQuickLaunchBottom Нижняя часть навигации панели быстрого запуска (верхняя панель навигации).
PlaceHolderQuickLaunchTop Верхняя часть навигации панели быстрого запуска (верхняя панель навигации).
PlaceHolderSearchArea Область, где отображается элемент управления "Поле поиска" (поле поиска).
PlaceHolderSiteName Имя сайта (комплексная навигация).
PlaceHolderTitleAreaClass Область заголовка страницы (комплексная навигация).
PlaceHolderTitleAreaSeparator Тени в области заголовка (комплексная навигация).
PlaceHolderTitleBreadCrumb Область контента строки навигации.
PlaceHolderTitleLeftBorder Левая граница области заголовка (комплексная навигация).
PlaceHolderTitleRightMargin Правая граница области заголовка (комплексная навигация).
PlaceHolderTopNavBar Верхняя область навигации.
PlaceHolderUtilities Дополнительный контент, который должен отображаться в нижней части страницы (контент страницы).
SPNavigation Включает операции, связанные с навигацией.
WSSDesignConsole Элементы управления редактированием, когда страница находится в режиме редактирования.

Если удалить один из заполнителей контента, перечисленных в таблице 2, из SharePoint . master странице SharePoint выдает ошибку. Вы можете добавить заполнитель контента со скрытой видимостью, который скрывает контент.

Дополнительные сведения см. в разделе Windows SharePoint Services эталонных страницах по умолчанию (в этой статье описаны функциональные возможности в SharePoint Services 3, но содержимое по-прежнему применяется). См. также статью Работа с элементами-заполнителями содержимого.

Страницы SharePoint по умолчанию master, такие как seattle.master и oslo.master, содержат гораздо больше заполнителей контента, чем требуется SharePoint. Например, эти master страницы включают <SharePoint:Themes runat="server"> элементы управления и <SharePoint.CssRegistration runat="server"> .

Элементы управления Themes и CssRegistration используются во время жизненного цикла страницы. С помощью шаблона удаленной подготовки можно добавить серверный элемент управления для регистрации пользовательских CSS.

Невидимые заполнители контента по-прежнему работают должным образом, но любое содержимое, которое они создают, опущено из источника HTML, распознаваемого браузерами. Заполнитель содержимого с Visible="false" скрытым.

Важно!

Не создавайте настраиваемые заполнители на пользовательских master страницах, которые существуют на встроенных страницах .master, таких как seattle.master и oslo.master. Это приведет к серьезным ошибкам.

Элемент управления Suite Navigation в SharePoint Online

В SharePoint Online представлена новая разметка страницы master для элемента управления Навигация по набору, который отображает верхнюю навигацию. Разметка элемента управления комплексной навигации по умолчанию зависит от того, предназначен ли сайт для интрасети или Интернета. Дополнительные сведения об элементе управления комплексной навигации и примеры для обоих видов сайтов, которые можно добавлять на главные страницы, см. в разделе SharePoint Online Suite Navigation control.

Настройка регионов страницы SharePoint с помощью CSOM

Как правило, рекомендуется использовать класс UserCustomAction для добавления или удаления ссылок и других элементов. Это вариант SharePoint, использующий элемент CustomAction , который можно распознать как часть платформы функций, если вы знакомы с моделью кода полного доверия. Хотя шаблон подготовки элемента CustomAction и платформы компонентов не поддерживается явно в клиентской объектной модели (CSOM), в коде CSOM можно использовать те же идентификаторы расположения, что доступны элементу CustomAction.

<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>

Настройка ленты SharePoint

При настройке ленты HTML-код, отображаемый сервером, назначается классу, который вы назначили пользовательскому стилю. Для использования этой функции перейдите к библиотеке стилей и создайте CSS-файл для каждого стиля, который требуется добавить на ленту. Вы можете добавить настраиваемые стили в два раздела ленты:

  • Для раздела Элементы страницы : span.ms-rteElement-{{YOUR_OWN_DEFINED_NAME}}. Или же можно использовать стили H1, H2, H3 или H4, которые будут обтекать текст, к которому применяется стиль.
  • Для раздела Стили текста : .ms-rteEStyle-{{YOUR_OWN_DEFINED_NAME}}.

Затем в определении класса CSS добавьте следующую строку:

-ms-name:"The name visual in the ribbon for your style";

Теперь можно завершить определение сведений о пользовательском классе CSS в вашем CSS-файле.

Настройка навигации по набору на странице веб-части

В SharePoint пользовательский интерфейс имеет современный внешний вид, основанный на плитках страниц. Например, по умолчанию на странице SharePoint по умолчанию отображаются динамические плитки. Верхняя навигация упрощает просмотр и доступ к социальному контенту и OneDrive для бизнеса. Вы можете настроить внешний вид этих областей с помощью сочетания CSS и JavaScript.

После создания страницы веб-части добавьте веб-часть редактора скриптов в доступную зону веб-частей. Эту веб-часть можно использовать для добавления JavaScript на страницу. Вы можете добавить код JavaScript в веб-часть редактора скриптов, которая идентифицирует верхнюю панель навигации по элементу ElementId, а затем скрыть ее, задав свойству видимости значение hidden.

Изменение меню настроек или значка шестеренки

Вы можете использовать класс UserCustomAction и записи контейнера свойств для настройки меню параметров любого сайта SharePoint, как показано в следующем примере кода.

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();
  }
}

Настройка древовидного представления

Чтобы изменить ширину представления дерева, добавьте <div> тег вокруг тега дерева на странице .master и назначьте класс CSS с атрибутом style width для <div>. Вы можете увеличить ширину навигации быстрого запуска , добавив следующее определение стиля в файл *.css .

.ms-nav {
  width: 220 px;
}

Настройка контента страницы

Требования к настройке содержимого страницы зависят от содержимого, включаемого на страницу. Что касается настройки меню Действия сайта , можно использовать объект UserCustomAction для подготовки фирменной символики для веб-частей.

Если вы создаете сайт публикации, ознакомьтесь с разделом Создание макета страницы в SharePoint , чтобы узнать об основных принципах. Макеты страниц зависят от доступности класса ContentTypeId в CSOM. Что касается других участников, недоступных в CSOM, вы можете использовать службу Windows Communication Foundation (WCF) для работы с ContentTypeId в качестве временного обходного решения.

См. также