扣子Coze教程：一个案例学会智能体卡片(2)
链接：https://zhuanlan.zhihu.com/p/17892221749
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
嗨~我是灯塔。专注于AI、扣子Coze 智能体，持续分享扣子智能体、工作流搭建案例。
上期分享了智能体搭建和智能体卡片制作的详细思路，主要演示了如何在智能体中使用卡片输出工作流的结果
上期的卡片制作方法主要解决工作流中输出多组图片参数时（如同时输出两个包含图片的参数），如何制作卡片来展示多组图片，效果如下：
本期分享另一种制作思路：
在工作流中，通过代码节点，把多个图片参数组合成一个数组输出，卡片数据源绑定1个变量即可，效果如下：
不知道看到这里的小伙伴有没有一些思路？可以先思考下两种展示方式的差异在哪里？
接下来，演示代码节点的使用和卡片制作的详细思路与流程
教程通过实际案例演示、以思路讲解为主，在保证过程详细的基础上，尽量做到简洁易懂
一、代码节点
这是养生食谱工作流中输出的两个变量，一个是封面图片，另一个是内页图组
没看过这期文章的小伙伴建议先回顾一下
由于两个变量在绑定卡片时，不能在卡片的同一个布局中展示
所以这里使用了代码节点，作用就是把两个变量组合成一个变量
代码节点放置在结束流程之前，把封面图画板和内页图循环节点连接到代码节点
1.代码节点参数：
输入参数：输入两个变量，一个是封面图画板输出的图片，另一个是内页图循环输出的图片数组
代码：具体代码如下（注意代码中的两个参数名，和输入的参数名保持一致即可）
输出：输出变量类型Array<Object>
2.使用代码后最终的输出结果如下：
输出1个数组变量，包括4个图片的链接
二、卡片制作
1.创建卡片
在扣子资源库界面，点击右上角【+资源】按钮，选择卡片
2.创建变量
变量的作用在上期卡片教程中已经有详细的介绍，不清楚的小伙伴可以回顾一下（ 智能体卡片教程第1期）
由于增加代码节点后，工作流输出的只有1个变量，所以卡片中创建1个变量即可
新建变量：在变量选项中，选择新建变量，创建Array类型的变量，默认值如下：
3.搭建卡片组件
添加卡片组件：点击左上角卡片按钮，按右图卡片从上向下的顺序，在左侧组件中依次点击选择所需组件
4.标题和文本修改
文本配置：点击选中卡片中的文本组件，在右侧配置框中编辑想要的文本内容，设置字体等
5.图片组件配置
组件配置：点击选中网格布局组件，在右侧基础配置中修改配置
数据：选择动态格数（注意：这里必须选动态格数才能根据工作流中输出的图组的数量自动展示对应数量图片）
绑定数组变量类型：右侧第一个配置项数据中，点击图框右上方（x）图标，选择开始时创建的变量—封面图加内页
样式：每行展示数量选择 2
6.图片配置
添加图片：点击选中网格布局组件的小格子，在左侧组件中点击选择图片组件
数据配置：右侧第一个配置项资源中，点击图框右上方（x）图标，选择开始时创建的变量—封面图加内页
样式配置：选择宽度铺满，选择尺寸和裁剪比例
操作配置：开启点击事件，事件选择查看原图（智能体输出卡片时，可点击图片放大查看）
以上就是卡片的详细制作流程，卡片中图片位置、文本样式都可以按照自己的需求进行设计，制作完成后记得点右上角发布，否则智能体中无法绑定工作流！
接下来演示智能体中如何绑定卡片输出消息：
三、智能体中绑定卡片数据
智能体的创建流程在上一期文章中有详细演示，不清楚的小伙伴可以在上期文章查看（ 智能体卡片教程第1期）
智能体中添加好工作流后，绑定本次制作的卡片，给卡片绑定数据源，数据源选择工作流中输出的参数即可
以上就是卡片制作、代码节点配置的全部流程，最终智能体中输出的内容如下：
四、总结
1.本期代码节点案例，在养生食谱工作流基础上，增加了代码节点，用于组合工作流中两个流程输出的两个图片变量，使用代码最终输出一个变量
2.当工作流中输出多组图片变量，卡片中需要组合展示多组图片时，可以参考这个思路来实现
没有看过养生食谱工作流教程和智能体卡片教程第1期的小伙伴建议一起回顾一下
