GSP933

總覽

Looker 是 Google Cloud 的新型資料平台，具備互動式分析和資料視覺化功能。您能使用 Looker 深入分析資料、整合各種資料來源的洞察資訊、建立可做為行動依據的資料導向工作流程，以及打造專用資料應用程式。

在本實驗室中，您將瞭解 Liquid 的常見用途，並學習如何用以自訂維度和測量指標。

課程內容

本實驗室的學習內容包括：

• 列出 Liquid 在 Looker 的常見用途
• 使用 Liquid 為網頁搜尋、Looker 資訊主頁和「探索」、其他公司應用程式等維度新增連結
• 使用 Liquid 透過 html 參數自訂維度和測量指標值

需求條件：

請確認您熟悉 LookML 語言，並建議先完成「瞭解 Looker 中的 LookML」課程，再嘗試本實驗室。

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境中完成實作實驗室活動，而不是在模擬或示範環境。為達此目的，我們會提供新的暫時憑證，讓您用來在研究室活動期間登入及存取 Google Cloud。

如要完成這個研究室活動，請先確認：

• 您可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。

注意：請使用無痕模式或私密瀏覽視窗執行本實驗室，這可以防止個人帳戶和學生帳戶之間的衝突，避免個人帳戶產生額外費用。

• 是時候完成實驗室活動了！別忘了，活動一開始將無法暫停。

注意：如果您擁有個人 Google Cloud 帳戶或專案，請勿用於本實驗室，以免產生額外費用。

如何開始實驗室及登入 Looker

1. 準備就緒後，請點選「Start Lab」。

   「Lab Details」窗格會顯示本實驗室中必須使用的暫時憑證。

   如果實驗室會產生費用，畫面中會出現選擇付款方式的彈出式視窗。

   請在「Lab Details」窗格查看實驗室憑證，您之後會使用此憑證登入實驗室的 Looker 執行個體。

   注意：如果使用其他憑證，系統會顯示錯誤訊息或產生費用。

2. 點選「Open Looker」。

3. 分別在「Email」和「Password」欄位，輸入提供的使用者名稱和密碼。

   使用者名稱：

   {{{looker.developer_username | Username}}}

   密碼：

   {{{looker.developer_password | Password}}} 重要事項：請務必使用本頁面「Lab Details」窗格中提供的憑證，而非 Google Cloud Skills Boost 的憑證。請勿在本實驗室中使用個人的 Looker 帳戶。

4. 點選「Log In」。

   成功登入後，您就會在本實驗室看到 Looker 執行個體。

什麼是 Liquid？

Liquid 是以 Ruby 為基礎的開放原始碼範本語言，由 Shopify 所創，可與 LookML 搭配使用，建構更靈活的動態程式碼。

Liquid 程式碼分為 3 類：

• 物件：告知 Liquid 在頁面何處顯示內容。物件基本上就是變數或預留位置，值會在執行階段才插入。除了標記內參照的情況外，物件名稱都會以兩組半形大括號括住。
  • 電子商務電子郵件就是一個現實生活中的例子。您有沒有收過開頭是「{{ last_name }}{{ first_name }}，您好」的網購訂單確認或促銷電子郵件？許多電子郵件範本都以 Liquid 寫成；如果範本有誤，無法填入實際姓名，收件者就會直接看到這些物件。
• 標記：為範本建立邏輯和控制流程。標記會決定邏輯的運作方式，開頭為半形大括號和百分比符號，結尾則是百分比符號和半形大括號。標記主要用於編寫 if-then 規則，也可以處理變數指派等任務。
• 篩選器：操控 Liquid 物件的輸出內容。如要套用篩選器，請輸入豎線字元 (|)，然後輸入支援的關鍵字名稱，例如 append。
  • 如果已使用 Looker 一段時間，卻不曾用過 Liquid，可能會感到困惑。在 Looker 中，篩選器會限縮搜尋結果，例如「只顯示紅色衣服」或「只顯示平均評分至少四星 (滿分五星) 的產品」。

