在 SharePoint 加载项中使用 SharePoint 网站的样式表Use a SharePoint website's style sheet in SharePoint Add-ins

可以在您的 SharePoint 外接程序中引用 SharePoint 网站的样式表,并通过使用 SharePoint 中的样式表将其用于设置您网页的样式。此外,如果有人更改了 SharePoint 网站的样式表或主题,则可以在您的外接程序中采用一组新的样式,而无需修改您的外接程序中的样式表引用。You can reference the style sheet of a SharePoint website in your SharePoint Add-in and use it to style your webpages by using the style sheet in SharePoint. In addition, if someone changes the SharePoint website's style sheet or theme, you can adopt the new set of styles in your add-in without modifying the style sheet reference in your add-in.

重要

如果网页使用部件版式控制或加载项母版页,则这些样式可供使用,并且不必使用本文中的过程手动引用样式表。If your webpages use the chrome control or the add-in master page, the styles are already available for you to use, and you don't have to reference the style sheet manually by using the procedure in this article.

使用本文中的示例的先决条件Prerequisites for using the examples in this article

需要一个如两种类型的 SharePoint 加载项:SharePoint 托管的加载项和提供程序托管的加载项中所述的开发环境。You need a development environment as explained in Two types of SharePoint Add-ins: SharePoint-hosted and provider-hosted.

在 SharePoint 加载项中使用 SharePoint 样式表之前要了解的核心概念Core concepts to know before using the SharePoint style sheet in a SharePoint Add-in

下表列出了可帮助你了解与使用 SharePoint 样式表的方案相关的概念的有用文章。The following table lists useful articles that can help you understand the concepts involved in a scenario that uses the SharePoint style sheet.

文章标题Article title 说明Description
SharePoint 外接程序SharePoint Add-ins 了解 SharePoint 中新的外接程序模型,可以利用此模型来创建对最终用户来说是小型的易于使用的解决方案的外接程序。Learn about the new add-in model in SharePoint that enables you to create add-ins, which are small, easy-to-use solutions for end users.
适用于 SharePoint 外接程序的 UX 设计UX design for SharePoint Add-ins 了解在生成 SharePoint 外接程序时可使用的用户体验 (UX) 选项和替代项。Learn about the user experience (UX) options and alternatives that you have when building SharePoint Add-ins.
SharePoint 中的主机 Web、外接程序 Web 和 SharePoint 组件Host webs, add-in webs, and SharePoint components in SharePoint 了解主机 Web 和外接程序 Web 之间的区别。找出哪些 SharePoint 组件可以包含在 SharePoint 外接程序中、哪些组件部署到主机 Web、哪些组件部署到外接程序 Web,以及如何将外接程序 Web 部署在独立的域中。Learn about the difference between host webs and add-in webs. Find out which SharePoint components can be included in a SharePoint Add-in, which components are deployed to the host web, which components are deployed to the add-in web, and how the add-in web is deployed in an isolated domain.

代码示例:在 SharePoint 加载项中使用 SharePoint 网站样式表Code example: Use a SharePoint website's style sheet in a SharePoint Add-in

此代码示例演示如何使用 SharePoint 网站样式表。This code example shows you how to use the SharePoint website's style sheet. 这使远程 Web 应用程序页能够匹配 SharePoint 主机 Web 中页面的外观。This enables your remote web application pages to match the look-and-feel of the pages in the SharePoint host web.

在 SharePoint 加载项中使用样式表To use the style sheet in a SharePoint Add-in

  1. 创建提供程序托管的 SharePoint 加载项。Create the provider-hosted SharePoint Add-in.

  2. 通过创建空白页来强制设置加载项 Web。Force the add-in web provisioning by creating a blank page.

  3. 向 Web 项目添加网页并引用样式表。Add a webpage to the web project, and reference the style sheet.

  4. 编辑加载项清单中的元素。Edit the element in the add-in manifest.

