【愚公系列】《扣子开发 AI Agent 智能体应用》009-扣子插件和卡片（卡片制作实战案例：最新头条新闻）
💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：ZEEKLOG博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者
🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕ZEEKLOG"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主
📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析
文章目录
🚀前言
扣子的插件是一个工具集，包括资讯阅读、旅游出行、效率办公、图片理解等 API及多模态模型，使用这些插件可以极大地拓展智能体的能力边界。扣子还支持智能体以消息卡片的形式发送消息，卡片可以让输出的格式更加美观。本章将介绍扣子的插件和卡片的用法。
🚀一、卡片：丰富智能体交互形式
🔎1.什么是卡片
在扣子平台中，卡片（Card） 是一种用于优化信息展示格式的富媒体消息模板。它旨在将智能体返回的原始文本数据（如标题、摘要、链接、图片地址等），按照预设的、美观的视觉布局呈现给用户，从而显著提升交互体验。
例如，智能体通过插件获取到一篇新闻数据。如果直接以纯文本输出，可能只是平淡的文字列表。而如果预先设计好一个新闻卡片模板，将标题、摘要、图片和链接等元素精心排版，最终就能呈现出一个图文并茂、结构清晰的新闻卡片（如图所示的新闻列表或列表卡片），使信息更易读、更吸引人。
🦋核心概念与规则
- 权限：卡片暂不支持多人协作编辑。只有卡片的创建者本人可以编辑或删除自己创建的卡片，团队内其他成员（包括所有者和管理员）均无此权限。
- 构成：卡片由组件（Component） 搭建而成，组件分为两类：
- 生效范围：目前，消息卡片仅在豆包客户端和飞书客户端内能够正确渲染显示。
- 支持场景：仅当通过工作流或插件返回数据时，才能调用并渲染消息卡片。
基础组件：用于承载和展示具体内容，如图片、文本、按钮等（如图）。一个完整的卡片通常由布局组件搭好骨架，再由基础组件填充内容（如图所示的图片+文本卡片）。
布局组件：用于划分卡片的整体结构区域（如图），例如分栏、网格等。可对每个布局区域单独进行参数设置，实现灵活多样的版面设计。
🔎2.卡片制作实战案例：最新头条新闻
本节将通过一个完整案例，学习如何制作一个用于展示头条新闻列表的消息卡片。目标是调用“头条新闻”插件获取数据，并利用卡片以列表形式优雅地展示出来。
案例目标：制作一个如图所示的新闻列表卡片，每条新闻包含左侧图片和右侧的文字标题与摘要，并能循环展示多条新闻。
🦋第1步：创建卡片并设计布局
- 进入扣子平台“资源库”，点击“+资源”，选择“卡片”。
- 在卡片编辑界面，从“组件”面板拖拽布局组件。本例需要左右两列（1:1），因此选择“多列布局”，并将其调整为两列。
为了适配正方形图片并给文字更多空间，可以调整列宽比例。例如，将图片所在列的宽度比例设为1，文字所在列设为5，通过中间虚线框预览调整效果。
🦋第2步：添加并配置基础组件
在布局好的两列中，分别添加基础组件：
- 左侧列：添加一个“图片”组件。
右侧列：添加两个“文本”组件，分别用于显示新闻标题和摘要。
（可选）为提升美观度，可在图片和文字列之间插入一个空列作为间隔。
此时，卡片的静态结构已搭建完成。点击“结构”标签（如图），可以清晰看到由两列（Column）组成的树形结构，每列下包含对应的组件。
🦋第3步：创建模拟数据并绑定循环
为了预览效果，需要先创建模拟数据并实现列表循环渲染。
- 创建数组变量：
- 切换到“变量”选项卡，点击“新建变量”。
- 设置变量名，如
newsList。 - 变量类型选择
Array（数组）。
在“默认值”中，粘贴一个包含3条模拟新闻数据的JSON数组。每条数据应包含 title（标题）、summary（摘要）、image（图片URL）、url（链接）等字段。
[{"title":"新闻标题1","summary":"新闻摘要的作用很重要。","image":"https://www.cloudssss.com/images/common/footer-logo.png","url":"https://www.cloudssss.com"},{"title":"新闻标题2","summary":"新闻摘要的作用很重要。","image":"https://www.cloudssss.com/images/common/footer-logo.png","url":"https://www.cloudssss.com"},{"title":"新闻标题3","summary":"新闻摘要的作用很重要。","image":"https://www.cloudssss.com/images/common/footer-logo.png","url":"www.cloudssss.com"}]
- 启用循环渲染：
- 在画布或“结构”视图中，选中卡片的最外层布局组件。
- 在右侧“高级配置”中，打开“循环渲染”开关。
- 为组件绑定数据：
- 点击图片组件，在资源配置中，选择数据源为：
循环项 -> image（即item.image）。 - 点击标题文本组件，在内容配置中，绑定数据源：
循环项 -> title（即item.title）。 - 点击摘要文本组件，在内容配置中，绑定数据源：
循环项 -> summary（即item.summary）。
- 点击图片组件，在资源配置中，选择数据源为：
在“循环数据”中，选择刚刚创建的数组变量 newsList。此时画布会按数组长度（3条）循环生成对应的卡片项。
完成绑定后，画布将根据模拟数据动态显示3条新闻卡片预览。
🦋第4步：保存模板并发布卡片
点击右上角“发布”按钮。填写版本信息，可选择生成封面，最后确认发布。只有发布后的卡片才能被插件或工作流调用。
点击顶部“保存为模板”，为卡片模板命名（如“头条热榜卡片”），方便后续复用。
🦋第5步：在智能体中集成卡片
- 创建智能体：新建一个智能体，命名为“头条新闻-卡片演示”。
- 绑定卡片：
- 在弹出窗口中，选择“我的卡片”，找到并选中已发布的“头条热榜卡片”。
- 测试效果：
- 在右侧“预览与调试”区域，输入“查询头条新闻”。
- 智能体将调用插件获取真实新闻数据，并自动套用卡片模板进行渲染。
最终，用户将收到一个以美观的卡片列表形式呈现的最新新闻，效果如图3-54所示，体验远胜于纯文本回复。
关键步骤：将卡片中各个组件的数据源，与插件返回的实际API字段进行映射绑定。例如，将卡片的 item.image 绑定到插件返回数据中的 image_url 字段，将 item.title 绑定到 title 字段等。
在该插件的配置区域，找到并点击“绑定卡片数据”按钮。
添加插件：在智能体编排页面的“技能”区域，添加“头条新闻”官方插件，并选择 getToutiaoNews 这个工具。
总结：本案例完整展示了消息卡片从设计、制作、数据绑定到最终集成的全流程。掌握卡片功能，能极大提升你所开发的智能体或AI应用的专业度和用户体验。
