您可以使用自訂主題自訂嵌入式 Looker 資訊主頁、Look 和探索的外觀。您可以使用主題自訂字型系列、文字顏色、背景顏色、按鈕顏色、圖塊顏色和其他視覺元素。
舉例來說,您可以建立「深色」主題,變更嵌入式資訊主頁的外觀。
如要瞭解如何為資訊主頁和探索設定預設主題,或將主題套用至特定資訊主頁或探索,請參閱「開始使用嵌入功能 - 套用自訂主題」說明文件。
您可以在「管理」面板的「平台」部分的「主題」頁面中,為嵌入式資訊主頁、嵌入式「探索」和嵌入式資訊主頁中資訊方塊的編輯視窗定義主題。
本頁面將說明以下內容:
- 需求條件
- Looker 預設主題
- 如何將主題套用至嵌入的資訊主頁和探索
- 如何建立、複製、編輯及刪除自訂主題
- 如何為資訊主頁和探索設定預設主題
- 如何將預設主題以外的主題套用至所選的資訊主頁和探索
- 如何將
_theme
網址引數套用至所選的儀表板主題元素
需求條件
如要管理 Looker 執行個體的佈景主題,您必須符合下列條件:
- 如果執行個體是 Looker (原始版本) 執行個體,則必須由 Looker 啟用可自訂嵌入式資訊主頁、Look 和探索主題的功能。請與 Google Cloud 銷售專員聯絡,更新這項功能的授權。
- 如果您的執行個體是 Looker (Google Cloud Core) 執行個體,嵌入式主題僅適用於企業版和嵌入版,不適用於標準版。
- Looker 使用者必須具備管理員角色或
manage_themes
權限。
預設主題
Looker 預設主題會自動建立在您的執行個體上,且無法刪除或編輯。除非 Looker 管理員指定其他主題做為預設主題,否則系統會使用 Looker 主題做為預設主題。
Looker 主題設定 (可透過選取主題旁的「View」按鈕或建立副本查看) 分為以下幾個部分:
主題
設定名稱 | 值 |
---|---|
名稱 | 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 會在可用時使用「UI」字型變化版本,讓字元稍微調整,以便更符合視覺元件的邊界。 |
字型來源 | 無 |
資訊主頁頁面
設定名稱 | 值 |
---|---|
顏色集合 | 無 |
背景顏色 | #f6f8fa |
資訊主頁圖塊
設定名稱 | 值 |
---|---|
標題顏色 | #3a4245 |
文字顏色 | #3a4245 |
內文顏色 | 無 |
背景顏色 | #ffffff |
標題對齊設定 | 置中 |
資訊主頁控制項
設定名稱 | 值 |
---|---|
顯示資訊主頁標題 | 是 |
顯示篩選器列 | 是 |
探索頁面
設定名稱 | 值 |
---|---|
顯示標頭 | 是 |
顯示標題 | 是 |
顯示上次執行作業 | 是 |
顯示時區 | 是 |
顯示「執行」按鈕 | 是 |
顯示「設定」按鈕 | 是 |
Look 圖表頁面
設定名稱 | 值 |
---|---|
顯示標頭 | 是 |
顯示標題 | 是 |
顯示上次執行作業 | 是 |
顯示時區 | 是 |
顯示「執行」按鈕 | 是 |
顯示「設定」按鈕 | 是 |
以下是資訊主頁、資訊主頁圖塊的編輯視窗,以及採用 Looker 主題的「探索」範例。
使用 Looker 主題的資訊主頁範例
範例:採用 Looker 主題的資訊主頁資訊方塊編輯視窗
使用 Looker 主題的「探索」頁面範例
主題和嵌入設定的套用方式
您可以使用自訂主題和網址引數,變更嵌入式資訊主頁或「探索」的預設主題外觀。在顯示嵌入式資訊主頁或探索時,Looker 會依照下列順序套用設定:
- 從預設主題的設定開始
- 套用網址
theme
引數中指定的自訂主題設定 (如果有) - 套用
_theme
網址引數中指定的屬性 (如果有) (僅限資訊主頁)
每個項目都會覆寫先前的項目,也就是說,嵌入設定會覆寫預設主題設定,而自訂主題會覆寫嵌入設定和預設主題。
不過,如果是 _theme
網址引數,只有 _theme
引數中指定的元素會覆寫其他主題或嵌入設定中的元素。其餘的自訂主題設定和嵌入設定仍會使用。舉例來說,如果您在嵌入式資訊主頁的網址中加入 _theme={"show_filters_bar":false}
引數,即使您已在嵌入設定或自訂主題中開啟「顯示篩選器」,系統也不會顯示篩選器列。但自訂主題或嵌入設定的其他設定仍會使用。
下載的資訊主頁會顯示已套用的自訂主題。
建立自訂主題
如要建立自訂主題,請選取「新增主題」:
接著,請在「New Theme」頁面中,為每個所需設定新增樣式和顏色規格。
除了主題的標題 (必須是唯一值) 以外,系統會自動填入預設主題的值,填入所有欄位。您可以變更下列任何設定,選取「儲存主題」即可保留變更並儲存新主題。
主題
名稱:主題名稱必須不重複,且只能包含英數字元和底線。如果在主題名稱中輸入空格,儲存主題時,系統會將空格替換為底線。
一般
這個部分的設定適用於嵌入式資訊主頁和嵌入式「探索」頁面。
按鍵顏色:資訊主頁的主要按鈕和篩選器控制項會使用這個顏色。「探索」頁面會使用這個顏色,用於欄位挑選器連結和圖示、主要按鈕、橫幅和強調色。
文字顏色:探索和資訊主頁的文字十六進位顏色代碼。
背景顏色:探索和資訊主頁背景的十六進位顏色代碼。
字型系列:字型系列的名稱。這個字型會用於資訊主頁上的所有文字,包括資訊方塊標題、文字資訊方塊和視覺化中的圖例。這個字型也會用於探索中的所有文字。如果字型名稱含有空格,請在名稱前後加上引號,例如「Open Sans」。
- 如果您使用的是常見的網路安全字型,只要在「字型系列」欄位中輸入字型名稱,並將「字型來源」欄位留空即可。如果要使用較不常見的字型,請在「字型系列」欄位中輸入字型名稱,然後使用「字型來源」欄位 (詳見下文) 提供要使用的字型定義網址。
字型來源:除非您要使用自訂字型 (非常見的網路安全字型),否則請將這個欄位留空。字型來源必須是開頭為 https
的完整網址,並指向 @font-face
的 src
引數中指定的 url
值。由於 Internet Explorer 11 不支援 .woff2
檔案,因此建議您使用網路開放字型格式 (.woff
) 檔案。
- 舉例來說,如果是 PT Sans Narrow,您可以在「字型系列」欄位中輸入「PT Sans Narrow」,然後在「字型來源」欄位中輸入
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff
。
使用自訂主題嵌入的 Explore 範例
以下範例顯示嵌入式 Explore 的內容,其中包含自訂主題。「Key Color」設為 #e82042
,而「Font Family」設為 Verdana。
在嵌入式設定中執行 Explore 時,Explore 中的文字會顯示在指定的 字型系列字型 Verdana 中。強調色、按鈕和連結會顯示在指定的主色 #e82042
中:
執行探索後,「Run」按鈕的輪廓和文字會以指定的「Key Color」顯示,#e82042
:
使用自訂主題的嵌入式資訊主頁資訊方塊編輯視窗範例
除了上一節所述的「探索」元素外,編輯資訊主頁資訊方塊時,橫幅會以「主要顏色」設定 (#e82042
) 中指定的色調顯示,並使用「字型系列」設定 (Verdana) 中指定的字型:
資訊主頁頁面
顏色集合:您可以選擇顏色集合,也就是一組搭配良好的調色盤。將色彩集合指派給資訊主頁後,所有資訊主頁資訊方塊中的所有資料序列都會根據集合中的色板著色,確保整個資訊主頁的資料序列顏色一致。
背景顏色:資訊主頁背景和文字圖塊背景的十六進位顏色代碼。
上邊界:可選擇為資訊主頁頂端的邊界設定特定值。從下拉式選單中選擇預先定義的選項。邊界是以像素 (px) 為單位。
下邊界:可視需要為資訊主頁底部的邊界設定特定值。從下拉式選單中選擇預先定義的選項。邊界是以像素 (px) 為單位。
邊界:可視需要為資訊主頁的左右邊界設定特定值。從下拉式選單中選擇預先定義的選項。邊界是以像素 (px) 為單位。
資訊主頁方塊
標題顏色:下列元素的十六進位顏色代碼:
文字顏色:下列元素的十六進位顏色代碼:
文字主體顏色:下列元素的十六進位顏色代碼:
背景顏色:所有圖塊 (文字圖塊除外) 的背景十六進位顏色代碼。(文字圖塊會使用與資訊主頁相同的背景顏色,您可以透過「資訊主頁」部分的「背景顏色」設定這項屬性)。
標題對齊方式:將資訊方塊標題的對齊方式設為靠左、靠右或置中。
標題字型大小:可視需要從一組預先定義的大小 (以像素為單位) 調整資訊主頁資訊方塊的字型大小。
Box Shadow:使用 CSS 語法在資訊主頁資訊方塊周圍建立陰影。您可以從預先定義的邊框陰影中選取,也可以建立自訂邊框陰影。如要建立自訂邊框陰影,請輸入所需的 horizontal-offset vertical-offset blur-radius spread-radius color
,然後選取「輸入自訂樣式」套用設定。右側顯示方塊陰影設定的預覽畫面。
資料欄間距大小:可從一組預先定義的大小 (以像素為單位) 中,調整資訊主頁資訊方塊資料欄間的間距大小。
資料列間距大小:您可以從一組預先定義的像素大小中,選擇調整資訊主頁資訊方塊資料列間距的大小。
邊框半徑:您可以視需要調整資訊主頁圖塊的邊框半徑,以建立方形或圓角。
資訊主頁控制項
顯示資訊主頁標頭:停用這個選項即可隱藏整個資訊主頁標頭,包括所有資訊主頁篩選器和控制項。停用這個選項後,系統會取消選取並停用所有其他資訊主頁控制選項。
顯示資訊主頁標題:勾選核取方塊,即可顯示資訊主頁的標題。
中央資訊主頁標題:勾選這個核取方塊,即可在資訊主頁上顯示居中的資訊主頁標題。如果未啟用這個選項,資訊主頁標題會靠左對齊。只有在啟用「顯示資訊主頁標題」選項時,才能使用這個選項。
顯示篩選器列:勾選這個核取方塊,即可在資訊主頁頂端顯示篩選器列。如果未選取這個選項,系統會取消選取並停用「顯示篩選器切換按鈕」選項,隱藏資訊主頁篩選器圖示。
顯示篩選器切換鈕:勾選核取方塊,即可顯示「資訊主頁篩選器」圖示。
顯示資訊主頁上次更新時間指標:勾選這個核取方塊,即可顯示資訊主頁上次更新時間指標。
顯示「重新載入資料」圖示:勾選核取方塊,即可顯示資訊主頁「重新載入資料」圖示。
顯示資訊主頁選單:選取核取方塊,即可顯示三點圖示的資訊主頁選單。取消選取這個選項後,就無法使用資訊主頁選單選項。
探索頁面
在自訂主題中,您可以調整嵌入式探索頁面中的下列元素:
顯示標頭:停用這個選項可隱藏嵌入式探索的整個標頭,包括標題、上次執行指標、資料的時區、執行按鈕,以及探索動作齒輪選單。
顯示標題:停用這個選項,即可隱藏嵌入式 Explore 的標題。
顯示上次執行作業:停用這個選項,即可隱藏 Explore 上次執行的時間。
顯示時區:停用這個選項,即可隱藏嵌入式探索資料的時區。
顯示「執行」按鈕:停用這個選項,即可隱藏嵌入式「探索」頁面中的「執行」按鈕。
顯示動作按鈕:停用這個選項,即可隱藏嵌入式 Google 探索的「探索動作」齒輪選單。
Look 圖表頁面
在自訂主題中,您可以調整嵌入式外觀的下列元素:
顯示標頭:停用這個選項可隱藏嵌入式 Look 的整個標頭,包括標題、上次執行指標、資料的時區、執行按鈕和探索動作齒輪選單。
顯示標題:停用這個選項,即可隱藏嵌入式 Look 的標題。
顯示上次執行作業:停用這個選項,即可隱藏 Look 上次執行的時間。
顯示時區:停用這個選項,即可隱藏嵌入式 Look 中資料的時區。
顯示執行按鈕:停用這個選項,即可隱藏嵌入式 Look 中的執行按鈕。如果「顯示嵌入式 Look 圖表的篩選器」已停用,這個切換按鈕就不會顯示「執行」按鈕。
顯示動作按鈕:停用這個選項,即可隱藏嵌入式 Look 中的「探索動作」齒輪選單。
複製主題
如要複製現有主題,請選取主題的選單,然後選取「複製主題」。
複製主題時,新主題的名稱預設為複製主題的名稱,後面加上「(副本)」。請務必手動將這個名稱改為新的不重複名稱,且只使用英數字元和底線,並務必移除括號。
您可以編輯其餘設定,就像建立新主題時一樣。如需設定說明,請參閱前述的主題設定。請務必選取「儲存」,保留所有主題設定。
編輯主題
系統會在執行個體上自動建立 Looker 主題,且無法編輯。(如果您想修改 Looker 主題,可以改為建立副本,然後編輯副本)。
對於其他所有主題,您可以選取相關的「編輯」按鈕來更新主題設定。
您可以編輯設定,就像建立新主題時一樣。如需設定說明,請參閱前述的主題設定。請務必選取「儲存」,保留更新內容。
刪除主題
您可以刪除任何主題,但無法刪除Looker 主題或設為預設主題的主題。如要刪除主題,請選取主題的選單,然後選取「Delete Theme」。
刪除主題後,凡是在網址中指定該主題的嵌入式資訊主頁,都會使用預設主題。
為嵌入式資訊主頁和探索設定預設主題
嵌入的 Look 不支援自訂主題。自訂主題僅適用於嵌入式資訊主頁和嵌入式「探索」功能。
如要為執行個體中的嵌入式資訊主頁和 Explore 指定預設主題,請選取主題的選單,然後選取「設為預設」。
除非您為個別資訊主頁或探索指定不同的設定,否則 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
引數。