问题描述
我正在开发一个 SharePoint 在线现代团队网站，我正在按照以下步骤在我的页面 @ https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/ 中注入自定义 CSS .. 现在它运行良好，我将它添加到我的 {{1} } 文件：-
.ts以及 import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
BaseApplicationCustomizer
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';
import * as strings from 'StartApplicationCustomizerStrings';
const LOG_SOURCE: string = 'StartApplicationCustomizer';
/**
* If your command set uses the ClientSideComponentProperties JSON input,* it will be deserialized into the BaseExtension.properties object.
* You can define an interface to describe it.
*/
export interface IStartApplicationCustomizerProperties {
// This is an example; replace with your own property
cssurl: string;
}
/** A Custom Action which can be run during execution of a Client Side Application */
export default class StartApplicationCustomizer
extends BaseApplicationCustomizer<IStartApplicationCustomizerProperties> {
@override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE,`Initialized ${strings.Title}`);
const cssUrl: string = this.properties.cssurl;
if (cssUrl) {
// inject the style sheet
const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
let customStyle: HTMLLinkElement = document.createElement("link");
customStyle.href = cssUrl;
customStyle.rel = "stylesheet";
customStyle.type = "text/css";
head.insertAdjacentElement("beforeEnd",customStyle);
}
return Promise.resolve();
}
}
中的以下内容：-
elements.xml现在它在所有页面上都运行良好 >> 但我不确定如何修改我的 SPFX 以执行以下操作：-
- 仅在网站主页上运行扩展程序？
这可能吗？谢谢
解决方法
这个例子不完整，因为 applicationcustomizer 有两个部分，你可以使用：
- 顶部占位符
- 底部占位符
查看更复杂的示例以了解其工作原理here。
因此，当您添加 applicationcustomizer 时，它将应用于站点上的所有页面。但是如果你想自定义一个页面，你应该使用 webpart，而不是定制器。但是如果你仍然想通过applicationcustomizer改变一些css，你可以检查window.location。但是你必须明白applicationcustomizer是在页面登录到浏览器时加载的，当你在同一个站点上从一个页面到另一个页面时，这个事件不会调用重新加载应用程序定制器。
就我而言，我将站点菜单重写为自定义。因此，当用户单击带有指向某个站点页面的链接的菜单项时，不会重新加载菜单。而在您的情况下，当您在一个页面上添加一些 css 时，它会在用户打开后应用于另一个页面。