下图显示了使用样式表的 SharePoint 网页。The following figure shows a SharePoint webpage that is using the style sheet.

使用样式表的网页Webpage using the style sheet

使用样式表控件的网页


创建 SharePoint 加载项和远程 Web 项目To create the SharePoint Add-in and remote web projects

  1. 以管理员身份打开 Visual Studio。Open Visual Studio as administrator. (为此,请右键单击“开始”**** 菜单上的“Visual Studio”图标,再选择“以管理员身份运行”****。)(To do this, right-click the Visual Studio icon on the Start menu, and select Run as administrator.)

  2. 按照开始创建提供程序托管的 SharePoint 加载项中的说明,创建提供程序托管的 SharePoint 加载项,并将其命名为 StylesheetAdd-inCreate the provider-hosted SharePoint Add-in as explained in Get started creating provider-hosted SharePoint Add-ins and name it StylesheetAdd-in.

通过创建空白页来强制设置加载项 WebTo force the add-in web provisioning by creating a blank page

  1. 右键单击 SharePoint 外接程序项目并添加新模块。Right-click the SharePoint Add-in project, and add a new module.

  2. 右键单击该新模块并添加新项。Right-click the new module, and add a new item.

  3. 在“Visual C# 项”****、“Web”**** 下,选择“HTML 页面”****。Under Visual C# items, Web, select HTML Page. 将页面重命名为 blank.htmlRename the page to blank.html.

  4. 删除 blank.html 的内容。Delete the contents of blank.html.

在 Web 项目中添加引用样式表的网页To add a webpage that references the style sheet in the web project

  1. 右键单击 Web 项目,并添加一个新 Web 表单。将该 Web 表单重命名为 StyleConsumer.aspxRight-click the web project, and add a new Web Form. Rename the Web Form to StyleConsumer.aspx.

  2. 用以下代码替换 Web 表单 .aspx 文件的内容。该代码执行以下任务:Replace the contents of the Web Form .aspx file with the following code. The code performs the following tasks:

    • 从外接程序 Web 将 blank.html 页加载到不可见的 IFrame 中。Loads the blank.html page from the add-in web in an invisible IFrame.

    • 从外接程序 Web 加载 defaultcss.ashx 文件。Loads the defaultcss.ashx file from the add-in web.

    • 使用可用样式。Uses the available styles.

        <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StyleConsumer.aspx.cs" Inherits="StylesheetAppWeb.StyleConsumer" %>
    
        <!DOCTYPE html>
        <html>
        <head>
            <title>Add-in using stylesheet</title>
        </head>
        <body>
    
            <!-- The main page title -->
            <h1 class="ms-core-pageTitle">Stylesheet add-in</h1>
    
            <!-- Some subtitle -->
            <h1 class="ms-accentText">For people</h1>
    
            <!-- Subtitle comments -->
            <h2 class="ms-accentText">who care about the style in their add-ins</h2>
            <p></p>
            <div>
                <h2 class="ms-webpart-titleText">Get started with style in your add-in... </h2>
                <a class="ms-commandLink" href="#">some command</a>
                <br />
                This sample shows you how to use some of the classes defined in the SharePoint website's style sheet.
            </div>
    
            <!-- Script to load SharePoint resources
                and load the blank.html page in
                the invisible iframe
                -->
            <script type="text/javascript">
                "use strict";
                var appweburl;
    
                (function () {
                    var ctag;
    
                    // Get the URI decoded add-in web URL.
                    appweburl =
                        decodeURIComponent(
                            getQueryStringParameter("SPAppWebUrl")
                    );
                    // Get the ctag from the SPClientTag token.
                    ctag =
                        decodeURIComponent(
                            getQueryStringParameter("SPClientTag")
                    );
    
                    // The resource files are in a URL in the form:
                    // web_url/_layouts/15/Resource.ashx
                    var scriptbase = appweburl + "/_layouts/15/";
    
                    // Dynamically create the invisible iframe.
                    var blankiframe;
                    var blankurl;
                    var body;
                    blankurl = appweburl + "/Pages/blank.html";
                    blankiframe = document.createElement("iframe");
                    blankiframe.setAttribute("src", blankurl);
                    blankiframe.setAttribute("style", "display: none");
                    body = document.getElementsByTagName("body");
                    body[0].appendChild(blankiframe);
    
                    // Dynamically create the link element.
                    var dclink;
                    var head;
                    dclink = document.createElement("link");
                    dclink.setAttribute("rel", "stylesheet");
                    dclink.setAttribute("href", scriptbase + "defaultcss.ashx?ctag=" + ctag);
                    head = document.getElementsByTagName("head");
                    head[0].appendChild(dclink);
                })();
    
                // Function to retrieve a query string value.
                // For production purposes you may want to use
                //  a library to handle the query string.
                function getQueryStringParameter(paramToRetrieve) {
                    var params;
                    var strParams;
    
                    params = document.URL.split("?")[1].split("&amp;");
                    strParams = "";
                    for (var i = 0; i < params.length; i = i + 1) {
                        var singleParam = params[i].split("=");
                        if (singleParam[0] == paramToRetrieve)
                            return singleParam[1];
                    }
                }
            </script>
        </body>
        </html>
    
    

