SharePoint Online 客制化開發(fā)：如何使用CS

一般情況下公司為了某個團隊或者公司內(nèi)部共享數(shù)據(jù)等用途來更改網(wǎng)站的樣式，打造獨特的品牌樣式，很多研發(fā)工程師給定的解決方案是為他們的站點構(gòu)建自定義主頁，雖然SharePoint Designer是一個強大的工具，但這里我不推薦使用SharePoint Designer 這樣的工具來更改頁面的代碼，因為更改母版頁會導(dǎo)致更新和補丁的問題，通常主頁的更改會阻止更新網(wǎng)站之間的連通性，這意味著Site Collection管理員要做大量的額外工作來查找和修復(fù)block問題，浪費了時間和額外的費用，而且也會妨礙SharePoint開發(fā)新功能時發(fā)布新功能。

對于更改網(wǎng)站主題或者Logo，微軟推薦使用SharePoint自帶的onboard tools，可以選擇預(yù)先配置好的主題模板，包括顏色面板，字體甚至背景圖像，你可以根據(jù)自己的需求靈活性來修改它，你也可以創(chuàng)建自定義主題或者自己的字體，并將它們添加到你的網(wǎng)站，使用Onboard tools或者主題的真正好處是不會干擾SharePoint的更新。

如果你想對你的網(wǎng)站進行更多的微調(diào)，你可以創(chuàng)建一個自定義的CSS樣式表，使用CSS，你可以更改站點元素的屬性，而不是像更改新母版頁那樣更改基礎(chǔ)頁面代碼，你甚至也可以使用JavaScript在頁面級更改CSS元素并在你的站點中使用它們，但使用CSS可能存在一點風(fēng)險，因為你不能保證SharePoint更新時不會更改元素名稱，但仍舊比使用SharePoint Designer更改母版頁安全得多。

所以針對修改主題和Logo，推薦的方案是：

• 使用內(nèi)置的工具
• 使用預(yù)構(gòu)建的主題
• 構(gòu)建自定義主題
• 使用CSS
• 使用客制化母版頁更改，但要承擔(dān)額外的開發(fā)工作來保證你的網(wǎng)站更新

接下來我將為大家介紹一下如何新建和上傳一個CSS樣式表，可能有些會問為什么要使用CSS呢？

CSS是一種更安全、更靈活的選擇，可以替代Microsoft提供的其他自定義方法。CSS可以讓你對網(wǎng)站的各個元素進行風(fēng)格控制，我見過一些人通過在所有頁面中插入空白內(nèi)容區(qū)域，然后使用內(nèi)聯(lián)樣式手動更新每個頁面的HTML代碼來設(shè)計他們的網(wǎng)站，雖然可以這樣操作，但比用CSS重新定義一個已存在的元素標(biāo)簽要復(fù)雜得多。使用CSS允許你在整個網(wǎng)站范圍內(nèi)應(yīng)用更改，并有助于確保一致性，盡管對new feature的支持可能略有不同，但CSS是一種廣泛使用的樣式方法，適用于所有瀏覽器和所有平臺，使用CSS，你只需要更改元素的屬性，而不是底層的頁面代碼，而且它是免費的，不需要任何License，同時它也不需要系統(tǒng)管理員的干預(yù)，只需要激活Site Collection的Publishing Feature就可以了。

現(xiàn)在，讓我們開始準(zhǔn)備修改我們的網(wǎng)站：

第一步是創(chuàng)建一個新的空白樣式表并加載到我們的SharePoint 站點中。

現(xiàn)在你可以使用任何文本編輯器應(yīng)用程序來創(chuàng)建樣式表，比如Windows記事本，因為你不能上傳一個空文件到SharePoint中，所以我必須在這里放一些占位符文本，然后保存為modified_style.css文件，然后存儲在網(wǎng)站中的assets Library中。

第二步是將StyleSheet關(guān)聯(lián)你的網(wǎng)站。

我們需要網(wǎng)站引用我們新上傳的樣式表,在激活Site Collection的Publishing Feature之后，在網(wǎng)站集Setting->Site Master Page Settings頁面Alternate CSS URL引用新上傳的樣式表。

第三步：通過編輯我們上傳的StyleSheet對網(wǎng)站進行實時修改。

雖然Chrome是我個人最常用的瀏覽器，但在更新CSS時推薦使用IE或者Micrsoft Edge瀏覽器，因為經(jīng)常需要手動更新Cache來顯示我的更改，現(xiàn)在我們點擊并以文本形式打開樣式表來編輯一下網(wǎng)站的背景顏色：黑色。

示例代碼：

/css/
body {
background-color: black;
}

保存modified_style.css即可。