打造 Web 门户的品牌

适用于： SQL Server 2016 (13.x) Reporting Services 及更高版本 Power BI 报表服务器

了解如何自定义 SQL Server Reporting Services (SSRS) 或 Power BI 报表服务器 Web 门户，以符合企业的品牌形象。 通过使用上传的品牌包，可以更改 Web 门户上的颜色、徽标和其他样式元素。 品牌包由打包为 zip 文件的三个项目组成。 以下部分介绍品牌包中的各项，并提供内容示例。

先决条件

• SQL Server Reporting Services (SSRS) 或 Power BI 报表服务器已安装且已配置。
• Reporting Services Web 门户的访问权限。
• 与报表服务器数据库的连接。

创建品牌包

要创建品牌包，可以使用从头开始创建文件，也可以从 GitHub 网站下载示例。

如果从头开始，请首先创建每个文件并按如下方式命名品牌包中的文件：

• metadata.xml
• colors.json
• logo.png（可选文件）

你可以根据喜好命名 zip 文件。

如果选择使用示例品牌包，请下载 zip 文件并提取文件，以便你可以根据需要对其进行编辑。

定义品牌元数据 (metadata.xml)

metadata.xml 文件指定品牌包的名称，并引用 colors.json 和 logo.png 文件。

若要更改品牌包的名称，请更改 SystemResourcePackage 元素的 name 属性。

<?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"
    >
</SystemResourcePackage>

你还可以在品牌包中包含一个徽标。 此项包含在 Contents 元素中。

以下示例不包含徽标文件：

<?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" />
    </Contents>
</SystemResourcePackage>

以下示例包含徽标文件：

<?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)

colors.json 文件定义品牌包的配色方案。 当你上传品牌包时，服务器会从此文件中提取名称/值对，并将其与主 LESS 样式表 brand.less 合并。 它处理样式表，并向客户端提供生成的 CSS 文件。 样式表中的所有颜色都遵循六个字符的颜色十六进制表示形式。

下面是 colors.json 文件的示例：

{
    "name": "Multicolored example brand",
    "version": "1.0",
    "interface": {
        "primary": "#009900",
        "primaryContrast": "#ffffff",
        "secondary": "#042200",
        "neutralPrimary": "#d8edff",
        "neutralSecondary": "#e9d8eb",
        "danger": "#ff0000",
        "success": "#00ff00",
        "warning": "#ff8800"
    },
    "theme": {
        "dataPoints": ["#0072c6", "#f68c1f", "#269657"],
        "good": "#85ba00",
        "bad": "#e90000",
        "neutral": "#edb327"
    }
}

LESS 变量工作原理

LESS 样式表中包含了引用预定义 LESS 变量的块。 以下示例演示样式表如何使用 LESS 变量：

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

此语法与 CSS 类似，带有 @ 符号前缀的颜色值对 LESS 而言是唯一的。 colors.json 文件将设置这些变量。

例如，colors.json 文件可能包含以下值：

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

处理后，LESS 变量将映射到 colors.json 文件中的相应值。 生成的 CSS 与以下示例类似：

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

所有主要按钮呈深绿色，而文本呈白色。

colors.json 中的对象

colors.json 文件包含两个主要对象：

• 界面：Web 门户特定的属性。
• 主题：你创建的移动报表的特定属性。

interface 对象细分为以下属性：

部分	说明
主	按钮和悬停颜色。
辅助副本	标题栏、搜索栏、左侧菜单（如果显示）以及这些项的文本颜色。
中性第一级	主区域和报表区域背景。
中性第二级	文本框和文件夹选项背景，以及设置菜单。
中性第三级	站点设置背景。
危险/警告/成功消息	这些消息的颜色。
KPI	对好 (1)，中 (0)，中 (-1) 和无的颜色进行控制。

theme 对象细分为以下属性：

部分	说明
数据点	图表和可视化效果中数据点的颜色。
正常/错误/中性	指示状态的颜色。
背景	总体背景色。
前景	总体前景色。
地图基色	地图的基本颜色。
面板背景/前景/主题色	面板的颜色。
表格主题色	表格的主题色。

首次连接到具有部署了品牌包的移动报表发布服务器时，发布者会将主题添加到可用主题列表中。

然后你就可以对所创建的任何移动报表使用该主题，即使报表不适用于已在其上部署主题的同一服务器。

使用徽标 (logo.png)

如果包含了带品牌包的徽标，徽标将在 Web 门户中显示，并替代你最初为 Web 门户设置的名称。

确保徽标采用 PNG 文件格式。 上传到服务器后文件大小可缩放。 徽标缩放为约 290 x 60 像素。

将品牌包应用于 Web 门户

1. 访问 Web 门户。

2. 选择右上角的齿轮图标，然后选择“站点设置”。

   

3. 选择“品牌” 。

   

   “当前已安装的品牌包”会显示已上传包的名称，或者显示“无”。

4. 选择“ 上传品牌包”。 品牌包将上传到报表服务器，Web 门户会立即呈现更新后的品牌。

下载或删除品牌包

如果看到“当前已安装的品牌包”框中列出的品牌包，可以选择下载或删除该包。 如果要调整现有包并应用这些更改，可能需要下载包。 如果删除包，Web 门户会立即重置为默认品牌。 根据要执行的操作，选择“下载”或“删除”。

更多问题？ 尝试在 Reporting Services 论坛提问。