使用 SharePoint 佈景主題展現您的風格

  • Article

英文原文已於 2012 年 10 月 30 日星期二發佈

Lionel Robinson 是 SharePoint 工程小組的程式經理，主要工作為使用者經驗。

SharePoint 2013 的佈景主題讓您更容易大幅變更網站的外觀，使其成為您專屬的網站。您可能會認為 SharePoint 網站的新外觀本來就很棒，為何還要變更？我以自己的親身經驗為例來說明：

在雙胞胎誕生之後，由於車內必須加裝兩個嬰兒座椅，我簡直無法擠進駕駛座。即使在乘客座，我還是得膝蓋抵著儀表板屈身坐下。該是換輛大車的時候了。內人和我一心嚮往開休旅車，因此當我們找到心中理想的廠牌、車型及顏色時，我們對此興奮不已。這輛車不僅能容納全家人，還有許多置物空間。真是太棒了！

或許是心理作祟，但是自從那天起，路上似乎每個人都開相同的車 (金屬淺藍色的 Honda Odyssey)。我發現自己有好幾次在停車場猛按車鑰上的解除鎖定按鈕，結果我的車實際上卻隔著兩個車道。

我們有什麼辦法可以製造出專屬於自己的車輛？省錢的解決方法是在車後保險桿上貼上貼紙或印花。另一種作法則是雇用專人改造車輛，直到您滿意為止。或者如果您夠膽識，也可以自己改造。

某些客戶在使用目前的 SharePoint 網站時遭遇相同的問題。當所有人使用少數幾個相同的範本時，您可能會在十分類似的網站群間迷失自我。您可以忍受與其他網站類似，並希望藉由微小的差異 (保險桿上的貼紙) 與其他網站作區隔，要不然您需要使用 CSS 和 HTML 來自訂網站，但是這麼做可能既繁瑣又耗時。

透過新的 SharePoint 佈景主題功能可解決這些問題。透過此功能，您可以花幾分鐘使用下列四種基本層級來自訂網站：色彩、網站版面配置、字型及背景圖像。藉由變更這些項目，即可取得獨一無二的外觀。

快速逐步解說

  1. 在 [開始使用您的網站] (Getting started with your site) 下，按一下 [您的樣式] (What's your style?) 磚 (如果未顯示此磚，您也可以按一下設定功能表上的 [變更外觀] (Change the look)，或在 [外觀與風格] (Look and Feel) 標題下的 [網站設定] (Site Settings) 中，找到 [變更外觀] (Change the look))。
  2. 第一頁展示我們所整合的一些起始設定，目的是為了顯示您可以為網站選擇的外觀與風格。請挑選任何選項開始進行。
     
  3. 現在您可以盡情開始。您可以變更上述任何四種層級 (背景、版面配置、色彩及字型)，然後立即預覽變更。將您自己的背景圖像拖曳到左上角的矩形中、選取要相符的調色盤、選取所需的網站版面配置，然後選擇最能表達您個性的字型配置。
  4. 選取完美的選項組合之後，按一下右上角的 [試試看] (Try it out) 在您自己的網站上進行預覽。
  5. 這裡是神奇之處！我們複製您網站的 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