在 Looker 使用 Liquid

Liquid 只能在特定 LookML 參數中使用，詳情請參閱「液體變數參考資料」，特別是液體變數定義表格非常實用。「用量」欄會顯示 LookML 參數所支援的變數類型。請先參閱這份文件，以免花費半小時排解問題，才發現 Liquid 程式碼其實沒有問題，只是環境不支援而已！

您可能會發現本頁面沒有提到 append 或 concat 等篩選器。如要進一步瞭解相關資訊，請參閱 Shopify 的 Liquid 說明文件。基本上，幾乎全部 Liquid 篩選器都可在 Looker 使用。

具體來說，您可以在 LookML 的下列位置使用 Liquid：

• action 參數
  • action 參數會建立資料動作，讓使用者直接透過 Looker 跨工具執行欄位層級工作。例如，您可以觸發傳送電子郵件、在其他應用程式中設定值，或執行任何接收伺服器能處理的動作，前提是接收伺服器必須能接受 JSON POST。
• html 參數
  • 您可以使用 html 參數指定欄位包含的 HTML。使用液體變數，即可存取通常會出現在欄位中的值，進而實現多種用途，包括連結其他相關 Look 圖表、連結外部網站或顯示圖片。
• 欄位的 label 參數
  • 指定動作名稱的字串，這個名稱會出現在使用者介面的「動作」選單中。
• link 參數
  • link 參數可在維度和測量指標中加入網頁連結，方便使用者直接從 Looker 瀏覽相關內容。我們稍後會在本實驗室中詳細說明此參數。
• 開頭為 sql 的參數，例如 sql、sql_on、sql_table_name

使用液體變數

液體變數的基礎應用很簡單，找到要使用的變數後，插入有效的 LookML 參數即可。如要瞭解可在特定 LookML 參數中使用的液體變數，請參閱液體變數定義說明文件。

使用液體變數的方式有兩種：

1. 輸出語法：這種方式可插入文字，可能是在 Looker 最常見的 Liquid 用法。使用時，要用兩組半形大括號括住液體變數，例如 {{ value }}。
2. 標記語法：這種方式通常不會插入文字，而是用於邏輯比較和其他 Liquid 操作。使用時，要用半形大括號和左右各一個百分比符號括住液體變數，例如 {% if value > 10000 %}。

基本範例

在這個 HTML 用途範例中，<img> 標記中會插入產品 ID，用於產生產品圖片：

dimension: product_image { sql: ${product_id} ;; html: <img src="http://www.brettcase.com/product_images/{{ value }}.jpg" /> ;; }

在這個網址用途範例中，網址中會插入藝人姓名，用於產生相關 Google 搜尋結果。

dimension: artist_name { sql: ${TABLE}.artist_name ;; link: { label: "Google" url: "http://www.google.com/search?q={{ value }}" icon_url: "http://google.com/favicon.ico" } }

從其他欄位存取變數

液體變數通常會使用所在欄位的值，但您也可以根據需要存取其他欄位的值。

使用 {{ view_name.field_name._liquid-variable-name }} 格式，存取查詢結果中同一列的其他欄位。將 _liquid-variable-name 替換為任何 Looker 液體變數。如果變數名稱前面沒有加上底線，請務必補上底線，如下所示：

• {{ view_name.field_name._value }}
• {{ view_name.field_name._rendered_value }}
• {{ view_name.field_name._model._name }}

以下範例示範從其他欄位存取網站網址：

dimension: linked_name { sql: ${name} ;; html: <a href="{{ website.url._value }}" target="_new">{{ value }}</a> ;; }

常見用途

您可以在 Looker 中以各種方式使用 Liquid，最常見的用途包括：

• 建立動態連結或顯示動態圖片
• 設定自訂細查
• 根據使用的模型變更欄位標籤
• 匯總感知
• 新增自訂條件式格式設定
• 整合範本篩選器和參數

