如何解决将我的 SharePoint 框架扩展修改为仅在网站主页上运行
我正在开发一个 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 时,它会在用户打开后应用于另一个页面。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。