适用于嵌入式信息中心、Look 和探索的主题

您可以在管理面板的平台部分中的主题页面上定义主题。您可以使用自定义主题来自定义嵌入式信息中心、Look 和 Explore 的字体系列、文本颜色、背景颜色、按钮颜色、平铺颜色和其他视觉元素,以及嵌入式信息中心内平铺和对话式分析界面的编辑窗口。

本页面介绍以下内容:

如需了解如何为信息中心和探索设置默认主题,或如何将主题应用于特定信息中心或探索,请参阅嵌入功能使用入门 - 应用自定义主题文档页面。

使用嵌入式主题的实例要求

请注意,在 Looker 实例上管理嵌入式主题时,需要满足以下要求:

  • 如果您的实例是 Looker(原始版本)实例,则必须由 Looker 启用可让您为嵌入式信息中心、Look 和探索自定义主题的功能。如需更新此功能的许可,请与 Google Cloud 销售专员联系。
  • 如果您的实例是 Looker (Google Cloud Core) 实例,则嵌入式主题适用于企业版和嵌入式 版本,但不适用于标准版。
  • Looker 用户必须具有管理员角色或包含 manage_themes 权限的角色。

主题页面简介

您可以在管理员面板的平台部分中的主题页面上管理实例的主题。

如果您的实例已启用内部信息中心主题 预览版功能,则主题页面会显示内部和嵌入标签页,分别用于管理 Looker 信息中心和嵌入式内容的主题。

默认主题

Looker 默认主题会在您的实例上自动创建,无法删除或修改。除非 Looker 管理员指定其他主题作为默认主题,否则系统会使用 Looker 主题作为默认主题。

Looker 主题设置(您可以通过选择主题旁边的查看按钮或创建主题的副本来查看)分为以下几个部分:

主题

设置名称 值
名称 Looker

常规

本部分中的设置适用于嵌入式信息中心、嵌入式探索和对话式分析界面。

设置名称 值 备注
按键颜色 #1A73E8 信息中心会为主要按钮和过滤条件控件使用此颜色。

探索会为主要按钮、横幅和强调内容使用此颜色。
文本颜色 #3e3f40
背景颜色 #f6f8fa
字体系列 Roboto、Noto Sans JP、Noto Sans CJK KR、Noto Sans Arabic UI、Noto Sans Devanagari UI、Noto Sans Hebrew、Noto Sans Thai UI、Helvetica、Arial、sans-serif 这些字体由 Looker 应用提供,建议使用这些字体,因为它们在浏览器中和图片渲染时都可用。Looker 会使用字体系列列表中支持某个字符的第一个字体,因此应先列出优先级较高或专门的字体。Looker 会使用字体的“界面”变体(如果可用),以便对字符进行细微修改,从而更好地适应视觉组件的边界。
字体来源 无

信息中心页面

设置名称 值
颜色集合 无
标题字号 None
上外边距 None
下外边距 None
左右外边距 None

信息中心板块

设置名称 值
标题颜色 #3a4245
文本颜色 #3a4245
文本正文颜色 无
背景颜色 #ffffff
文本背景颜色 None
标题对齐 居中
标题字号 无
方框阴影 无
列间距大小 无
行间距大小 无
边框半径 无

信息中心控件

设置名称 值
显示信息中心标题 是
显示信息中心标题 是
将信息中心标题居中 否
显示过滤器栏 是
显示过滤器切换开关 是

探索页面

设置名称 值
显示标题 是
显示标题 是
显示上次运行时间 是
显示时区 是
显示“运行”按钮 是
显示设置按钮 是
显示信息中心上次更新时间指示图标 是
显示重新加载数据图标 是
显示更多选项按钮 是

Look 页面

设置名称 值
显示标题 是
显示标题 是
显示上次运行时间 是
显示时区 是
显示“运行”按钮 是
显示设置按钮 是

以下示例展示了信息中心、信息中心图块的修改窗口以及采用 Looker 主题的探索。

采用 Looker 主题的信息中心示例

使用默认 Looker 主题的嵌入式 Looker 信息中心。

采用 Looker 主题的信息中心图块修改窗口示例

使用默认 Looker 主题的嵌入式 Looker 信息中心内的“修改图块”对话框。

采用 Looker 主题的“探索”页面示例

使用默认 Looker 主题的嵌入式 Looker 探索。

主题和嵌入设置的应用方式