link 參數

大多數連結都是使用 link 參數新增至維度和測量指標。link 參數能建立自訂連結或細查，並由 3 個子參數組成：

• label：這是連結在細查選單中的名稱，決定連結選項在使用者介面中的顯示方式
• url：這是目標網址，通常包含動態 {{ value }} 物件，支援完整 Liquid (但不支援完整 HTML)
• icon_url：要當成連結圖示顯示的圖片網址。icon_url 為選用參數，如果不想顯示圖示，可以略過。如需公司標誌，可在 Google 搜尋使用 http://www.google.com/s2/favicons?domain=[company website of interest] 模式，找到網站小圖示 (.ico) 格式的圖片

如要進一步瞭解 link 參數，請參閱 Looker 的 link 說明文件。

工作 1：為維度新增網頁搜尋連結

本節您會在「Users」檢視表中，為「City」維度新增連結，這樣當使用者在介面中點選城市，即可跳轉至該城市的 Google 搜尋頁面。

1. 首先，在 Looker 使用者介面左下方，按一下切換鈕進入「開發模式」。

2. 按一下「開發」分頁標籤，然後選取 qwiklabs-ecommerce LookML 專案。前往「Users」檢視表檔案。

3. 在「Users」檢視表檔案中，找到「City」維度：

4. 在現有城市維度下方，按照下列方式建立新的 city_link 維度，並加上 link 參數。按一下「儲存變更」。

dimension: city_link { type: string sql: ${TABLE}.city ;; link: { label: "Search the web" url: "http://www.google.com/search?q={{ value | url_encode }}" icon_url: "http://www.google.com/s2/favicons?domain=www.{{ value | url_encode }}.com" } }

在剛剛新增的 link 參數中，子參數定義如下：

• label：此處的標籤使用「Search the web」字串，簡單傳達點選連結後執行的動作。
• url：這裡使用維度的城市值，並套用 url_encode 篩選器，將網址中無法直接顯示的字元都轉換為百分比編碼格式。
• icon_url：這是要當成連結圖示顯示的圖片網址，可用於抓取城市的網站小圖示 (如有)。

注意：大多數城市會顯示通用網站圖示 (例如 Allentown)，但部分城市會顯示搜尋到的自訂圖示 (例如 Abbeville)。

新的 city_link 維度現在應如下所示：

5. 前往「Order Items」探索。

6. 在「User」檢視表中，選取「City Link」維度。按一下「執行」。

7. 按一下城市值 (例如 Abbeville) 旁邊的三點圖示。

8. 選取「Search the web」。太好了！您已為維度新增第一個連結。

9. 返回「Users」檢視表檔案。

修訂變更並部署至正式環境

1. 依序點按「驗證 LookML」>「修訂變更並推送」。

2. 新增修訂版本訊息，然後點按「修訂」。

3. 最後，點按「部署至正式環境」。

點選「Check my progress」，確認上述工作已完成。 為維度新增網頁搜尋連結

工作 2：使用 html 參數，將維度值轉換成連結按鈕

有時，商業用戶不喜歡使用者介面上由 link 參數產生的三點圖示，或者有其他需求，例如想改字型或換個方式開啟連結。這時，您可以使用 html 參數提高設定彈性。html 參數可進一步自訂細查和連結功能：

• 維度值會在 Looker 中以超連結形式顯示
• 使用者點選值後，就會前往 html 中的指定連結
• 可視需要另行調整，自訂使用者體驗

如要進一步瞭解 html 參數，請參閱 Looker 的 html 說明文件

本節中您將建立新維度，並以連結按鈕的形式顯示維度值，點選按鈕後可前往預先設定的「探索」頁面，查看所選使用者 ID 的訂單記錄。

1. 返回「Users」檢視表檔案。

2. 在「Users」檢視表中，新增 order_history_button 維度，如下所示：

