如何为SharePoint Online现代站点页面创建自定义分区布局选项？

SharePoint官方推荐用**SharePoint Framework（SPFx）**开发自定义分区布局，以下是具体实现步骤：

1. 搭建开发环境 #

• 安装Node.js（LTS版本）、Yeoman和SharePoint项目生成器：

  npm install -g yo @microsoft/generator-sharepoint
  

• 运行yo @microsoft/sharepoint验证环境是否配置成功

2. 创建SPFx Web部件项目 #

• 执行yo @microsoft/sharepoint，按向导选择：
  • 项目类型选「Web Part」
  • 填写项目名称、Web部件名称及描述
  • 框架优先选React（适合复杂布局开发）
• 进入项目目录，用VS Code打开开始开发

3. 编写自定义布局结构 #

以React框架为例：

• 在src/webparts/[你的部件名]/components/[你的部件名].tsx中编写布局的JSX结构，比如三列布局：

  import * as React from 'react';
  import styles from './CustomLayout.module.scss';
  
  export interface ICustomLayoutProps {
    columnRatio: string; // 用于接收配置的列比例参数
  }
  
  export default class CustomLayout extends React.Component<ICustomLayoutProps, {}> {
    public render(): React.ReactElement<ICustomLayoutProps> {
      // 根据配置动态设置网格列宽
      const gridTemplate = this.props.columnRatio === '30-40-30' 
        ? '30% 40% 30%' 
        : '20% 60% 20%';
  
      return (
        <div className={styles.customLayout} style={{ gridTemplateColumns: gridTemplate }}>
          <div className={styles.column}>左侧分区</div>
          <div className={styles.column}>中间分区</div>
          <div className={styles.column}>右侧分区</div>
        </div>
      );
    }
  }
  

• 在CustomLayout.module.scss中定义基础样式：

  .customLayout {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
  }
  
  .column {
    padding: 1rem;
    border: 1px solid #eaeaea;
    border-radius: 4px;
  }
  

4. 添加可配置属性（可选） #

让用户能在页面编辑时调整布局参数：

• 在src/webparts/[你的部件名]/[你的部件名].webpart.ts中添加属性面板配置：

  import { IPropertyPaneConfiguration, PropertyPaneDropdown } from '@microsoft/sp-property-pane';
  
  // ...
  
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: { description: '布局配置' },
          groups: [
            {
              groupName: '列宽比例',
              groupFields: [
                PropertyPaneDropdown('columnRatio', {
                  label: '选择列比例',
                  options: [
                    { key: '20-60-20', text: '20%-60%-20%' },
                    { key: '30-40-30', text: '30%-40%-30%' }
                  ]
                })
              ]
            }
          ]
        }
      ]
    };
  }
  

5. 打包部署 #

• 执行打包命令：

  gulp bundle --ship
  gulp package-solution --ship
  

• 生成的.sppkg包位于sharepoint/solution目录下
• 登录SharePoint管理中心，进入「应用程序目录」上传并部署该包
• 在目标站点的「网站内容」中添加此应用

6. 应用自定义布局 #

• 编辑SharePoint页面，点击「添加部件」，在「已部署的应用」分类中找到你的自定义布局部件
• 添加后可通过属性面板调整参数，保存页面即可生效

经典站点自定义布局（补充） #

如果是SharePoint经典站点，可通过SharePoint Designer实现：

• 用SharePoint Designer打开目标站点，进入「页面布局」库
• 复制一个现有布局模板，修改其HTML结构，添加自定义分区
• 保存并发布后，新建页面时即可选择该自定义布局

内容的提问来源于stack exchange，提问作者user20404265