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

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

  • Статья

Каскадные таблицы стилей (CSS) можно использовать для настройки полей форматированного текста и зон веб-частей в SharePoint. Настройку полей форматированного текста можно выполнять непосредственно на редактируемой странице. Для настройки зон веб-частей используется веб-часть "Редактор сценариев", позволяющая добавить HTML-код или сценарии, а также сопоставить таблицу стилей CSS.

Пример кода, связанный с этой статьей, см. в каталоге Branding.AlternateCSSAndSiteLogo проекта Office 365 Developer Patterns and Practices (Шаблоны и методики разработки для Office 365) на портале GitHub.

Важно!

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

Настройка полей форматированного текста

Настройку полей форматированного текста с помощью CSS можно проводить непосредственно на изменяемой странице:

  1. На странице SharePoint нажмите кнопку Изменить, чтобы перейти в режим редактирования страницы.

  2. На ленте выберите элементы Вставка>Код внедрения.

Теперь вы можете добавить или изменить элементы CSS для поля форматированного текста.

Настройка зон веб-частей

Для настройки зон веб-частей с помощью CSS используйте веб-часть "Редактор сценариев".

Примечание.

Если с SharePoint Online используется функция NoScript, веб-часть "Редактор сценариев" будет отключена.

Следующий пример кода загружает настраиваемую таблицу CSS в библиотеку ресурсов, применяет ссылку к URL-адресу таблицы CSS с помощью дополнительного действия, а затем создает дополнительное действие для настройки ссылки на новый файл CSS.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.EventReceivers;

namespace AlternateCSSAppAutohostedWeb.Services
{
    public class AppEventReceiver : IRemoteEventService
    {
        public SPRemoteEventResult ProcessEvent(SPRemoteEventProperties properties)
        {
            SPRemoteEventResult result = new SPRemoteEventResult();

            try
            {
                using (ClientContext clientContext = TokenHelper.CreateAppEventClientContext(properties, false))
                {
                    if (clientContext != null)
                    {
                        Web hostWebObj = clientContext.Web;

                        List assetLibrary = hostWebObj.Lists.GetByTitle("Site Assets");
                        clientContext.Load(assetLibrary, l => l.RootFolder);

                        // First, upload the CSS files to the Asset Library.
                        DirectoryInfo themeDir = new DirectoryInfo(System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath + "CSS");
                        foreach (var themeFile in themeDir.EnumerateFiles())
                        {
                            FileCreationInformation newFile = new FileCreationInformation();
                            newFile.Content = System.IO.File.ReadAllBytes(themeFile.FullName);
                            newFile.Url = themeFile.Name;
                            newFile.Overwrite = true;

                            Microsoft.SharePoint.Client.File uploadAsset = assetLibrary.RootFolder.Files.Add(newFile);
                            clientContext.Load(uploadAsset);
                            break;
                        }
                        
                        string actionName = "SampleCSSLink";

                        // Now, apply a reference to the CSS URL via a custom action.
                        
                        // Clean up existing actions that we may have deployed.
                        var existingActions = hostWebObj.UserCustomActions;
                        clientContext.Load(existingActions);

                        // Run uploads and initialize the existing Actions collection.
                        clientContext.ExecuteQuery();

                        // Clean up existing actions.
                        foreach (var existingAction in existingActions)
                        {
                            if(existingAction.Name.Equals(actionName, StringComparison.InvariantCultureIgnoreCase))
                                existingAction.DeleteObject();
                        }
                        clientContext.ExecuteQuery();

                        // Build a custom action to write a link to your new CSS file.
                        UserCustomAction cssAction = hostWebObj.UserCustomActions.Add();
                        cssAction.Location = "ScriptLink";
                        cssAction.Sequence = 100;
                        cssAction.ScriptBlock = @"document.write('<link rel=""stylesheet"" href=""" + assetLibrary.RootFolder.ServerRelativeUrl + @"/cs-style.css"" />');";
                        cssAction.Name = actionName;
                        
                        // Apply.
                        cssAction.Update();
                        clientContext.ExecuteQuery();
                    }
                    result.Status = SPRemoteEventServiceStatus.Continue;
                    return result;
                }
            }
            catch (Exception ex)
            {
                result.Status = SPRemoteEventServiceStatus.CancelWithError;
                result.ErrorMessage = ex.Message;
                return result;
            }
            
        }

        public void ProcessOneWayEvent(SPRemoteEventProperties properties)
        {
            // This method is not used by app events.
        }
    }
}

См. также