dimension: order_history_button { label: "Order History" sql: ${TABLE}.id ;; html: <a href="/explore/training_ecommerce/order_items?fields=order_items.order_item_id, users.first_name, users.last_name, users.id, order_items.order_item_count, order_items.total_revenue&f[users.id]={{ value }}"><button>Order History</button></a> ;; }

3. 按一下「儲存變更」。

在剛剛新增的 html 參數中，「Order History Button」的維度值都是 ID，但顯示所有 ID 對商業用戶可能不具參考價值，因此這裡改成顯示「Order History」。

此連結會導向電子商務訓練模型中的「Order Items」探索頁面，並顯示特定欄位 (注意到此處使用集合，以利列出多個欄位)，以及依照所選使用者 ID 篩選資料。此外，由於 html 參數本身沒有任何視覺提示，無法得知值包含超連結，因此您可以使用 <button> 標記，將參數設為按鈕樣式，讓使用者一看就知道可點選。詳情請參閱「建立超連結按鈕維度」。

注意：href 參數值也可以做為網址值，用來建立前一節提到的連結。

檔案應如下所示：

4. 前往「Order Items」探索。

5. 在「Users」檢視表中，選取「ID」、「First Name」、「Last Name」和「Order History」維度。按一下「執行」。

6. 在使用者「Order History」按鈕上按一下滑鼠右鍵，然後在新分頁中開啟。舉例來說，假如點選「Sam Aguilar」的按鈕，您會看到有兩筆訂單記錄。太好了！您已建立可用的維度，並以連結按鈕形式顯示值。

7. 返回「Users」檢視畫面。

修訂變更並部署至正式環境

1. 依序點按「驗證 LookML」>「修訂變更並推送」。

2. 新增修訂版本訊息，然後點按「修訂」。

3. 最後，點按「部署至正式環境」。

點選「Check my progress」，確認上述工作已完成。 使用 html 參數，將維度值轉換成連結按鈕

工作 3：使用 html 參數自訂測量指標值的格式

商業用戶使用 Looker 的資料表視覺化功能時，可以啟用條件式格式來建立熱視圖。不過，這項功能只能用於調整資料表儲存格的填滿顏色。LookML 開發人員如要更靈活地自訂字型顏色或大小等樣式，必須使用 html 參數。html 參數的用途包括：

• 為維度標籤或標題背景新增自訂顏色
• 在顯示的值中加入圖片或圖示
• 變更顯示文字的大小或字型
• 透過下拉式選單，將自訂詳細資料新增至資料表儲存格
• 在資料表的儲存格中建立進度列，比較儲存格值與目標

在本節中，您將修改現有測量指標來自訂值的格式，根據值是高於還是低於定義的金額自動調整顯示效果。

1. 前往「Order Items」檢視表檔案。

2. 在「Order Items」檢視表中，找到「total_revenue」測量指標。

3. 在現有的「total_revenue」測量指標下方，按照下列方式建立「total_revenue_conditional」測量指標，並新增 html 參數：

measure: total_revenue_conditional { type: sum sql: ${sale_price} ;; value_format_name: usd html: {% if value > 1300.00 %} <p style="color: white; background-color: ##FFC20A; margin: 0; border-radius: 5px; text-align:center">{{ rendered_value }}</p> {% elsif value > 1200.00 %} <p style="color: white; background-color: #0C7BDC; margin: 0; border-radius: 5px; text-align:center">{{ rendered_value }}</p> {% else %} <p style="color: white; background-color: #6D7170; margin: 0; border-radius: 5px; text-align:center">{{ rendered_value }}</p> {% endif %} ;; }

4. 按一下「儲存變更」。

在剛剛新增的 html 參數中，測量指標的格式現在會根據值自動調整。您已透過 if-then 邏輯定義以下條件：

• 如果總收益值超過 $1,300，將背景顏色設為黃色
• 如果總收益值超過 $1,200，將背景顏色設為藍色
• 否則 (如果總收益低於 $1,200)，將背景顏色設為灰色

檔案應如下所示：

