Share via

使用 SharePoint 佈景主題引擎

  • Article

英文原文已於 2010 年 4 月 10 日星期六發佈

大家好，我是 Kolby，很高興再次與您見面。隨著 SharePoint 2010 發行腳步愈來愈近，我對於 2010 版的一些新增功能也愈發感到興奮。對於 SharePoint 小組在本版中新增的佈景主題功能，我更是萬分的期待。上週當我學會如何使用 SharePoint Designer 2010 設定 CSS 檔案設定主版頁面的佈景主題時，我就覺得一定要讓使用者實地看看這項功能！

佈景主題的功能  

佈景主題引擎必須仰賴 CSS 檔案，可以執行下列作業 (Token 名稱會以 斜體 表示)：

  • 置換色彩，如背景色彩或字型色彩 - ReplaceColor
  • 置換字型 - ReplaceFont
  • 重新著色圖像 (您可以從「濃淡」、「調和」及「填滿」中任選一種) - RecolorImage

您可以透過瀏覽器 UI 選取新增加的網站佈景主題，也可利用 SharePoint Server (SPS) 挑選 12 種色彩與 2 種字型建立新的佈景主題。這些值會儲存在 Microsoft Office 也可使用的標準 THMX 檔案中。此外還可以在 Microsoft PowerPoint 中建立佈景主題，然後將其儲存為 THMX 檔案，以在 SharePoint 中使用。THMX 檔案會儲存在根網站的佈景主題庫中，您可以利用 SPD 或瀏覽器的 [網站設定] > [佈景主題庫] 新增佈景主題。十二種佈景主題色彩會分別以下列 Token 表示：

  • 深色1 (Dark1)、深色2 (Dark2)
  • 淺色1 (Light1)、淺色2 (Light2)
  • 輔色1 (Accent1)、輔色2 (Accent2)、輔色3 (Accent3)、輔色4 (Accent4)、輔色5 (Accent5)、輔色6 (Accent6)
  • 超連結 (Hyperlink)
  • 已瀏覽過的超連結 (Followed Hyperlink)

佈景主題引擎會使用這些色彩，為每一種色彩另外產生 5 種排列，包括最淺 (Lightest)、較淺 (Lighter)、中等 (Medium)、較深 (Darker) 及最深 (Darkest)。若要在 CSS 檔案中參照其中一種排列，請使用下列格式： 色彩-排列 (例如「淺色2-最深 (Light2-Darkest)」)。

語法  

佈景主題引擎必須藉由讀取 CSS 檔案中的註解才能運作。您必須為佈景主題樣式定義預設選項，然後將佈景主題 Token 直接置於該樣式之前。舉例來說，我若想將某個背景色彩元素的佈景主題設為 淺色2-最深 (Light2-Darkest) ，則在 CSS 中必須定義如下：

/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;

在預設的佈景主題中，背景會顯示為 #707070，但在套用佈景主題之後，背景色彩會由淺色2-最深 (Light2-Darkest) 取代。如需如何使用其他 Token 的範例，請參閱本文結尾，或參閱 v4.master 的預設 CSS 檔案 (corev4.css)，該檔案是很好的參考來源。

檔案設定  

若要使用佈景主題功能設定主版頁面，必須執行下列兩項作業：

  1. 將 CSS 檔案置於引擎可以辨識的位置。
  2. 在主版頁面中正確地登錄 CSS 檔案。

位置  

CSS 檔案必須位於正確的位置，才可讓佈景主題引擎據以運作。就我們的自訂而言，我們應使用 RootSite/Style Library/~language/Themable 資料夾。SPS 網站必須啟用 SharePoint Server 發佈功能，此資料夾才會存在。您若是在不具此結構的根網站上工作，即須使用根網站上的 Style Library 資料夾，且其中還必須包含 Themable 資料夾。佈景主題引擎可以辨識 Themable 資料夾的所有內容 (包括子資料夾的內容)。您可以使用 SharePoint Designer 或瀏覽器重新建立此資料夾結構。語言資料夾為選用，但您若是需要針對不同語言建立不同的 CSS 檔案，即需要此資料夾。若為英文，請將資料夾命名為 en-us。

您無需將圖像置於特定位置，但建議使用 RootSite/Style Library/Images 資料夾。

關於重新著色圖像有兩項重點。您要重新著色的圖像若會在多個位置上進行呈現，則所有佈景主題位置皆會套用最後一次所執行的重新著色。例如，我想要在同一張圖像上顯示不同的重新著色方法 (濃淡、調和及填滿)，但卻全都顯示為填滿。我必須將該圖像儲存成幾個複本，然後各自設定不同的佈景主題 (請注意：最後替代方案是利用卸離屬性告知引擎在重新著色圖像時建立新圖像，但是請儘量避免使用此方法，因為在轉譯期間會下載多份圖像而造成效能問題。也因此，我將不就此方法多做說明)。針對圖像叢集 (含有多張圖像的單一檔案)，您可以使用 includeRectangle 參數只重新著色圖像的某些部分 (如需如何執行此作業的範例，請參閱 corev4.css)。

登錄  

若要將佈景主題 CSS 檔案套用至主版頁面，必須登錄 CSS 檔案，而不光只是施以連結。此作業會在套用佈景主題時，將主版頁面指向佈景主題 CSS 檔案。請將下列參數置於主版頁面的 head 標籤中：

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>

After 參數確保將佈景主題的 CSS 檔案套用至 corev4.css 之後的頁面。但是請注意，SharePoint Foundation (SPF) 無法解析 <% $SPUrl Token。在 SPF 中，您必須使用硬式編碼的 URL 指定位置。但您若是希望不同的語言使用不同的 CSS 檔案，將無法執行此作業 (因為您無法使用 ~language Token)。

示範  

到這兒我們應該可以設定我們的 "themable" CSS 檔案。您可以設計外觀精美的主版頁面，然後試用看看。為讓您能夠更了解佈景主題最後所要使用的調色盤，我會在 v4.master 中製作一個大型表格列示所有的色彩排列。此外，我也會提供範例圖像，嘗試不同的重新著色。以下是我利用預設色彩配置製作出的作品外觀 (請注意，我使用白色作為背景色彩樣式的預設設定)。

樣式示範

接下來，我會前往瀏覽器挑選新的網站佈景主題，例如使用慣例 (Convention) 搭配紙草 (Papyrus) 及 Segoe Script 字型。表格的色彩現在變得更鮮豔 (如下所示)。接著我要設定超連結文字與圖像標籤的佈景主題。對於重新著色，我使用了深色2-最淺(Dark2-Lightest) (您會看到深色2-最淺 (Dark2-Lightest) 儲存格及使用填滿方法重新著色之標誌間的完美搭配)。

樣式示範 2

範例程式碼  

以下是我想設定字型、字型色彩及圖像色彩等佈景主題之第二張標誌圖像的 CSS 程式碼片段範例：

/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:black;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;

我於對圖像重新著色的品質著實感到相當驚艷。若是使用得當，SharePoint 佈景主題引擎的確會讓我們這些既重視外觀又重視功能的人龍心大悅 :)

感謝各位撥冗閱讀！希望您和我一樣喜歡新的 SharePoint 佈景主題引擎，也希望這項工具能夠對您有所幫助。

這是翻譯後的部落格文章。英文原文請參閱 Working with the SharePoint Theming Engine