当前位置:网站首页 > 更多 > 玩电脑 > 正文

[玩转系统] SharePoint Online:如何在 PowerShell 中使用自定义操作注入 CSS?

作者:精品下载站 日期:2024-12-14 14:37:12 浏览:16 分类:玩电脑

SharePoint Online:如何在 PowerShell 中使用自定义操作注入 CSS?


要求: 将自定义 CSS 添加到 SharePoint Online,无需编辑母版页。

PowerShell 将 CSS 添加到 SharePoint Online:

将自定义 CSS 添加到 SharePoint Online 网站可以帮助您自定义外观或将品牌应用到您的网站并使其更具视觉吸引力。您可以使用 PowerShell 将 CSS 快速添加到 SharePoint Online 网站,而无需费心处理母版页代码。这篇博文将向您展示如何使用 PowerShell 将 CSS 添加到 SharePoint Online。

假设您已将“Custom.CSS”文件上传到“Site Assets”库,以下是用于将 CSS 插入 SharePoint Online 网站的 PowerShell。

此方法仅在经典体验中有效!对于现代网站,请使用:如何将自定义 CSS 注入现代网站?

#Load SharePoint CSOM Assemblies
Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\ISAPI\Microsoft.SharePoint.Client.dll"
Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\ISAPI\Microsoft.SharePoint.Client.Runtime.dll"
  
#Set parameter values
$SiteURL="https://Crescent.sharepoint.com/"
$CustomActionTitle = "Custom Branding CSS"
 
Try{
    #Get Credentials to connect
    $Cred= Get-Credential
    $Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Cred.Username, $Cred.Password)
  
    #Setup the context
    $Ctx = New-Object Microsoft.SharePoint.Client.ClientContext($SiteURL)
    $Ctx.Credentials = $Credentials

    #Get Existing Custom Actions
    $Site = $Ctx.Site
    $UserCustomActions= $Site.UserCustomActions
    $Ctx.Load($UserCustomActions)
    $Ctx.ExecuteQuery()

    #Check if the CustomAction Exists already
    $CustomAction = $UserCustomActions | Where { $_.Title -eq $CustomActionTitle }

    If($CustomAction -eq $Null)
    {
        #Add new custom action
        $UserCustomAction = $Ctx.Site.UserCustomActions.Add()

        #Insert CSS link in Head: <link rel="stylesheet" href="https://Crescent.sharepoint.com/SiteAssets/Custom.css" type="text/css">
        $Url = "https://Crescent.sharepoint.com/SiteAssets/Custom.css"
        $ScriptBlock = "var head = document.querySelector('head');
                        var styleTag = document.createElement('style'); 
                        var linkTag = document.createElement('link');
                        linkTag.rel = 'stylesheet'; 
                        linkTag.href = '$($Url)'; 
                        linkTag.type = 'text/css'; 
                        head.appendChild(styleTag);
                        head.appendChild(linkTag);"

        #Set the Properties of the custom action
        $UserCustomAction.Name = $CustomActionTitle
        $UserCustomAction.CommandUIExtension
        $UserCustomAction.Title = $CustomActionTitle
        $UserCustomAction.Location = "ScriptLink"
        $UserCustomAction.Sequence = 1000
        $UserCustomAction.ScriptBlock  = $ScriptBlock
        $UserCustomAction.Update()
        $Ctx.ExecuteQuery()

        Write-Host -f Green "Custom Action Added Successfully!"
    }
    Else
    {
         write-host -f Yellow "Custom Custom Already Exists!"
    }
}
Catch {
        write-host -f Red "Error Adding Custom Action!" $_.Exception.Message
} 

此 PowerShell 脚本创建一个自定义操作,将 CSS 标签注入 HEAD 标签内!要进行验证,请转到 Firebug 或 IE Dev 工具的控制台选项卡,点击“head”,HTML 标记应包含“”

要将自定义 CSS 或 JavaScript 添加到 SharePoint Online 中的新式页面,请使用新式脚本编辑器解决方案!参考:如何将自定义 CSS 添加到 SharePoint Online 现代页面?

您需要 登录账户 后才能发表评论

取消回复欢迎 发表评论:

关灯