向 SharePoint 托管的 SharePoint 加载项添加自定义页面和样式

项目
04/08/2023

这是关于开发 SharePoint 托管的 SharePoint 加载项的基础知识系列文章中的第 7 篇文章。你应该首先熟悉SharePoint 加载项以及本系列中之前的文章，可在创建 SharePoint 托管的 SharePoint 加载项入门中找到相关内容|后续步骤。

注意

如果已完成有关 SharePoint 托管加载项的本系列文章之一，便已生成 Visual Studio 解决方案，可以在继续阅读本主题的过程中使用。也可以从 SharePoint_SP-hosted_Add Ins_Tutorials 下载存储库，再打开 BeforePage.sln 文件。

本文将介绍如何向“员工入职培训”SharePoint 加载项添加帮助页面，并将它配置为使用自定义 CSS 样式表。

添加页面

在“解决方案资源管理器”中，右键单击“页面”文件夹，再依次选择“添加”>“新项”。此时，“添加新项”对话框打开，并展开“Office/SharePoint”节点。
选择“页面”，并将它命名为“Help.aspx”。
在此文件中，查找两个“asp:Content”元素，并在它们之间添加下面的第三个 asp:Content 标记。
```
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
  Help
</asp:Content>
```
查找 ID 为“PlaceholderAdditionalPageHead”的“asp:Content”元素，并向其中添加以下标记。
```
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
```
查找 ID 为“PlaceHolderMain”的“asp:Content”元素，并删除其中的所有子元素。

将下列代码以内容形式添加到同一“asp:Content”元素中。

<H3>Having a problem with the add-in?</H3>
<p>Call the help line for Fabrikam Add-ins:</p>
<p>1-555-555-5555</p>

保存并关闭此文件。
打开 Default.aspx 文件。

查找 ID 为“PlaceHolderMain”的“asp:Content”元素，并向结尾添加以下标记。

<p><asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Pages/Help.aspx';"
  Text="Get help for the Employee Orientation add-in" /></p>

保存并关闭此文件。

向样式表添加样式类

在“解决方案资源管理器”中，打开“内容”文件夹中的 app.css 文件，再向此文件添加以下代码行。
```
p {color: green;}
```
保存并关闭此文件。

运行并测试外接程序

使用 F5 键部署并运行外接程序。 Visual Studio 在测试 SharePoint 网站上临时安装并立即运行此加载项。
在加载项的默认页面打开后，选择“获取‘员工入职培训’加载项方面的帮助”链接，打开“帮助”页面。

此时，自定义页面打开，在 <p> 标记中添加的两行内容显示为绿色。

图 1. 帮助页面
若要结束调试会话，请关闭浏览器窗口或停止在 Visual Studio 中进行调试。每次按 F5，Visual Studio 都会撤回旧版加载项并安装最新版本。
将在其他文章中使用此加载项和 Visual Studio 解决方案，因此最好在使用一段时间后，再最后撤回一次加载项。在“解决方案资源管理器”中，右键单击此项目，再选择“撤回”。

后续步骤

本系列的下一篇文章将介绍如何向 SharePoint 托管 SharePoint 加载项添加自定义客户端呈现。

通过

向 SharePoint 托管的 SharePoint 加载项添加自定义页面和样式

添加页面

向样式表添加样式类

运行并测试外接程序

后续步骤

其他资源