如何使用PnP JS在SharePoint online中以编程方式添加页面/web部件区域/web部件？

PnP JS是一个用于与SharePoint Online进行交互的JavaScript库，它提供了一组简化的API，可以通过编程方式添加页面、Web部件区域和Web部件。下面是在SharePoint Online中使用PnP JS以编程方式添加页面、Web部件区域和Web部件的步骤：

首先，确保你已经安装了PnP JS库。你可以通过在你的项目中引入以下脚本来实现：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pnp-pnpjs/3.0.10/pnpjs.es5.umd.bundle.min.js"></script>

创建一个JavaScript文件，并在文件中编写以下代码：

// 导入PnP JS库
import { sp } from "@pnp/sp";

// 设置SharePoint Online网站的URL
const siteUrl = "https://your-sharepoint-site-url";

// 使用PnP JS库连接到SharePoint Online网站
sp.setup({
  sp: {
    baseUrl: siteUrl,
  },
});

// 添加页面
function addPage() {
  // 使用PnP JS库的Pages API添加页面
  sp.web.lists.getByTitle("Site Pages").items.add({
    Title: "New Page",
    PageLayoutType: "Article",
  }).then((result) => {
    console.log("Page added successfully");
  }).catch((error) => {
    console.log("Error adding page: " + error);
  });
}

// 添加Web部件区域
function addWebPartZone() {
  // 使用PnP JS库的WebPartPages API添加Web部件区域
  sp.web.getFileByServerRelativeUrl("/SitePages/NewPage.aspx").getItem().then((item) => {
    item.getLimitedWebPartManager().addWebPartZone().then((result) => {
      console.log("Web part zone added successfully");
    }).catch((error) => {
      console.log("Error adding web part zone: " + error);
    });
  }).catch((error) => {
    console.log("Error getting page item: " + error);
  });
}

// 添加Web部件
function addWebPart() {
  // 使用PnP JS库的WebPartPages API添加Web部件
  sp.web.getFileByServerRelativeUrl("/SitePages/NewPage.aspx").getItem().then((item) => {
    item.getLimitedWebPartManager().importWebPart("<?xml version=\"1.0\" encoding=\"utf-8\"?><WebPart xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns=\"http://schemas.microsoft.com/WebPart/v2\"><Title>New Web Part</Title><FrameType>Default</FrameType><Description>New web part description</Description><IsIncluded>true</IsIncluded><ZoneID>WebPartZone1</ZoneID><PartOrder>1</PartOrder><FrameState>Normal</FrameState><Height /><Width /><AllowRemove>true</AllowRemove><AllowZoneChange>true</AllowZoneChange><AllowMinimize>true</AllowMinimize><AllowConnect>true</AllowConnect><AllowEdit>true</AllowEdit><AllowHide>true</AllowHide><IsVisible>true</IsVisible><DetailLink /><HelpLink /><HelpMode>Modeless</HelpMode><Dir>Default</Dir><PartImageSmall /><MissingAssembly>Cannot import this Web Part.</MissingAssembly><PartImageLarge>/_layouts/15/images/mscontl.gif</PartImageLarge><IsIncludedFilter /><Assembly>Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly><TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName><ContentLink xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\" /><Content xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\"><![CDATA[<div>Hello, world!</div>]]></Content><PartStorage xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\" /></WebPart>").then((result) => {
      console.log("Web part added successfully");
    }).catch((error) => {
      console.log("Error adding web part: " + error);
    });
  }).catch((error) => {
    console.log("Error getting page item: " + error);
  });
}

// 调用函数以添加页面、Web部件区域和Web部件
addPage();
addWebPartZone();
addWebPart();