🧙♂️ 大家好，我是斜槓君，手把手教你搭建釦子AI應用。
☘️ 本文是《AI應用開發系列教程之釦子(Coze)實戰教程》，完全免費學習。
👀 關注斜槓君，可獲取完整版教程。
如果想學習AI應用搭建，請關注公眾號，及時獲取最新免費教程。
最近，有很多同學問釦子中的卡片有什麼用？怎麼很少用到，那今天本文就為大家講解一下釦子中的卡片是做什麼的，到底有什麼妙用？
溫馨提示：本文內容很多，涉及貫穿了搭建釦子應用的很多知識。沒看過教程的同學，一定關注後再看，不然容易找不到。 如果學懂本文，你可以完全掌握了釦子卡片的原理，話不多說，上乾貨。
本文重點，共分五個部分：
1、釦子中的卡片是什麼
2、卡片的組成
3、卡片使用範圍
4、製作卡片
5、使用卡片
接下來讓我們詳細一一講解。
一、什麼是卡片
釦子平臺中的「卡片」簡單說就是讓輸出的格式更好看。 例如你在釦子上透過外掛或工作流返回一篇新聞，如果直接輸出，就是一行標題，一段內容，可能有的還會有一個連結。但如果在大模型輸出之前，你把這些資訊按設定好的格式做成一個好看的卡片，是不是更能提供應用的使用者體驗，例如下面這樣：
當然，也可以有列表形式的卡片：
二、卡片的組成
組成卡片的元素叫做元件。
元件一共分兩種：
-
佈局元件
-
基礎元件
佈局元件就是用來劃分整體區域的，佈局元件有如下幾種：
對於每一個佈局，都可單獨進行引數的設定，這樣就能組合出很多不同的佈局。
例如這個佈局：
原始的每行展示數目是3個，我可以改成4個，就變成這樣了。
基礎元件是具體的展示資訊的型別，例如是圖片，還是文字，還是按鈕等。
基礎元件有如下幾種：
如下這個卡片就由一個圖片和兩個文字元素組成。
接下來讓我們動手製作一個卡片，然後再使用這個製作好的卡片。透過本節課學習，徹底讓大家掌握釦子卡片的使用，讓你的應用與眾不同。
三、卡片的使用範圍
目前訊息卡片僅在豆包客戶端、飛書客戶端內生效。
僅工作流和外掛功能支援新增訊息卡片。
四、製作卡片
接下來我們來透過一個實際的案例來學習卡片的製作。
這個案例的作用是：呼叫知乎熱榜外掛，然後用卡片列表的形式展示給使用者。
1. 設定佈局
形式如下圖所示：
我們要做上面這種型別的卡片，首先要對內容進行分解。從圖中可以看出這是一個新聞列表的迴圈。
所以首先要做出一條新聞的樣式，再透過迴圈就可以展示出多條新聞的列表形式了。
也就是先做出這部分：
上面的這個結構，可以看出，是一個兩列布局，有左右兩部分內容。左側是圖片，右側是資訊。
那我們首先在畫布上新增二列布局元件：
然後在這個佈局里加入一個圖片元件：
因為我們想要的圖片是正方形，這麼佈局的話，比例不對。應該把1的寬度變小。
例如下圖這樣，把這個寬度再多分幾份，實際是6份：
這時讓圖片的部分佔1分，讓文字的內容佔5份，這樣就能達到我們的效果了。
那該應該如何設定呢？
只需要調整資訊部分寬度比例即可，改為5：
這樣比例就調整好了。
2. 新增元件
先新增圖片元件：
再新增文字元件。文字部分有上下兩行，一行是標題，給行是摘要。
那麼我們需要新增兩個文字元件。
這樣結構就準備好了。透過點選結構的按鈕，可以看到當前卡片的結構。如下圖：
3. 新建變數
因為列表是迴圈的展示的。正常情況下，迴圈的資料是介面返回的。在我們這個例子中，就是知乎返回的一個熱榜陣列。所以在沒有呼叫介面之前，我們需要先透過模擬一個陣列來展示這迴圈列表。
透過變數選項卡新建一個變數：
這裡要注意，如下圖所示，變數型別要選擇陣列：
陣列變數的值如下，一共有三個元素，也就是對應展示出來的新聞列表也應是三條。
大家可以複製以下陣列使用：
[{ "title": "這是一個新聞標題", "summary": "新聞摘要的作用很重要，它可以決定讀者是否閱讀一篇新聞，並對讀者的觀點和態度產生影響。", "image": " https://lf-card-builder.oceancloudapi.com/obj/bot-studio-builder/2272053001466355_1709225232250572891.jpg ", "url": " https://www.coze.cn " },{ "title": "這是一個新聞標題", "summary": "新聞摘要的作用很重要，它可以決定讀者是否閱讀一篇新聞，並對讀者的觀點和態度產生影響。", "image": " https://lf-card-builder.oceancloudapi.com/obj/bot-studio-builder/2272053001466355_1709225232250572891.jpg ", "url": " https://www.coze.cn " },{ "title": "這是一個新聞標題", "summary": "新聞摘要的作用很重要，它可以決定讀者是否閱讀一篇新聞，並對讀者的觀點和態度產生影響。", "image": " https://lf-card-builder.oceancloudapi.com/obj/bot-studio-builder/2272053001466355_1709225232250572891.jpg ", "url": " https://www.coze.cn " }]
設定好以後，接下來我們為卡片元素繫結變數。
4. 繫結變數
選中最外層元件，開啟右側高階配置中的迴圈渲染開關。如下圖：
選擇剛才我們建立的列表變數：
可以看到，列表迴圈展示出來了。迴圈的數量(三條資料)和我們設定的變數也是一一對應的。
接下來繫結元素（圖片、標題、摘要）對應的變數。
圖片：
標題：
摘要：
設定好以後是這樣的：
到這裡，我們的卡片製作工作就完成了。接下來讓我使用這個卡片小試牛刀~
5. 儲存模板
注意：這個不是必須的。但為了下次製作卡片時可以直接引用，一般會儲存為模板。
起一個卡片模板名稱：
6. 釋出卡片
卡片只有釋出以後才能被外掛或工作流使用。
點選發布按鈕釋出一下，如下圖：
點選確定按鈕，就釋出好了。
五、使用卡片
在第三節我們講過，工作流和外掛功能支援新增訊息卡片。那麼我們就透過外掛的方式了使用卡片。
注: 如果有同學對外掛的使用不了解，可以看第三章的詳細教程。
1. 建立Bot
2. 新增外掛
因為我們這個例子是要呼叫知乎熱榜的資料，所以這裡我們在外掛中心搜尋知乎熱榜外掛。
點選新增以後就加好了。
3. 配置卡片
點選 繫結卡片資料按鈕 繫結卡片。
選擇「團隊卡片」選項卡，並選擇剛才我們釋出的卡片。
繫結資料來源。按以下方式，依次繫結外掛返回的資料：
繫結之後的資料如下圖所示：
4. 測試卡片
卡片設定好了，接下來讓我們測試一下吧。
輸入查詢知乎熱榜：
可以看到，訊息以卡片的形式展現出來了。
好了，到這裡，我們就把卡片的製作及使用學習完了，希望大家多多使用卡片的形式展現更好的的效果。願大家在本文中能有所收穫。
免費教程地址：https://www.bzfree.com/doc/coze
