使用 Spfx React-Application-Injectcss 擴展（des 中的鏈接）隱藏一個特定站點上的左側導航

Question

我已經構建並應用了這個擴展 react-application-injectcss（ https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-application-injectcss ），但它適用於所有站點在我的租約中。 我可以對需要應用自定義css/js的特定站點的站點名稱進行硬編碼嗎

我在哪里更改代碼（.ts 文件）？

Answer 1

可以使用這個擴展將js文件注入頁面，判斷js文件中當前頁面的url，然后注入CSS文件。

if ((window.location.href.toLowerCase().indexOf('testfolder') > 0))
    {
    
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = 'https://contoso.sharepoint.com/sites/dev/Doc/testFolder/test.css';
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
    }

擴展注入js文件

Answer 2

我想說的是，從意識形態上講，注入 CSS 來定制你不擁有的東西有點笨拙，而且可能有害。 要自定義站點外觀，您可以使用站點模板。 例如，要“擺脫側邊欄”，您可以創建“交流”網站（沒有側邊欄）而不是“團隊”網站（有）。 就如此容易。

Answer 3

你能告訴我我需要在哪里添加你的代碼 javascript 以通過 url 加載 custom.css 嗎？

if ((window.location.href.toLowerCase().indexOf('testfolder') > 0)) {

    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.href = 'https://contoso.sharepoint.com/sites/dev/Doc/testFolder/test.css';
    link.rel = 'stylesheet';
    link.type = 'text/css';
    head.appendChild(link);
}

感謝您的幫助