您可以使用自定义主题和网址实参,将嵌入式信息中心或探索的默认主题更改为其他主题。显示嵌入式信息中心或探索时,Looker 会按以下顺序应用设置:

  1. 从默认主题的设置开始
  2. 应用网址的 theme 实参中指定的自定义主题中的设置(如有)
  3. 应用 _theme URL 实参(如有)中指定的媒体资源(仅限信息中心)

每个项都会替换之前的项,这意味着嵌入设置会替换默认主题设置,而自定义主题会替换嵌入设置和默认主题。

不过,对于 _theme 网址实参,只有在 _theme 实参中指定的元素才会替换其他主题或嵌入设置中的元素。其余自定义主题设置和嵌入设置仍将使用。例如,如果您在嵌入式信息中心的网址中添加 _theme={"show_filters_bar":false} 实参,即使您已在嵌入设置或自定义主题中开启显示过滤条件,过滤条件栏也不会显示。不过,系统仍会使用自定义主题或其他嵌入设置中的其他设置。

下载的信息中心将显示所有已应用的自定义主题。

创建自定义主题

如需为嵌入式信息中心、Look 和 Explore 创建自定义主题,请在主题管理页面中选择嵌入标签页,然后点击添加主题。

接下来,在新主题页面上,为要自定义的每项设置添加样式和颜色规范。

除了主题的标题(必须是唯一的)之外,所有字段都会自动填充默认主题中的值。您可以更改以下各部分中所述的任何设置。选择保存主题以保留所做更改并保存新主题。

主题

名称:主题的名称必须是唯一的,且只能包含字母数字字符和下划线。如果您在主题名称中输入空格,保存主题时,这些空格将被替换为下划线。

常规

本部分的设置同时适用于嵌入式信息中心和嵌入式探索。

关键颜色:信息中心会为主要按钮和过滤控件使用此颜色。探索会为字段选择器链接和图标、主要按钮、横幅和强调内容使用此颜色。

文字颜色:探索和信息中心内文字的十六进制颜色代码。

背景颜色:探索页面和信息中心页面的背景的十六进制颜色代码。

字体系列:字体系列的名称。此字体将用于信息中心内的所有文字,包括图块标题、文字图块和可视化图表中的图例。此字体还将用于“探索”中的所有文字。如果字体名称中包含空格,请用引号将名称引起来,例如“Open Sans”。

  • 如果您使用的是常用的网络安全字体,只需在字体系列字段中输入字体名称,然后将字体来源字段留空即可。如果您想使用不太常见的字体,请在字体系列字段中输入字体名称,然后使用下文所述的字体来源字段提供指向您要使用的字体定义的网址。

字体来源:除非您想使用自定义字体(即非常见的网页安全字体),否则请将此字段留空。字体来源必须是以 https 开头的完整网址,并且指向 @font-face 的 src 实参中指定的 url 值。我们建议您使用 Web 开放字体格式 (.woff) 文件,因为 Internet Explorer 11 不支持 .woff2 文件。

  • 例如,对于 PT Sans Narrow,您可以在字体系列字段中输入“PT Sans Narrow”,然后在字体来源字段中输入 https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff。

采用自定义主题的嵌入式“探索”功能示例

以下示例展示了具有自定义主题的嵌入式探索。关键颜色设置为 #e82042,字体系列设置为 Verdana。

