使用 SharePoint 佈景主題展現您的風格
英文原文已於 2012 年 10 月 30 日星期二發佈
Lionel Robinson 是 SharePoint 工程小組的程式經理,主要工作為使用者經驗。
SharePoint 2013 的佈景主題讓您更容易大幅變更網站的外觀,使其成為您專屬的網站。您可能會認為 SharePoint 網站的新外觀本來就很棒,為何還要變更?我以自己的親身經驗為例來說明:
在雙胞胎誕生之後,由於車內必須加裝兩個嬰兒座椅,我簡直無法擠進駕駛座。即使在乘客座,我還是得膝蓋抵著儀表板屈身坐下。該是換輛大車的時候了。內人和我一心嚮往開休旅車,因此當我們找到心中理想的廠牌、車型及顏色時,我們對此興奮不已。這輛車不僅能容納全家人,還有許多置物空間。真是太棒了!
或許是心理作祟,但是自從那天起,路上似乎每個人都開相同的車 (金屬淺藍色的 Honda Odyssey)。我發現自己有好幾次在停車場猛按車鑰上的解除鎖定按鈕,結果我的車實際上卻隔著兩個車道。
我們有什麼辦法可以製造出專屬於自己的車輛?省錢的解決方法是在車後保險桿上貼上貼紙或印花。另一種作法則是雇用專人改造車輛,直到您滿意為止。或者如果您夠膽識,也可以自己改造。
某些客戶在使用目前的 SharePoint 網站時遭遇相同的問題。當所有人使用少數幾個相同的範本時,您可能會在十分類似的網站群間迷失自我。您可以忍受與其他網站類似,並希望藉由微小的差異 (保險桿上的貼紙) 與其他網站作區隔,要不然您需要使用 CSS 和 HTML 來自訂網站,但是這麼做可能既繁瑣又耗時。
透過新的 SharePoint 佈景主題功能可解決這些問題。透過此功能,您可以花幾分鐘使用下列四種基本層級來自訂網站:色彩、網站版面配置、字型及背景圖像。藉由變更這些項目,即可取得獨一無二的外觀。
- 在 [開始使用您的網站] (Getting started with your site) 下,按一下 [您的樣式] (What's your style?) 磚 (如果未顯示此磚,您也可以按一下設定功能表上的 [變更外觀] (Change the look),或在 [外觀與風格] (Look and Feel) 標題下的 [網站設定] (Site Settings) 中,找到 [變更外觀] (Change the look))。
- 第一頁展示我們所整合的一些起始設定,目的是為了顯示您可以為網站選擇的外觀與風格。請挑選任何選項開始進行。
- 現在您可以盡情開始。您可以變更上述任何四種層級 (背景、版面配置、色彩及字型),然後立即預覽變更。將您自己的背景圖像拖曳到左上角的矩形中、選取要相符的調色盤、選取所需的網站版面配置,然後選擇最能表達您個性的字型配置。
- 選取完美的選項組合之後,按一下右上角的 [試試看] (Try it out) 在您自己的網站上進行預覽。
- 這裡是神奇之處!我們複製您網站的 CSS (定義外觀和格式的檔案),但是將其變更為新的色彩和圖像。您可以在檢視後決定保留或重試。
我們加入了一組偏好的調色盤和字型。不過您永遠可以新增自己的組合,只要具備慣用的文字編輯器即可。至此的技術難度將略為增加 (如果您熟悉 SharePoint 2010 的佈景主題,則比其他人佔優勢)。主要的差異在於我們不再使用 THMX 檔案格式,而是建立一組新的簡單 XML 格式來描述佈景主題選項:SPColor 檔案描述調色盤,而 SPFont 檔案描述字型配置。建立您自己的調色盤和字型配置的最簡單作法,是一開始在小組網站中使用預設值。請瀏覽至網站集合的根網站,然後按一下設定功能表中的 [網站設定] (Site Settings),再按一下 [佈景主題庫] (Theme Gallery)。您將在名為 15 的資料夾中找到調色盤和字型配置。
針對每個可用配色,所有 SPColor 檔案都包含以十六進位定義色彩值的簡單 XML。如果您知道所要變更的配色,只要寫入新值並將檔案複本儲存到佈景主題庫的相同資料夾即可 (如果開啟版本設定或發佈,請務必存回並發佈檔案)。現在即可使用佈景設定功能之色彩選擇器中的新調色盤 (稍早所述的步驟 3)。
以下是 SPColor 檔案的程式碼片段。本版還新增搭配色彩指定不透明度值的功能。您可以使用 8 位數十六進位值完成這項操作,其中前兩位數表示不透明度,後面接著表示紅、綠及藍色值的傳統 6 位數。
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="444444" />
<s:color name="SubtleBodyText" value="777777" />
<s:color name="StrongBodyText" value="262626" />
<s:color name="DisabledText" value="B1B1B1" />
<s:color name="SiteTitle" value="262626" />
<s:color name="WebPartHeading" value="444444" />
<s:color name="ErrorText" value="BF0000" />
<s:color name="AccentText" value="0072C6" />
<s:color name="SearchURL" value="338200" />
<s:color name="Hyperlink" value="0072C6" />
<s:color name="BackgroundOverlay" value="D8FFFFFF" />
...
</s:colorPalette>
字型可以為網站增添許多個性。SharePoint 佈景主題其中一項最令人興奮的功能便是支援網頁字型。在本功能之前,您必須選擇相同的舊有 8-10 種網頁安全字型 (所有裝置幾乎預設都會安裝的字型,例如 Arial、Times New Roman 及 Georgia)。有了網頁字型,您可以選取網際網路上提供的各種豐富字型,網頁瀏覽器會下載必要的檔案以及網頁的其餘部分。
類似用於調色盤的 SPColor 檔案,SPFont 檔案定義各種可用配字所使用的字型。自訂字型配置的最簡單作法是從目前可用的一個字型配置開始,然後視需要進行調整。SharePoint 支援多種語言和指令碼,並支援字型主題設定。針對每種配字,您應該在每個指令碼中定義所要使用的字型。若是網頁安全字型,只要在每種配字的字體屬性中加入名稱即可。如果您想指定網頁字型,則必須以四種字型格式提供網頁字型檔案的 URL (以取得跨瀏覽器支援),並提供大小縮圖以用來轉譯字型選擇器中的字型名稱 (請參閱稍早所述的步驟 3)。
<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Impact"
eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"
woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"
ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"
svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"
largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"
smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />
...
<s:font script="Arab" typeface="Segoe UI Light" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI Light" />
...
</s:fontSlot>
<s:fontSlot name="navigation">
<s:latin typeface="Segoe UI" />
...
<s:font script="Arab" typeface="Segoe UI" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI" />
...
</s:fontSlot>
...
</s:fontSlots>
</s:fontScheme>
[複合外觀] (Composed looks) 是設定佈景主題的第一個步驟所顯示的起點。您可以新增使用自訂調色盤和字型配置的複合外觀。這是儲存一系列設計並隨時套用的絕佳方式。您可以在 [網站設定] (Site Settings) 的 [網站設計工具圖庫] (Web Designer Galleries) 下找到複合外觀的清單。您可以管理一組現有的複合外觀,也可以新增複合外觀。若要新增複合外觀,只要新增清單項目,然後填入主版頁面、SPColor 檔案、背景圖像 (選用) 及 SPFont 檔案 (選用) 的名稱、標題及 URL 即可。新增清單項目之後,即會新增複合外觀的預覽作為「變更外觀」(Change the look) 頁面上的起點。
您不妨放手一試!建立外觀亮眼的網站,展現您小組的個性,並使其真正成為獨一無二。要是我也能對休旅車這麼做就好了。
這是翻譯後的部落格文章。英文原文請參閱 Show Off Your Style with SharePoint Theming