前言

Flex Message 可以分成 bubble(單張卡片) 跟 carousel(多張卡片輪播) 兩種方式，昨天示範了 bubble 格式的電子個人名片後，今天主要展示 carousel 的應用，兩者的基本結構大致相同，而為了讓這次的食譜卡片更貼近實際官方帳號的呈現方式，這次特別加入了元素絕對定位的標籤設計。

• 本日程式碼的範例連結
• 本日設計 Flex Simulator JSON 檔案(可直接在 Flex Simulator 替換顯示)

輪播卡片製作

使用 flex-simulator 官方視覺化的工具進行設計

昨天我們專注於單一 bubble 卡片的客製化設計，而 carousel 輪播功能本質上就是將多個 bubble 卡片組合呈現，每張卡片的視覺設計與內容配置都可以根據需求自由規劃。

在 Flex Message carousel 中，每張卡片的高度會自動保持一致，系統會以最高的卡片為基準，將所有卡片對齊到相同高度。因此在設計排版時，建議各卡片的內容結構不要差異過大，以避免產生過多留白而影響視覺呈現效果。

【 carousel 的定義限制 】

• carousel 最多只能包含 12 個 bubble 卡片
• 整個輪播訊息的資料大小不能超過 50KB

本日目標

hero 區塊

重頭戲，需要完成絕對定位的標籤在圖片左上角

首先，先透過右上角的 New 產生 Carousel 預設版型。

這邊可以先把第二個 bubble 刪除，我們先專心在第一張卡片的設計。

在 hero 區塊放入 box 裝食譜的照片。使用 box 而非直接放置圖片的原因，是為了在右上角加入絕對定位的標籤元素，透過 box 包裹 image 的結構，實現標籤的定位效果。

• box.image
  • url：這邊放食譜的 https url。
  • size：full。讓圖片填滿 hero 的寬度。
  • aspectMode：cover。將圖片的填充方式設定為「盡可能填滿容器」，以避免顯示時產生白邊或留白。
  • aspectRatio：4:3。設定圖片寬高比，預設是 1:1，可以透過調整比例影響高度。

【 加入絕對定位標籤 】

在 box 容器內新增子元素 box 與 text 元件。子 box 元件負責設定標籤的背景顏色與絕對定位配置；text 元件則用於顯示標籤文字內容。

• box
  • position:absolute。讓元素絕對定位在父層 box 上。
  • cornerRadius：md。讓背景區塊有圓角的感覺。
  • offsetTop & offsetStart：md。讓元素偏離原先的位置，使其不要貼在父層 box 邊界。
  • paddingAll：md。為標籤添加內邊距，避免文字與標籤邊框過於緊貼。
  • Background(這邊只需要一個橘色的背景單色即可)。
    • type：linearGradient。
    • angle: 0deg。
    • startColor & endColor：#FF8C42。
• box.text
  • text：開胃菜。標籤顯示值。
  • size：sm。預設是 md，讓標籤看起來小一點。
  • color：#FFFFFF。
  • weight：bold。

感覺多了標籤這個卡片就更特別的感覺，我自己蠻喜歡今天想的範例 ＼(●´ϖ`●)／

body 區塊

食譜標題及簡單描述

此區塊包含一個 box 容器與兩個 text 元件。第一個 text 用於顯示食譜標題，第二個 text 則呈現食譜描述。除了基本描述外，還可以額外加入烹飪時間、難度等級等資訊，讓卡片內容更加豐富完整。

• box
  • spacing：sm。讓食譜標題及描述文字有一些距離。
  • alignItems：center。讓兩個 text 都可以置中對齊。
• text(標題)
  • text：香煎馬鈴薯佐羅勒。標題顯示值。
  • size：lg。預設是 md，讓標題字更凸顯一些。
  • weight：粗體。
• text(內文)
  • text：標題顯示內容。範例使用「金黃酥脆的開胃小食,完美的聚餐開場」。
  • size：sm。預設是 md，讓描述字比原本預設在小一些。
  • color：#666666，文字顏色。

footer 區塊

加入引導按鈕，讓使用者快速連結到你的食譜個人網站吧！

此區塊包含一個 box 容器與一個 button 元件。Button 元件內建多種預設樣式可直接套用，能夠簡化大量的設定細節。

• box.button
  • style：primary。預設會顯示綠色背景色及白色文字。
  • action.label：button 元件顯示文字。範例使用「查看食譜」。
  • action.url：替換成使用者點擊實際要到的網址位置。

這邊可以試著將color的部分調整成#FF8C42就可以改變原先 style primary 的綠色背景，這部分我用在最後一張卡片。

完成食譜卡片設計後，可以利用複製功能快速產生多張卡片，再分別替換各自的標籤、照片、標題、描述及連結。進階應用上，還能搭配爬蟲技術實現食譜資訊的動態更新，具體實作方式可依實際需求彈性調整。

接著將卡片放入後端後端伺服器的方式與昨日相同，這邊就不再重複展示。

本日結語

除了食譜使用標籤標示類別外，地方政府官方帳號也常使用標籤來區分不同的講座類型，兩者的設計手法相似。透過 Flex Message carousel 可以突破 Template Message 每張卡片格式一致的限制，實現更多元的卡片組合呈現。

在實際應用情境上，還能延伸出許多不同的設計可能，例如銀行官方帳號的扣款通知卡片、電商網站的訂單明細卡片等。目前你已經完整掌握 LINE Bot 六大基礎回覆類型，以及三種進階回覆訊息類型(ImageMap Message、Template Message 及 Flex Message)，試著結合你的創意發想，一起玩轉 LINE Bot 吧!

【 我很喜歡的炸雞店 - 訂單明細 】

想像如果你線上點餐後會在 LINE Bot 通知訂單明細，感覺還不錯吧！