定制 SharePoint 框架：打造独特的用户体验

前端

2024-02-09 14:16:58

掌控用户体验，定制 SharePoint

SharePoint 是一个强大的协作平台，但有时默认的用户界面会限制您对网站外观和感觉的控制。通过 SharePoint 框架 (SPFx) 扩展应用程序自定义器，您可以轻松修改页眉和页脚，为您的用户创造独特而引人入胜的体验。

揭开 SPFx 应用程序自定义器的奥秘

SPFx 应用程序自定义器是一种强大的工具，它允许您向 SharePoint 页面添加自定义代码。通过扩展应用程序自定义器，您可以修改页面的页眉和页脚，而不影响核心 SharePoint 体验。

分步指南：打造您的第一个 SPFx 应用程序自定义器扩展

创建 SPFx 应用程序自定义器

使用 Yeoman 生成器或 Visual Studio Code 脚手架创建一个新的 SPFx 应用程序自定义器。

修改页眉和页脚

在 ./src/extensions/applicationCustomizer/ApplicationCustomizer.ts 文件中，添加以下代码以修改页眉和页脚：

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from '@microsoft/sp-application-base';

const log: Log = Log.getLogger('ApplicationCustomizer');

export default class ApplicationCustomizer extends BaseApplicationCustomizer<void> {
  @override
  public onInit(): Promise<void> {
    log.info('ApplicationCustomizer initialized');

    // 修改页眉
    const pageHeader: PlaceholderContent = {
      type: PlaceholderName.Top,
      items: [
        {
          componentId: 'header-customization',
          data: {
            htmlCode: '<h1>自定义页眉</h1>'
          }
        }
      ]
    };

    // 修改页脚
    const pageFooter: PlaceholderContent = {
      type: PlaceholderName.Bottom,
      items: [
        {
          componentId: 'footer-customization',
          data: {
            htmlCode: '<p>自定义页脚</p>'
          }
        }
      ]
    };

    this.context.placeholderProvider.changedEvent.add(
      this,
      (placeholders: Array<PlaceholderContent>) => {
        placeholders.forEach((placeholder: PlaceholderContent) => {
          if (placeholder.type === PlaceholderName.Top) {
            placeholder.items.unshift(pageHeader.items[0]);
          } else if (placeholder.type === PlaceholderName.Bottom) {
            placeholder.items.push(pageFooter.items[0]);
          }
        });
      }
    );
    return Promise.resolve();
  }
}