建立入口網站品牌

文章
07/02/2024

適用於： SQL Server 2016 (13.x) Reporting Services 與更新版本 Power BI 報表伺服器

您可以在入口網站上打造企業品牌形象 (透過品牌套件)，藉以變更入口網站的外觀。品牌套件經過設計，您不需要具備深度階層式樣式表 (CSS) 的知識就能加以建立。

建立品牌套件

Reporting Services 的品牌封裝包含三個項目且會封裝為 zip 檔案。這些檔案必須具有下列名稱：

colors.json
metadata.xml
logo.png (選擇性)

將這些檔案封裝成 zip 檔案。不過您可以隨意命名 zip 檔案。

metadata.xml

Metadata.xml 檔案可讓您設定品牌封裝的名稱，並擁有對 colors.json 和 logo.png 檔案的參考項目。

若要變更品牌封裝的名稱，請變更 SystemResourcePackage 項目的 name 屬性。

    name="Multicolored example brand"

您可以選擇性地在品牌封裝中包含標誌圖片。此項目會列於 Contents 項目中。

不使用商標檔案的範例：

<Contents>
    <Item key="colors" path="colors.json" />
</Contents>

使用商標檔案的範例：

<Contents>
    <Item key="colors" path="colors.json" />
    <Item key="logo" path="logo.png" />
</Contents>

colors.json

上傳品牌套件時，伺服器會從 colors.json 檔案擷取適當的名稱/值對，並將其與主要的 LESS 樣式表 (brand.less) 合併。系統接著會處理這個 LESS 檔案，並將產生的 CSS 檔案提供給用戶端。樣式表中的所有色彩都會遵循色彩的六個字元的十六進位表示法。

LESS 樣式表所包含的區塊會參考某些預先定義的 LESS 變數，如下範例所示。

/* primary buttons */
.btn-primary {
    color:@primaryButtonColor;
    background-color:@primaryButtonBg;
}

儘管此語法類似於 CSS，但色彩值 (以 @symbol 作為首碼) 對 LESS 是唯一的。 json 檔案會設定這些變數。

例如，如果 colors.json 檔案具有下列值：

"primary":"#009900",
"primaryContrast":"#ffffff"

已處理的輸出會查閱 @primaryButtonBg LESS 變數，且會看見它對應到名為 primary的 json 屬性，在此範例中是 #009900。因此，其就能輸出正確的 CSS：

    .btn-primary {
        color:#ffffff;
        background-color:#009900;
    }

所有的主要按鈕都會呈現深綠色以及白色文字。

適用於 Reporting Services 的 colors.json 檔案有兩個主要類別 (其中的項目已分組)：

介面包含 Reporting Services 入口網站特有的項目。
佈景主題包含您所建立的行動報表特有的項目。

此介面區段分成下列群組：

區段	描述
Primary	按鈕和暫留色彩。
次要	標題列、搜尋列、左邊功能表 (如果顯示) 及那些項目的文字色彩。
主要中性色彩	首頁和報表區域背景。
次要中性色彩	文字方塊和資料夾選項背景，以及設定功能表。
第三個中性色彩	站台設定背景。
危險/警告/成功訊息	適用於這些訊息的色彩。
KPI	將色彩控制為良好 (1)、中性 (0)、中性 (-1) 和無。

當您第一次使用行動報表發行工具 (其中已部署品牌套件) 連線到伺服器時，佈景主題隨即新增至可用佈景主題，您可透過應用程式右上方的功能表使用。

[選擇調色盤] 對話方塊的螢幕擷取畫面。

接著可針對您建立的任何行動報表使用該佈景主題，即使它們不在您已部署該佈景主題的同一部伺服器上。

使用標誌

如果您在品牌套件中包含標誌，則其會出現在入口網站中，來取代您在 [站台設定] 功能表中針對入口網站所設定的名稱。

您針對標誌所納入的檔案必須使用 PNG 檔案格式。檔案維度會在上傳至伺服器之後加以調整。主題應該會調整為大約 290 像素 x 60 像素。

將品牌套件套用至入口網站

若要新增、下載或移除品牌套件：

選取右上方的齒輪。
選取 [站台設定] 。
選取 [建立品牌] 。下圖顯示以下元素：
- [目前安裝的品牌套件] 會顯示已上傳的套件名稱，或顯示 [無]。
- [上傳品牌套件] 會提示您從本機資料夾選取 ZIP 檔案，然後將套件套用至入口網站。套件會立即生效。
- 您也可以下載或移除封裝。移除套件時，會立即將入口網站重設為預設品牌。