某些情况下,需要在用户通过 SharePoint 的身份验证后,页面才能下载 CSS 和图像进行样式化。 链接标记不会自动对未登录的用户进行身份验证。 请考虑从网页的加载项 Web 中下载页面资源,在链接到 CSS 文件之前强制用户进行身份验证。 在本示例中,blank.html 页面在一个不可见的 IFrame 中加载。In this example, the blank.html page is loaded in an invisible IFrame.

编辑外接程序清单中的 StartPage 元素To edit the StartPage element in the add-in manifest

  1. 在“解决方案资源管理器”**** 中,双击“AppManifest.xml”**** 文件。Double-click the AppManifest.xml file in Solution Explorer.

  2. 在“起始页”**** 下拉菜单上,选择使用样式表的网页。On the Start page drop-down menu, select the webpage that uses the style sheet.

生成并运行解决方案To build and run the solution

  1. 确保已将 SharePoint 加载项项目设置为启动项目。Make sure that the SharePoint Add-in project is set as the startup project.

  2. 按 F5 键。Select the F5 key.

    备注

    按 F5 键时,Visual Studio 会生成解决方案、部署加载项并打开加载项的权限页面。When you press F5, Visual Studio builds the solution, deploys the add-in, and opens the permissions page for the add-in.

  3. 选择“信任它”**** 按钮。Select the Trust It button.

  4. 选择“StylesheetBasic”**** 加载项图标。Select the StylesheetBasic add-in icon.

  5. 下图显示了使用 SharePoint 样式后呈现的网页。The following figure shows the resulting webpage using the SharePoint styles.

    页面中使用的样式表Style sheet used in the page

    网页中使用的样式表控件

  6. 还可以转到主机 Web 并更改主题。重新加载加载项网页以使用新样式。You can also go to the host web and change the theme. Reload the add-in webpage to use the new styles.

解决方案疑难解答Troubleshooting the solution

问题Problem 解决方案Solution
在按 F5 键后,Visual Studio 不打开浏览器。Visual Studio does not open the browser after you select the F5 key. 将 SharePoint 加载项项目设置为启动项目。Set the SharePoint Add-in project as the startup project.
证书错误。Certificate error. 将 Web 项目的“已启用 SSL”**** 属性设置为“false”****。在 SharePoint 加载项项目中,将“Web 项目”**** 属性设置为“无”****,然后将该属性设置回 Web 项目的名称。Set the SSL Enabled property of your web project to false. In the SharePoint Add-in project, set the Web Project property to None, and then set the property back to your web project's name.

另请参阅See also