5. 前往「Order Items」探索。

6. 在「Users」檢視表中，選取「ID」、「First Name」和「Last Name」。在「Order Items」檢視表中，選取「Total Revenue Conditional」。按一下「執行」。

太好了！您成功在總收益測量指標中使用 html 參數，根據值是高於還是低於定義的金額，用不同顏色填滿儲存格。

7. 返回「Order Items」檢視表。

修訂變更並部署至正式環境

1. 依序點按「驗證 LookML」>「修訂變更並推送」。

2. 新增修訂版本訊息，然後點按「修訂」。

3. 最後，點按「部署至正式環境」。

點選「Check my progress」，確認上述工作已完成。 使用 html 參數自訂測量指標值的格式

工作 4：Liquid 進階連結

針對進階用途，例如在不同「探索」頁面中使用不同連結，您可以透過 Liquid 標記在連結中加入條件。本節中您會為連結新增條件，以檢查「探索」的名稱，然後根據使用者的起始位置，將使用者傳送至特定連結。

1. 返回「Users」檢視表檔案。

2. 在「Users」檢視表中，找到「state」維度。

3. 在現有「state」維度下方，按照下列方式建立新的 state_link 維度，並新增 html 參數。

dimension: state_link { type: string sql: ${TABLE}.state ;; map_layer_name: us_states html: {% if _explore._name == "order_items" %} <a href="/explore/training_ecommerce/order_items?fields=order_items.detail*&f[users.state]= {{ value }}">{{ value }}</a> {% else %} <a href="/explore/training_ecommerce/users?fields=users.detail*&f[users.state]={{ value }}">{{ value }}</a> {% endif %} ;; }

4. 按一下「儲存變更」。

這個進階範例使用 Liquid 標記來進行 if-then 邏輯判斷。如果使用者目前位於 order_items 探索中，點選「state」維度的值後，將重新導向至同一個「探索」頁面，並套用部分欄位和篩選器。若位於其他「探索」頁面，當中剛好有這個檢視表和維度，使用者會跳轉至「Users」探索，並套用其他欄位和篩選器。詳情請參閱「根據『探索』自動調整的條件式網址連結」。

5. 前往「Order Items」探索。

6. 在「Users」檢視表中，選取「ID」、「First Name」、「Last Name」和「State Link」。按一下「執行」。

7. 點選其中一個 state 維度，看看系統如何將您重新導向至同一個「探索」頁面，並套用部分欄位和篩選器。試試看在含有相同檢視表和維度的其他「探索」頁面重複相同步驟，看看 Liquid 邏輯的反應。

8. 返回「Order Items」檢視表。

修訂變更並部署至正式環境

1. 依序點按「驗證 LookML」>「修訂變更並推送」。

2. 新增修訂版本訊息，然後點按「修訂」。

3. 最後，點按「部署至正式環境」。

點選「Check my progress」，確認上述工作已完成。 Liquid 進階連結

恭喜！

在本實驗室中，您於 Looker 使用 Liquid 為維度新增連結、使用 html 參數將維度值轉換成連結按鈕、自訂測量指標值的格式，以及在連結中加入條件。

後續步驟/瞭解詳情

• 瞭解「透過 Liquid 提升 Looker 使用者互動體驗」實驗室內容。
• LookML 快速指引
• LookML 術語和概念
• Looker 社群
• 其他 LookML 基礎知識

Google Cloud 教育訓練與認證

協助您瞭解如何充分運用 Google Cloud 的技術。我們的課程會介紹專業技能和最佳做法，讓您可以快速掌握要領並持續進修。我們提供從基本到進階等級的訓練課程，並有隨選、線上和虛擬課程等選項，方便您抽空參加。認證可協助您驗證及證明自己在 Google Cloud 技術方面的技能和專業知識。

使用手冊上次更新日期：2026 年 2 月 3 日

實驗室上次測試日期：2026 年 2 月 3 日

Copyright 2026 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。