metadata.xml 範例

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
    <Contents>
        <Item key="colors" path="colors.json" />
        <Item key="logo" path="logo.png" />
    </Contents>
</SystemResourcePackage>

colors.json 範例

{
    "name":"Multicolored example brand",
    "version":"1.0",
    "interface":{
        "primary":"#b31e1e",
        "primaryAlt":"#ca0806",
        "primaryAlt2":"#621013",
        "primaryAlt3":"#e40000",
        "primaryAlt4":"#e14e50",
        "primaryContrast":"#fff",

        "secondary":"#042200",
        "secondaryAlt":"#0f4400",
        "secondaryAlt2":"#155500",
        "secondaryAlt3":"#217700",
        "secondaryContrast":"#49e63c",

        "neutralPrimary":"#d8edff",
        "neutralPrimaryAlt":"#c9e6ff",
        "neutralPrimaryAlt2":"#aedaff",
        "neutralPrimaryAlt3":"#88c8ff",
        "neutralPrimaryContrast":"#0a2b4c",

        "neutralSecondary":"#e9d8eb",
        "neutralSecondaryAlt":"#d9badc",
        "neutralSecondaryAlt2":"#b06cb5",
        "neutralSecondaryAlt3":"#a75bac",
        "neutralSecondaryContrast":"#250a26",

        "neutralTertiary":"#f79220",
        "neutralTertiaryAlt":"#f8a54b",
        "neutralTertiaryAlt2":"#facc9b",
        "neutralTertiaryAlt3":"#fce3c7",
        "neutralTertiaryContrast":"#391d00",

        "danger":"#ff0000",
        "success":"#00ff00",
        "warning":"#ff8800",
        "info":"#00ff",
        "dangerContrast":"#fff",
        "successContrast":"#fff",
        "warningContrast":"#fff",
        "infoContrast":"#fff",

        "kpiGood":"#4fb443",
        "kpiBad":"#de061a",
        "kpiNeutral":"#d9b42c",
        "kpiNone":"#333",
        "kpiGoodContrast":"#fff",
        "kpiBadContrast":"#fff",
        "kpiNeutralContrast":"#fff",
        "kpiNoneContrast":"#fff",
        
        "itemTypeIconColor":"#ffffff",
        "reportIconBackground":"#12239e",
        "excelIconBackground":"#217346",
        "folderIconBackground":"#4668c5",
        "datasetIconBackground":"#c94f0f",
        "otherIconBackground":"#000000", 
        
        "primaryButton": "#bb2124",
        "primaryButtonHover": "#d31115",
        "primaryButtonPressed": "#3d0000", 
        
        "link": "#d31115",
        "linkHover": "#671215",
        "linkVisited": "#3d0000", 
        
        "radioButtonCheckBox": "#bb2124",
        "radioButtonCheckBoxHover": "#d31115"
        },
        "theme":{
        "dataPoints":[
            "#0072c6",
            "#f68c1f",
            "#269657",
            "#dd5900",
            "#5b3573",
            "#22bdef",
            "#b4009e",
            "#008274",
            "#fdc336",
            "#ea3c00",
            "#00188f",
            "#9f9f9f"
        ],  

        "good":"#85ba00",
        "bad":"#e90000",
        "neutral":"#edb327",
        "none":"#333",

        "background":"#fff",
        "foreground":"#222",
        "mapBase":"#00aeef",
        "panelBackground":"#f6f6f6",
        "panelForeground":"#222",
        "panelAccent":"#00aeef",
        "tableAccent":"#00aeef",

        "altBackground":"#f6f6f6",
        "altForeground":"#000",
        "altMapBase":"#f68c1f",
        "altPanelBackground":"#235378",
        "altPanelForeground":"#fff",
        "altPanelAccent":"#fdc336",
        "altTableAccent":"#fdc336"
    }
}

下載範例商標套件

從 GitHub 範例商標套件 (英文) 網站，將範例下載到本機資料夾。如需詳細資訊，請參閱本文中的＜將品牌套件套用至入口網站＞一節。

更多問題嗎？嘗試在 Reporting Services 論壇提問。

分享方式：

建立入口網站品牌

建立品牌套件

metadata.xml

colors.json

使用標誌

將品牌套件套用至入口網站

metadata.xml 範例

colors.json 範例

下載範例商標套件

意見反映

意見反映

更多資源

分享方式：

建立入口網站品牌

建立品牌套件

metadata.xml

colors.json

使用標誌

將品牌套件套用至入口網站

metadata.xml 範例

colors.json 範例

下載範例商標套件

相關內容

意見反映

意見反映

更多資源