在嵌入式设置中运行探索时,探索中的文字会以指定的 Font Family 字体 Verdana 显示。强调色、按钮和链接会以指定的 Key Color (#e82042) 显示:

一个嵌入式探索,其中“添加”按钮、“前往 LookML”按钮、齿轮菜单按钮和快速应用分析的标题都应用了颜色 #e82042。

运行探索后,“运行”按钮的轮廓和文字会以指定的关键颜色显示,#e82042:

嵌入式探索,其中“运行”按钮应用了颜色 #e82042。

嵌入式信息中心图块编辑窗口(采用自定义主题)示例

除了上一部分中介绍的“探索”元素之外,当您修改信息中心图块时,横幅会以关键颜色设置 (#e82042) 中指定的色调和字体系列设置(Verdana)中指定的字体显示:

嵌入式 Looker 信息中心内的“修改图块”对话框,其中横幅应用了颜色 #e82042,并且页面上的所有文字都应用了 Verdana 字体系列。

信息中心页面

颜色集合:您可以选择颜色集合,这是一组可搭配使用的协调配色方案。将颜色集合分配给信息中心后,信息中心所有图块中的所有数据系列都会根据该集合中的调色板着色,从而确保整个信息中心的数据系列颜色协调一致。

  • 将颜色集合分配给嵌入式主题后,主题的颜色集合将替换之前分配给图块的任何颜色集合。不过,主题的颜色集合不会覆盖分配给数据系列 的自定义颜色,也不会覆盖应用于表格可视化图表的条件格式。

背景颜色:信息中心背景和文本块背景的十六进制颜色代码。

上边距:可以选择性地为信息中心的上边距设置特定值。从下拉菜单中的预定义选项中进行选择。边距以像素 (px) 为单位。

下边距:可以选择性地为信息中心底部的边距设置特定值。从下拉菜单中的预定义选项中进行选择。边距以像素 (px) 为单位。

边距侧:可以选择性地为信息中心两侧的边距设置特定值。从下拉菜单中的预定义选项中进行选择。边距以像素 (px) 为单位。

信息中心板块

标题颜色:以下元素的十六进制颜色代码:

文字颜色:以下元素的十六进制颜色代码:

  • 信息中心上的文字,包括可视化图表中的图例
  • Markdown 块的字幕和正文(标题 1 级文字除外)
  • 文字块上的 1 级标题、2 级标题和正文
  • 单值可视化图表中的功能块图标

正文颜色:以下元素的十六进制颜色代码:

  • Markdown 块中的正文(标题级别 2 和标题级别 3 的文本除外)。
  • 文本图块中的正文

背景颜色:除文字板块之外的所有板块的背景的十六进制颜色代码。(文字块使用与信息中心相同的背景颜色,该颜色通过信息中心页面部分中的背景颜色进行设置。)

标题对齐方式:将功能块标题的对齐方式设置为左对齐、右对齐或居中对齐。

标题字号:您可以选择调整信息中心功能块的字号,从一组预定义的字号(以像素为单位)中进行选择。

框阴影:使用 CSS 语法在信息中心图块周围创建阴影。您可以从预定义的框阴影中进行选择,也可以创建自定义框阴影。如需创建自定义框阴影,请输入所需的 horizontal-offset vertical-offset blur-radius spread-radius color ,然后选择输入自定义样式以应用您的设置。右侧会显示框阴影设置的预览效果。

列间距大小:您可以选择从一组预定义的像素大小中调整信息中心图块列之间的间距大小。

行间距大小:您可以选择调整信息中心图块行之间的间距大小,从一组预定义的像素大小中进行选择。

边框半径:您可以选择性地调整信息中心图块的边框半径,以创建方形或圆角。

信息中心控件

显示信息中心标题:停用此选项可隐藏整个信息中心标题,包括所有信息中心过滤条件和控件。停用此选项后,所有其他信息中心控制选项都会被取消选择并停用。

显示信息中心标题:选中此复选框可显示信息中心的标题。

将信息中心标题居中:选中此复选框可在信息中心内居中显示信息中心标题。如果未启用此选项,信息中心标题将左对齐。只有在启用显示信息中心标题选项后,此选项才可用。

显示过滤条件栏:选中此复选框可在信息中心顶部显示过滤条件栏。如果未选择此选项,系统会取消选择并停用显示过滤条件切换开关选项,从而隐藏信息中心过滤条件图标。

显示过滤条件切换开关:选中此复选框可显示信息中心过滤条件图标。

显示信息中心上次更新时间指示图标:选中此复选框可显示信息中心上次更新时间指示图标。

显示重新加载数据图标:选中此复选框可显示信息中心重新加载数据图标。

显示“更多选项”按钮:选中此复选框可显示三点状信息中心菜单。如果取消选中此选项,信息中心菜单选项将不可用。

探索页面

在自定义主题中,您可以调整嵌入式“探索”页面上的以下元素:

显示标题:停用此选项可隐藏嵌入式探索的整个标题,包括标题、上次运行指示器、数据时区、运行按钮和探索操作齿轮菜单。

显示标题:停用此选项可隐藏嵌入式探索的标题。

显示上次运行时间:停用此选项可隐藏探索的上次运行时间。

显示时区:停用此选项可隐藏嵌入式探索中的数据时区。

显示“运行”按钮:停用此选项可隐藏嵌入式探索中的运行按钮。

显示操作按钮:停用此选项可隐藏嵌入式探索中的“探索操作”齿轮状菜单。

Look 页面

在自定义主题中,您可以调整嵌入式 Look 中的以下元素:

显示标题:停用此选项可隐藏嵌入式 Look 的整个标题,包括标题、上次运行指示器、数据时区、运行按钮和探索操作齿轮菜单。

显示标题:停用此选项可隐藏嵌入式 Look 的标题。

显示上次运行时间:停用此选项可隐藏 Look 的上次运行时间。

显示时区:停用此选项可隐藏嵌入式 Look 中数据的时区。

显示“运行”按钮:停用此选项可隐藏嵌入式 Look 中的“运行”按钮。停用在嵌入式 Look 中显示过滤条件后,此切换开关将不会显示运行按钮。

显示操作按钮:停用此选项可隐藏嵌入式 Look 中的“探索操作”齿轮状菜单。

复制主题

您可以复制现有主题,方法是选择相应主题的菜单,然后选择复制主题。

复制主题时,新主题的名称默认与所复制主题的名称相同,只是后面会附加“(副本)”字样。请务必手动将此名称更改为仅包含字母数字字符和下划线的新唯一名称,并务必移除圆括号。

您可以像创建新主题时一样修改其余设置。如需了解相关设置的说明,请参阅前面介绍的主题设置。请务必选择保存,以保留所有主题设置。

修改主题

Looker 主题会在您的实例上自动创建,并且无法修改。(如果您想修改 Looker 主题,可以先创建主题的副本,然后编辑该副本。)

对于所有其他主题,您可以选择关联的修改按钮来更新主题设置。

您可以像创建新主题时一样修改设置。如需了解相关设置的说明,请参阅前面介绍的主题设置。请务必选择保存以保留更新。

删除主题

您可以删除除 Looker 主题或设为默认主题的主题之外的任何主题。如需删除主题,请选择相应主题的菜单,然后选择删除主题。

删除主题后,任何在网址中指定了该主题的嵌入式信息中心都将使用默认主题。

为嵌入式信息中心和探索设置默认主题

嵌入式 Look 不支持自定义主题。自定义主题仅适用于嵌入式信息中心和嵌入式探索。

如需为实例中的嵌入式信息中心和探索指定默认主题,请选择某个主题的菜单,然后选择设为默认。

除非您为单个信息中心或探索指定了其他设置,否则 Looker 实例上的嵌入式信息中心和探索会使用默认主题。如需详细了解主题和嵌入设置如何应用于嵌入式信息中心或探索,请参阅本页上的主题和嵌入设置的应用方式部分。

将主题应用于特定的嵌入式信息中心和探索

嵌入式 Look 不支持自定义主题。自定义主题仅适用于嵌入式信息中心和嵌入式探索。

如果您希望信息中心或探索使用默认主题以外的主题,可以在嵌入式信息中心或探索的网址中指定其他主题。为此,请将参数 theme=(包含主题名称)添加到嵌入网址的末尾。例如,如果您有一个名为“红色”的主题,则需要在嵌入式信息中心网址的末尾添加 theme=Red:

https://example.cloud.looker.com/embed/dashboards/246?theme=red

对于探索,您需要在嵌入式探索网址的末尾添加 theme=Red: none https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red

网址中的主题元素不区分大小写,因此您可以使用 theme=Red 或 theme=red。

使用 _theme 网址实参应用各个信息中心主题元素

您可以使用 _theme 网址实参为嵌入式信息中心自定义各个主题元素,例如 tile_background_color 和 show_title。

以下是 _theme 网址实参的格式:

_theme={"<property>":value}

例如,您可以使用 _theme={"show_filters_bar":false} 隐藏嵌入式信息中心的过滤条件栏。完整网址可能如下所示:

https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}

使用英文逗号指定多个主题属性:

_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}

颜色值必须用引号括起来,并且可以用颜色名称或十六进制颜色代码表示。如果使用十六进制代码,请务必使用经过网址编码的 # 符号,即 %23。例如,以下两个网址实参都指定了红色:

_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}

将 _theme 对象用于嵌入式信息中心时,您需要考虑以下事项:

  • _theme 网址实参中指定的任何元素都会替换任何其他主题中相应元素的设置。这使得 _theme 实参成为一种用于优化主题或嵌入设置的便捷方式。例如,假设您有一个隐藏过滤条件栏的自定义主题,但您有一个信息中心显示过滤条件栏会更有意义。您可以为信息中心使用自定义主题,然后在嵌入式信息中心的网址中添加 _theme={"show_filters_bar":true} 实参,以在该信息中心上显示过滤条件栏,但保留所有其他自定义主题设置。如需详细了解主题和嵌入设置如何应用于嵌入式信息中心,请参阅本页上的主题和嵌入设置的应用方式部分。
  • 对于编程脚本,您必须对 _theme 实参进行网址编码。
  • 以 PDF 格式交付嵌入式信息中心时,系统不会应用 _theme 实参。
  • 如果您将信息中心下载为 PDF 文件,系统会应用 _theme 实参。