超越画板的coze扣子闪光卡片

shadowrocket • • Shadowrocket官网

⭐好用的小火箭节点推荐⭐Shadowrocket高速节点推荐

😥

在使用 扣子画板进行页面设计 时,经常会遇到以下几个问题:

组件对齐 困难,影响整体美观

页面 显示效果 不理想

响应式布局 难以实现

内容 拖拽排版效 率低下

这些问题严重影响了 设计效果 和 工作效率 。本文将介绍一种基于代码节点的新方案,帮助你快速实现 优雅的页面排版 。 一点儿也不难 ，代码都给出来了，跟着做就能实现

效果展示

话不多说，先看效果

将这套工作流嵌入新闻播报、金句提取的智能体中，不得让人眼前一亮呀

实现思路

✨

使用扣子的代码节点，并且，利用静态的HTML页面，来展示信息，全程没有涉及到任何复杂的交互以及服务端技术，适合简单的信息展示，采用以下技术栈

（看不懂也没关系，下面会有提供代码，照抄就能实现咯）

HTML ：页面的基本结构是由HTML标签构成的，用于定义页面内容的结构和布局。

CSS ：页面的样式是通过内联的CSS样式表定义的，它负责页面的视觉表现，包括背景颜色、字体、边距、边框、圆角等。

JavaScript ：页面中包含了一个简单的JavaScript脚本，用于动态更新页面上的日期。这个脚本在页面加载时执行，获取当前日期并格式化后显示在页面上。

具体流程

现在让我们从头开始，一步步来搭建这个卡片制作的工作流~

整体工作流

节点分析图 （内容有点多，要滚动查看）

具体节点

节点用途

入参、出参

提取链接里的内容 引入开始节点放入的文章链接URL

# 角色 您作为一位资深且专业的文章编辑，能够透彻理解文章中的内涵，并按要求执行任务。 ## 任务 进而提供以下三部分内容: 1. 文章所讲述的主人公 (比如“雷军”) 2. 精确概括文章的主旨要义 3. 精准找出文章主人公的精彩金句，如果未找到 文章：{{input}}

生成原文二维码

图片搜索插件 用来搜索主角的图片

利用代码节点，改变HTML展示的信息变量， 变成一个可以根据自己信息改变的卡片 （具体代码内容见下方）

HTML代码转成图片内容

抠图节点，用于提取卡片主体 变成透明背景图

代码节点（python代码）

async def main(args: Args) -> Output:    try:        # HTML模板        HTML_TEMPLATE = '''<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>卡片展示</title>    <style>        body {            background: white;            display: flex;            justify-content: center;            align-items: center;            min-height: 100vh;            margin: 0;            font-family: Arial, sans-serif;        }        .container {            background: linear-gradient(180deg, #40E0D0, #87CEEB);            padding: 20px;            border-radius: 25px;            width: 415px;            box-sizing: border-box;        }        .card {            background: white;            border-radius: 20px;            padding: 20px;            width: 375px;            min-height: 200px;            height: auto;            box-shadow: none;            margin: 0 auto;            box-sizing: border-box;        }        .date {            color: #666;            margin-bottom: 20px;        }        .section {            margin-bottom: 15px;        }        .section-title {            display: flex;            align-items: center;            gap: 10px;            margin-bottom: 10px;        }        .profile-icon::before {            content: "👤";            font-size: 1.2em;        }        .camera-icon::before {            content: "📷";            font-size: 1.2em;        }        .content-icon::before {            content: "📝";            font-size: 1.2em;        }        .quote-icon::before {            content: "💝";            font-size: 1.2em;        }        .main-image {            width: 100%;            border-radius: 10px;            margin: 10px 0;        }        .footer {            margin-top: 20px;            display: flex;            justify-content: space-between;            align-items: center;            padding-top: 20px;            border-top: 1px solid #eee;        }        .qr-code {            width: 100px;            height: 100px;        }        .read-more {            color: #666;            text-decoration: none;        }        .author {            color: #888;            font-size: 0.9em;        }    </style>    <script>        function updateDate() {            const now = new Date();            const year = now.getFullYear();            const month = (now.getMonth() + 1).toString().padStart(2, '0');            const day = now.getDate().toString().padStart(2, '0');            const formattedDate = `${year}年${month}月${day}日`;            document.querySelector('.date').textContent = formattedDate;        }        window.onload = updateDate;    </script></head><body>    <div class="container">        <div class="card">            <div class="date"></div>            <div class="section">                <div class="section-title">                    <span class="profile-icon"></span>                    <span>主角:{{name}}</span>                </div>            </div>            <div class="section">                <div class="section-title">                    <span class="camera-icon"></span>                    <span>主角图片:</span>                </div>                <img src="{{tu1}}" alt="{{name}}" class="main-image">            </div>            <div class="section">                <div class="section-title">                    <span class="content-icon"></span>                    <span>文章内容:</span>                </div>                <p>{{neirong}}</p>            </div>            <div class="section">                <div class="section-title">                    <span class="quote-icon"></span>                    <span>金句:</span>                </div>                <p>{{jinju}}</p>            </div>            <div class="footer">                <div>                    <div class="author">Yeadon</div>                    <a href="#" class="read-more">阅读原文</a><br>                    <span class="read-more">扫描二维码</span>                </div>                <img src="{{tu2}}" alt="QR Code" class="qr-code">            </div>        </div>    </div></body></html>'''        # 定义模板变量映射关系        template_mapping = {            "name": args.params.get("name", ""),            "tu1": args.params.get("tu1", ""),            "neirong": args.params.get("neirong", ""),            "jinju": args.params.get("jinju", ""),            "tu2": args.params.get("tu2", "")        }        # 替换模板变量        output_html = HTML_TEMPLATE        for key, value in template_mapping.items():            output_html = output_html.replace("{{" + key + "}}", str(value))        ret: Output = {            "output": output_html,            "status": "success"        }            except Exception as e:        ret: Output = {            "output": "",            "status": f"error: {str(e)}"        }        return ret

内容总结

🏆

优势所在

整个页面自动对齐,美观大方

修改起来特别方便

做一次模板,以后换内容快速

🙉

有待提升

可以自由选择显示的内容

换个主题颜色

添加更多动画效果

最后

⭐好用的小火箭节点推荐⭐Shadowrocket高速节点推荐

THE END
分享
二维码
< <上一篇
下一篇>>